今天我們將嘗試下花 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
