mdn上的解釋：
Proxy 對(duì)象用于定義基本操作的自定義行為（如屬性查找，賦值掀潮，枚舉菇夸，函數(shù)調(diào)用等）。
《深入理解ES6》中對(duì)Proxy的解釋是：代理（Proxy）是一種可以攔截并改變底層JavaScript引擎操作的包裝器凡蚜，在新語(yǔ)言中通過(guò)它暴露內(nèi)部運(yùn)作的對(duì)象
術(shù)語(yǔ)
-
handler
包含陷阱（traps）的占位符對(duì)象。 - traps
提供屬性訪問(wèn)的方法吭从。這類似于操作系統(tǒng)中陷阱的概念朝蜘。 - target
代理虛擬化的對(duì)象。
一個(gè)簡(jiǎn)單的代理
用Proxy構(gòu)造函數(shù)創(chuàng)建代理需要傳入兩個(gè)參數(shù)：目標(biāo)（target）和處理程序（handler）
let target = {};
let proxy = new Proxy(target, {})
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
target.name = "target";
console.log(proxy.name); // "target"
console.log(target.name); // "target"
代理只是簡(jiǎn)單地將操作轉(zhuǎn)發(fā)給目標(biāo)涩金，它不會(huì)儲(chǔ)存這個(gè)屬性谱醇。由于 proxy.name 和 target.name 引用都是 target.name ，因此二者的值相同步做，從而為 target.name 設(shè)置新值后眉撵， proxy.name 也一同變化缀遍。
一些攔截底層操作的例子
- 使用 set 陷阱驗(yàn)證屬性
let target = {
name: "target"
};
let proxy = new Proxy (target, {
/**
* trapTarget 用戶接收屬性（代理的目標(biāo)）的對(duì)象
* key 要寫(xiě)入的屬性值（字符串或 Symbol 類型）
* value 被寫(xiě)入屬性的值
* receiver 操作發(fā)生的對(duì)象（通常是代理）
*/
set(trapTarget, key, value, receiver) {
// 忽略不希望收到影響的已有屬性
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError("屬性必須是數(shù)字");
}
}
// 添加屬性
return Reflect.set(trapTarget, key, value, receiver);
}
});
// 添加一個(gè)新屬性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(target.count); // 1
// 由于目標(biāo)已有 name 屬性因而可以給它賦予不是數(shù)字的值
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 給新屬性賦予不是數(shù)字的值
proxy.anotherName = "proxy" // TypeError: “屬性必須是數(shù)字”
- 用 get 陷阱驗(yàn)證對(duì)象結(jié)構(gòu)（ Object Shape ）
let proxy = new Proxy({}, {
get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new TypeError("屬性" + key + "不存在");
}
return Reflect.get(trapTarget, key, receiver);
}
});
// 添加一個(gè)屬性隔缀，程序仍正常運(yùn)行
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
// 如果屬性不存在闻镶，則拋出錯(cuò)誤
console.log(proxy.name); // 拋出錯(cuò)誤
- 使用 has 陷阱隱藏已有屬性
let target = {
name: "target",
value: 42
};
let proxy = new Proxy(target, {
has(trapTarget, key) {
if (key === "value") {
return false;
} else {
return Reflect.has(trapTarget, key);
}
}
});
console.log("value" in proxy); // false
console.log("name" in proxy); // true
console.log("toString" in proxy); // true
總結(jié)
這是proxy和reflection簡(jiǎn)單的介紹，簡(jiǎn)單的說(shuō)就是可以攔截js底層方法的操作将鸵，從而將底層方法改造成期望的效果勉盅。之后會(huì)更新關(guān)于代理和反射的其他用法和用處
