Proxy 和 Reflect用法的学习笔记

Proxy 是什么呢？
通过调用new Proxy()方法，能够创建出一个代理对象，这个代理可以替代另一个对象，并且能够对基本操作进行拦截以及自定义设置。从表面上看，这个代理与目标对象能够被当作完全相同的对象来对待。
接下来了解一下关于 Proxy 的几个关键术语：
traps（捕获器）：它提供了访问属性的方法。
handler（处理器）：这是一个定义了一个或多个捕获器的对象。
target（目标对象）：被 Proxy 代理进行虚拟化的对象。
可以通过如下方式来创建一个 Proxy：
const p = new Proxy(target, handler);
这里的两个参数正好对应上述提到的相应术语。
traps 捕获器详解
handler 是一个包含了多个捕获器的对象。所有的捕获器都是可选的，如果 handler 对象上没有定义任何捕获器，那么 Proxy 就会保留目标对象的默认行为。
下面是一些常见的捕获器：
捕获器 被重写的行为
get 读取一个属性的值
set 写入一个属性
has in 运算符
deleteProperty delete 运算符
getPrototypeOf Object.getPrototypeOf()
setPrototypeOf Object.setPrototypeOf()
isExtensible Object.isExtensible()
preventExtensions Object.preventExtensions()
getOwnPropertyDescriptor Object.getOwnPropertyDescriptor()
defineProperty Object.defineProperty()
ownKeys Object.keys、Object.getOwnPropertyNames () 与 Object.getOwnPropertySymbols ()
apply 调用一个函数
construct new 操作符
简单使用示例
以下代码会将所有应用到 Proxy 的操作，转发到obj对象上。
javascript
Copy
const obj = {};
const p = new Proxy(obj, {});
p.a = 37;
console.log(obj.a); // 37
Reflect 是什么呢？
Reflect 是一个内置对象，但它并不是一个构造函数，不能通过new操作符来进行实例化。
Reflect 提供了拦截 JavaScript 操作的方法，这些方法与 Proxy 中 handler 上的捕获器是相同的。
比如Reflect.set()是set捕获器函数对应的反射方法，同时它也是set操作的默认行为。Reflect.set()与set方法的函数参数是相同的，可以在捕获器函数中很方便地进行调用。
Reflect 简单使用示例
如下所示，使用Reflect.has来检验obj对象上是否存在name、say属性。
const obj = {
name: ‘Jack’,
age: 18
};
Reflect.has(obj, ‘name’); // true
Reflect.has(obj, ‘say’); // false
拦截对象默认行为举例
使用 set 验证属性值
如下代码所示，对对象obj进行了代理，当设置新属性或者更改属性时，会被set捕获器拦截。为了避免影响obj已有的属性，使用trapTarget.hasOwnProperty(key)进行判断。如果传入的参数不是数字，就会抛出错误。否则，通过Reflect.set执行其默认行为。
const obj = {
name: ‘Jack’
};
const proxy = new Proxy(obj, {
set(trapTarget, key, value, receiver) {
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError(‘Property must be a number.’);
}
}
return Reflect.set(trapTarget, key, value, receiver);
}
});
proxy.age = 18;
console.log(proxy.age); // 18
console.log(obj.age); // 18
// 已有的属性不受影响
proxy.name = ‘Tom’;
console.log(proxy.name); // Tom
console.log(obj.name); // Tom
// 抛出错误，定义新属性时，值必须是数字
proxy.other = ‘other’;
防止访问对象不存在的属性
在 JavaScript 中，我们都知道，当访问一个对象上不存在的属性时，并不会报错，而是会返回undefined。
这可能会引发严重的问题，而使用 Proxy 进行拦截，就可以避免这个问题。
如下代码所示，拦截空对象obj的访问行为，当访问obj的属性时，判断访问的key是否存在于对象上，如果不存在，就抛出错误。如果存在，则使用Reflect.get执行get的默认行为。
const obj = {};
const p = new Proxy(obj, {
get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new TypeError(Property ${key} doesn't exist.);
}
return Reflect.get(trapTarget, key, receiver);
}
});
obj.name = ‘Jack’;
// 访问存在的属性
console.log(p.name); // Jack
// 访问不存在的属性，报错
console.log(p.age); // TypeError: Property age doesn’t exist.
防止对象属性被删除
如下代码所示，拦截对象的deleteProperty操作，当删除对象的属性时，会被拦截。如果将要删除的属性键名为id，就会抛出错误，阻止删除。如果不为id，则执行Reflect.deleteProperty的默认操作，删除属性。
const obj = {
id: ‘123’,
name: ‘Jack’
};
const p = new Proxy(obj, {
deleteProperty(trapTarget, key) {
if (key === ‘id’) {
throw new TypeError(property ${key} can't be deleted.);
} else {
return Reflect.deleteProperty(trapTarget, key);
}
}
});
delete p.name;
console.log(p); // { id: ‘123’ }
delete p.id;
console.log(p); // TypeError: property id can’t be deleted.