本文實例講述了ES6知識點整理之Proxy的應用。分享給大家供大家參考，具體如下：
Proxy 用于修改對象某些操作的默認行為，可以對外界的訪問進行過濾和改寫，其概念類似于元編程。
Proxy 讓我們可以對任何對象的絕大部分行為進行監聽和干涉，實現更多的自定義程序行為。在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截。
目前【兼容性】存在一定的問題，目前在chrome和ff瀏覽器中的非嚴格模式下可用，一些先進的技術即使在目前不能廣泛應用，但隨著時間的流逝，都將會進入程序員日常的編程中。
注： 博客整理時間：2018-03-24 16:21:15
初識Proxy
var obj = {name:'Joh'};var proxy = new Proxy(obj, { get (target, key) { return 'test1'; }, set (target, key, value) { target[key] = value }});console.log(proxy.name); // test1 進行get取值proxy.name = 'test2'; // 進行set設置console.log(obj.name); // test2通過Proxy對象進行攔截target對象的屬性
完整的使用Proxy進行設置, 獲取，修改和刪除的案例
var obj = {name:'Joh',group:'g1',_type:'student'};var proxy = new Proxy(obj, { get (target, key) { if(key[0]!== '_') { // return Reflect.get(target,key); // 效果等同于下面的return語句 return target[key]; }; }, set (target, key, value) { if(key[0]!== '_') { // Reflect.set(target,key,value); return target[key] = value; } }, deleteProperty(target, key) { // 業務邏輯 if(key[0] !== '_') { // Reflect.deleteProperty(target, key); delete target[key]; } }});console.log(proxy.name); // Johconsole.log(obj.name); // Johproxy.name = 'Lily'; // 在非嚴格模式下的賦值操作，嚴格模式將會報錯console.log(obj.name); // Lilydelete proxy.name; // 未能成功刪除，因為上面內部有判斷console.log(obj.name); // undefined 成功刪除delete proxy.group;console.log(obj.group); // undefined 成功刪除delete proxy._type;console.log(obj._type); // studentproxy.color='red';console.log(obj.color); // red其中借助Reflect實現和直接實現的效果等同
通過has方法和in關鍵字進行攔截的示例：
var obj = {name:"Joh",_name:"Lily"};var proxy = new Proxy(obj, { has(target, key) { if(key[0] === '_'){ return false; } else { return key in target; } }});console.log('has name attr: ', 'name' in proxy); // has name attr: trueconsole.log('has _name attr: ', '_name' in proxy); // has _name attr: false使用ownKeys方法與for-in遍歷過濾符合特定規則屬性的示例
var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"};var proxy = new Proxy(obj, { ownKeys (target) { return Reflect.ownKeys(target).filter(key => key[0] !== '_'); }});for(var k in proxy) { console.log(k); // 分別輸出 name age group 過濾了 _name}通過apply方法對函數調用的攔截
function test() { console.log('hello world');}var proxyFun = new Proxy(test,{ apply(target,ctx,args) { console.log('proxy apply'); return Reflect.apply(target,ctx,args); }});proxyFun(); // 分別輸出 proxy apply 和 hello world// proxyFun.apply(); // 同樣，分別輸出 proxy apply 和 hello world// proxyFun.call(); // 同樣，分別輸出 proxy apply 和 hello world通過construct方法對構造函數實例化的攔截
function User() { console.log('this is a contructor');}var ClassProxy = new Proxy(User, { construct(target,args) { console.log('proxy construct'); return Reflect.construct(target,args); }});new ClassProxy(); // 分別輸出 proxy construct 和 this is a contructor希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
