JS. Proxy. Fallstricke zu wissen

Dieser Artikel ist für diejenigen von Interesse, die Proxy für Reaktivität oder Reflexion verwenden.
Das Verhalten von JS-Methoden ist uns bekannt, wenn wir sie einfach innerhalb eines Objekts verwenden.
Wenn eine Methode über eine Eigenschaft an ein anderes Objekt übergeben wird, funktioniert sie damit, was im Rahmen eines anderen Objekts definiert ist.

let obj1={prop1:'HEllo',method1(){console.log(this);}} let obj2={method2:obj1.method1}; obj2.method2(); 

Dies muss bei der Verwendung von Proxy klar verstanden werden.

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ console.log(target,prop); //Label1 return target[prop]; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } get(){ console.log(this);// Label2 return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); proxy= new MyProxy(prim); proxy.get(); 

Das Ergebnis ist das console.log (Label2); gibt uns ein Proxy-Objekt, wonach Proxy sowohl für das Ziel als auch für die Requisite funktioniert (siehe Label1); aber der Code scheint zu funktionieren. Was zu baden.

Die Methode beginnt über Proxy mit dem Objekt (this) zu kommunizieren. Dies ist praktisch und logisch, wenn wir Reflexion schreiben (Reflexion der Eigenschaften des Objekts und Verhaltensänderungen, ohne das Objekt zu ändern). Aber was sollen wir tun, wenn wir es nicht brauchen und die Methode benötigen, um speziell mit dem Zielobjekt zu arbeiten? Warum verlangsamen wir den Code?

Wenn wir mehr Logik einführen, z. B. Eigenschaftsfilter usw., kann sich der Code außerdem versehentlich verbiegen. Und beim Schreiben von reaktivem Code kommt es zu einem „Rollover“. (Wenn Sie beispielsweise eine Methode anfordern und anschließend ausführen, fordert die Methode Eigenschaften über Proxys an, für die bereits Ereignisse gebucht wurden.) Das heißt, Ereignisse beginnen dort zu feuern, wo es nicht notwendig ist und sie nicht erwartet wurden.

Wie zu beheben

Wie verstanden, wird dies für die Methode bereits überschrieben, bevor Handler.get in Proxy aufgerufen wird. Sie müssen es nur wie folgt neu definieren:

 let answer=target[prop]; if(typeof target[prop] ==='function'){ answer=target[prop].bind(target); } 

Wir erhalten folgenden Code:

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ //     valueOf.       get let answer=target[prop]; if(typeof target[prop] ==='function'){ answer=target[prop].bind(target); } return answer; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } get(){ console.log(this); return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); proxy= new MyProxy(prim); proxy.get(); 

Zum Schluss als Bonus.

Erstellen einer Kette von Reaktivität / Reflexion. Jedes verschachtelte Objekt ist ein Proxy:

 class MyProxy{ constructor(target){ return new Proxy(target,this); } get(target,prop){ let answer; let tp=target[prop];//    target - Proxy  target[prop] -getter if(typeof tp==='object' && tp!==null){ answer =new MyProxy(tp); } else if(typeof tp ==='function'){ //   .       answer=tp.bind(target); } else { answer=tp; } return answer; } } class PrimitiveType { constructor(target,prop) { this.target=target; this.prop=prop; } valueOf(){ console.log(this); return this.target[this.prop]; } } prim=new PrimitiveType({a:''},'a'); qwer={q:prim}; proxy= new MyProxy(qwer); proxy.q 

Vielen Dank für Ihre Aufmerksamkeit!