ES6系列_13之Proxy進行預處理(簡單學習)
1.理解什麽是預處理?
當我們在操作一個對象或者方法時會有幾種動作,比如:在運行函數前初始化一些數據,在改變對象值後做一些善後處理。這些都算鉤子函數,Proxy的存在就可以讓我們給函數加上這樣的鉤子函數。
Proxy進行預處理可以簡單理解為:執行方法前,先預處理代碼(預熱工作)。
2.對比引入Proxy
我們先來回顧一下定義對象的方法。
var obj={ add:function(val){ return val+100; }, name:"小紅" }; console.log(obj.add(100)); //200 console.log(obj.name);//小紅
聲明了一個obj對象,增加了一個對象方法add和一個對象屬性name,然後在控制臺進行了打印。
這個時候我們想在執行obj對象之前做一些事,我們應該怎麽辦呢?我們的es6提供的proxy就出場了。它給我們提供了預處理機制,在某件事情執行之前,先做一些預熱工作,然後才真正執行我們的目標。
(1)Proxy的聲明
我們用new的方法對Proxy進行聲明,基本格式如下:
new Proxy({},{});
需要註意的是這裏是兩個花括號,第一個花括號就相當於我們方法的主體,後邊的花括號就是Proxy代理處理區域,相當於我們寫鉤子函數的地方。
將上述代碼改進一下,完成在執行add方法前先在控制臺輸出一個"準備執行add方法"的文字。
var pro = new Proxy({ add: function (val) { return val + 100; }, name: ‘小紅‘ }, { get:function(target,key,property){ console.log(‘準備執行add方法‘); return target[key]; } }); console.log(pro.name);
結果為:先輸出:準備執行add方法,在輸出小紅
總結:相當於在方法調用前的鉤子函數。
下面來看看get方法中的一些參數:
get屬性:
get屬性是在你得到某對象屬性值時預處理的方法,他接受三個參數
- target:得到的目標值
- key:目標的key值,相當於對象的屬性
- property:被獲取的屬性名。
var pro = new Proxy({ add: function (val) { return val + 10; }, name: ‘張三‘ }, { set:function(target,key,value,receiver){ console.log(`setting ${key} = ${value}`); return target[key] = value; } }); pro.name="李四"; console.log(pro.name); //李四
輸出結果為:
set屬性
set屬性是值你要改變Proxy屬性值時,進行的預先處理。它接收四個參數。
- target:目標值。
- key:目標的Key值。
- value:要改變的值。
- receiver:改變前的原始值。
3.apply的使用
方法的預處理。
apply的作用是調用內部的方法,它使用在方法體是一個匿名函數時。看下邊的代碼
let target = function () { return ‘doing target‘; }; var handler = { apply(target, ctx, args) { console.log(‘do apply‘); return Reflect.apply(...arguments); } } var pro = new Proxy(target, handler); console.log(pro());
apply方法可以接收三個參數,依次是目標對象,目標對象的上下文對象(this)和目標對象的參數數組。
上面代碼中,每當執行proxy函數(直接調用或call和apply調用),就會被apply方法攔截。
每天學習一點,加油。待續。。。。
ES6系列_13之Proxy進行預處理(簡單學習)