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進行預處理（簡單學習）