Proxy 補充學習筆記

1.基本使用

let obj = new Proxy({},{get:function(target,key,receiver){console.log('獲取值');},set:function(target,key,value,receiver){console.log('設置值');} }) obj.a = 1; obj.a

let obj = {a:100,b:200 } let proxyObj = new Proxy(obj,{get:function(target,key,receiver){console.log(`獲取值---屬性:${key},屬性值:${target[key]}`);},set:function(target,key,value,handler){console.log(`設置值---屬性:${key},屬性值:${target[key]},要設置的參數:${value}`);} }) proxyObj.a = 1; proxyObj.b

上面代碼set方法主要的參數有兩個，第一個target指的目標對象，key表示獲取的該對象的key，

第二個set方法主要的參數有三個，第一個target指的目標對象，key表示獲取的該對象的key，value表示要設置的value

總結：Proxy實際上“重載”了點運算符，用“代理器”做到了語言層面的邏輯的定義覆蓋。

2.Proxy實例也可以作為其他對象的原型對象

（1）回顧Object.create方法

let a = {rep:'apple'}; let b = Object.create(a); console.log(b);//{} console.log(b.__proto__);//{ rep: 'apple' } console.log(b.rep);//apple

（2）Proxy的實例作為其他對象的原型對象

let proxy = new Proxy({},{get:function(target,key){return 22;} }) let obj = Object.create(proxy);//proxy的實例也可以作為其他對象的原型對象 console.log(obj.a);//根據原型鏈在proxy對象上查找，導致被攔截 obj.a = 33; console.log(obj.a);

解釋：本來obj 對象沒有a這個屬性，所以根據原型鏈會在proxy對象上讀取這個屬性。在設置了obj的a屬性之后，讀取成功。

3.同一個Proxy函數可以攔截多個操作

var handler = {get:function(target,key){if(key == "prototype"){return Object.prototype;}return "learning,"+key;},set:function(target,key,value){console.log( `要設置的屬性：${key},屬性值：${target[key]},要設置的屬性值：${value}`);},apply:function(target,binding,args){return args;},construct:function(target,args){return {value:args}} } var hProxy = new Proxy(function(x,y){return x + y; },handler); console.log(hProxy(1,2)); console.log(new hProxy(1,2)); console.log(hProxy.prototype == Object.prototype); console.log(hProxy.foo); hProxy.bar = 4;

注：對于可以設置但是沒有設置攔截的操作，則直接落在目標對象上，按照原先的方式產生結果。

補充：淺拷貝和深拷貝

淺拷貝

//淺拷貝 let subObj = {}; let obj = {a:100,b:200,subObj } let obj2 = Object.create(obj); console.log(obj2 == obj); console.log(obj2.subObj == obj.subObj);

總結

以上是生活随笔為你收集整理的Proxy 补充学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。