JS. Proksi Jebakan untuk Tahu Tentang

Artikel ini akan menarik bagi mereka yang menggunakan Proksi untuk reaktivitas atau refleksi.
Perilaku metode JS diketahui oleh kita jika kita hanya menggunakannya dalam suatu objek.
Jika suatu metode dilewatkan melalui properti ke objek lain, maka ia bekerja dengan itu, yang didefinisikan dalam kerangka kerja objek lain.

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

Ini harus dipahami dengan jelas saat menggunakan 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(); 

Hasilnya adalah console.log (Label2) itu; akan memberi kita objek Proxy, setelah itu Proxy akan bekerja pada target dan prop (lihat Label1); tapi kodenya sepertinya berfungsi. Apa yang mandi?

Metode mulai berkomunikasi dengan objek (ini) melalui Proxy. Ini nyaman dan logis ketika kita menulis refleksi (refleksi dari properti objek dan perubahan perilaku tanpa mengubah objek). Tetapi jika kita tidak membutuhkannya dan kita membutuhkan metode untuk bekerja secara khusus dengan objek target, apa yang harus kita lakukan? Mengapa kita memperlambat kodenya?

Selain itu, jika kami memperkenalkan lebih banyak logika, misalnya, filter properti, dll., Kode mungkin secara tidak sengaja berubah. Dan ketika menulis kode reaktif, ada "roll-over". (Misalnya, ketika meminta metode dan eksekusi selanjutnya, metode meminta properti melalui proksi yang peristiwa telah diposting). Artinya, peristiwa mulai terjadi di tempat yang tidak perlu dan tidak diharapkan.

Bagaimana cara memperbaikinya

Seperti yang dipahami, ini sudah ditimpa untuk metode sebelum memanggil Handler.get di Proxy. Anda hanya perlu mendefinisikan ulang lagi sebagai berikut:

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

Kami mendapatkan kode berikut:

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

Akhirnya, sebagai bonus.

Menciptakan rantai reaktivitas / refleksi. Setiap objek bersarang akan menjadi 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 

Terima kasih atas perhatian anda!