今天我們將嘗試下花 1 分鐘的時(shí)間簡單的了解下什么是 JS 代理對(duì)象（proxies）？我們可以這樣理解，JS 代理就相當(dāng)于在對(duì)象的外層加了一層攔截，在攔截方法里我們可以自定義一些個(gè)性化的邏輯，定義完后我們可以通過代理定義的方法間接操作對(duì)象。在說的通俗點(diǎn)，在我們的生活中，我們買房租房一般不找房東先找中介的道理一樣，因?yàn)橹薪槌洚?dāng)了房源的代理一樣。

接下來我們通過代碼理解下什么是代理，用JS創(chuàng)建代理比較簡單，如下段代碼所示：

let?initialObject?=?{?/*?定義對(duì)象?*/?};
let?handler?=?{?/*?自定義相關(guān)的攔截器處理邏輯?*/?};
let?proxyedObject?=?new?Proxy(initialObject,?handler);

簡單解釋下，我們可以通過代理去調(diào)用 handler 里定義的邏輯去操作對(duì)象，對(duì)象代理有兩個(gè)參數(shù)，initialObject 是目標(biāo)對(duì)象，handler 攔截器對(duì)象（或者稱作處理器對(duì)象）。

接下來，我們來看一個(gè)例子，我們通過代理實(shí)現(xiàn)讀取一個(gè)對(duì)象的屬性，如果對(duì)象的屬性不存在，則返回代理中定義的默認(rèn)值，這里我們?cè)诖砝镏貙懥嗽袑?duì)象的 get 方法。

let?dog?=?{
??name:?"Spike"
};

const?handler?=?{
????get:?(obj,?property)?=>?property?in?obj???obj[property]?:?'You?don't?have?defined??a?property?named?'?+??property;
}

const?proxyDog?=?new?Proxy(dog,?handler);
console.log(proxyDog.name);
//?將會(huì)輸出?Spike
console.log(proxyDog.age);
//?輸出?You?don't?have?defined??a?property?named?age

上述例子，我們通過 get: (obj, property) => ... 方法重寫了對(duì)象的 get 方法。

最后我再看一個(gè)如何通過代理去更對(duì)對(duì)象的值，如果更新的值不是我們期望的值，系統(tǒng)則拋出異常錯(cuò)誤，不能正常更新，否則重新賦值并更新對(duì)象的屬性。

let?dog?=?{
????name:?"Spike",
????age:?1;
};
let?handler?=?{?
????set:?(obj,?property,?value)?=>?{?
????????if?(property?===?'age')?{?
????????????if?(!Number.isInteger(value))?throw?new?TypeError('Use?numbers?only?for?age');?
????????????if?((value?0)?||?(value?>?30))??throw?new?RangeError('A?dog?can't?live?that?long');?
????????}?
????????obj[prop]?=?value;?
????????return?true;?
????}?
};

const?proxyDog?=?new?Proxy(dog,?handler);
proxyDog.age?=?-1;
//?will?throw?A?dog?can't?live?that?long
proxyDog.age?=?'very?old';
//?will?throw?Use?numbers?only?for?age

通過 JS 代理我們不僅可以重寫 getters 和 ?setters 方法，我們還可以進(jìn)行這些操作：deleteProperty、construct、getOwnPropertyDescriptor 等...

今天的文章就到這里，不知道你是否理解代理對(duì)象啦，在接下來的文章里，我們?cè)倭牧拇碓趯?shí)際項(xiàng)目中的運(yùn)用，感謝你的閱讀。

參考來源：http://www.js-craft.io/blog/what-are-javascript-proxies/

Daniel