JS. Proxy. Écueil à connaître

Cet article intéressera ceux qui utilisent le proxy pour la réactivité ou la réflexion.
Le comportement des méthodes JS est bien connu de nous si nous les utilisons simplement dans un objet.
Si une méthode est transmise via une propriété à un autre objet, elle fonctionne avec celle-ci, qui est définie comme faisant partie d'un autre objet.

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

Cela doit être clairement compris lors de l'utilisation de Proxy.

 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(); 

Le résultat est que console.log (Label2); nous donnera un objet Proxy, après quoi Proxy fonctionnera à la fois sur cible et prop (voir Label1); mais le code semble fonctionner. Que se baigner.

La méthode commence à communiquer avec l'objet (ceci) via Proxy. Ceci est pratique et logique lorsque nous écrivons la réflexion (réflexion des propriétés de l'objet et changements de comportement sans changer l'objet). Mais si nous n'en avons pas besoin et que nous avons besoin de la méthode pour travailler spécifiquement avec l'objet cible, que devons-nous faire? Pourquoi ralentissons-nous le code?

De plus, si nous introduisons plus de logique, par exemple, des filtres de propriétés, etc., le code peut se plier accidentellement. Et lors de l'écriture de code réactif, il y a un «roll-over». (Par exemple, lors de la demande d'une méthode et de son exécution ultérieure, la méthode demande des propriétés via des proxy pour lesquels des événements ont déjà été publiés). Autrement dit, les événements commencent à se déclencher là où cela n'est pas nécessaire et ils n'étaient pas attendus.

Comment réparer

Comme nous l'avons compris, cela est déjà remplacé pour la méthode avant d'appeler Handler.get dans Proxy. Il vous suffit de le redéfinir comme suit:

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

Nous obtenons le code suivant:

 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(); 

Enfin, en bonus.

Création d'une chaîne de réactivité / réflexion. Chaque objet imbriqué sera un 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 

Merci de votre attention!