Proxy: 可以對數據的處理,對構造函數的處理,對數據的驗證,說白了就是在我們訪問對象添加了一層攔截 ,
其實說明白點跟 vuejs computed 的計算屬性很類似,
proxy 字面意思就是代理,下面代碼就相當與代理了 test{} 對象,當proxy.age 時觸發Proxy 的get 方法,做修改操作時觸發 set 方法,
* 測試es6 proxy代理 */ function f() { var name="小剛" var handler={ get:(target, prop)=>{ console.log(target); // target {name: "小紅", age: "20"} console.log(prop); // age debugger; if(prop==="age"){ return target[prop]+="日子"; } }, set:(target,key ,value)=>{ debugger; console.log(target); // {name: "小紅", age: "20日子"} console.log(key); //age 注: 只顯示proxy 調用的值 console.log(value); // 30 if(key==="age" && typeof value!=="number"){ throw Error("age 字段名必須為number"); } } } var test={ name:"小紅", age:"20" } var proxy = new Proxy(test,handler); var name = test.age; // proxy 現在 代理 test 對象 console.log(`我的年紀${proxy.age}`) // 獲取 對象 數據時觸發, 與vuejs 的computed 屬性類似 // 輸出: 我的年紀20 // 做一個set 修改操作 console.log(`我修改了年紀屬性觸發set 方法${proxy.age=30}`) // 輸出:我修改了年紀屬性觸發set 方法 30 } f();