mdn上的解释:
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。
Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与处理器对象的方法相同。Reflect
不是一个函数对象,因此它是不可构造的。
《深入理解ES6》中对Proxy的解释是:代理(Proxy)是一种可以拦截并改变底层JavaScript引擎操作的包装器,在新语言中通过它暴露内部运作的对象
术语
- handler
包含陷阱(traps)的占位符对象。 - traps
提供属性访问的方法。这类似于操作系统中陷阱的概念。 - target
代理虚拟化的对象。
一个简单的代理
用Proxy构造函数创建代理需要传入两个参数:目标(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"
代理只是简单地将操作转发给目标,它不会储存这个属性。由于 proxy.name 和 target.name 引用都是 target.name ,因此二者的值相同,从而为 target.name 设置新值后, proxy.name 也一同变化。
一些拦截底层操作的例子
- 使用 set 陷阱验证属性
let target = {
name: "target"
};
let proxy = new Proxy (target, {
/**
* trapTarget 用户接收属性(代理的目标)的对象
* key 要写入的属性值(字符串或 Symbol 类型)
* value 被写入属性的值
* receiver 操作发生的对象(通常是代理)
*/
set(trapTarget, key, value, receiver) {
// 忽略不希望收到影响的已有属性
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError("属性必须是数字");
}
}
// 添加属性
return Reflect.set(trapTarget, key, value, receiver);
}
});
// 添加一个新属性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(target.count); // 1
// 由于目标已有 name 属性因而可以给它赋予不是数字的值
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 给新属性赋予不是数字的值
proxy.anotherName = "proxy" // TypeError: “属性必须是数字”
- 用 get 陷阱验证对象结构( Object Shape )
let proxy = new Proxy({}, {
get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new TypeError("属性" + key + "不存在");
}
return Reflect.get(trapTarget, key, receiver);
}
});
// 添加一个属性,程序仍正常运行
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
// 如果属性不存在,则抛出错误
console.log(proxy.name); // 抛出错误
- 使用 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
总结
这是proxy和reflection简单的介绍,简单的说就是可以拦截js底层方法的操作,从而将底层方法改造成期望的效果。之后会更新关于代理和反射的其他用法和用处