什么是 Proxy ？
Proxy 是 ES6 中的一个新特性，可以使用它来代理另一个对象。此外，开发人员可以通过 Proxy 将对象的行为定义为拦截器 (traps)，对于对象的属性访问和方法调用都可以定义为拦截器。
Proxy 对象可以充当目标对象和代理对象的中间人，为操作提供一个代理接口，以便用户更好地掌控应用程序的整个过程。
如何使用 Proxy ？
使用 Proxy 时，首先要创建一个 Proxy 对象，并为它定义一个处理程序。然后将所需的对象传递给 Proxy 构造函数，以代理该对象。
const handler = {
get(target, prop) {
console.log('getting ${prop}!');
return target[prop];
},
set(target, prop, value) {
console.log('setting ${prop}!');
target[prop] = value;
}
};
let obj = { a: 1, b: 2, c: 3 };
let proxy = new Proxy(obj, handler);
proxy.a = 4;
console.log(proxy.a);上面的代码中，创建了一个处理程序 (handler) 并将其传递给 Proxy 构造函数。对于代理对象的属性读取 (get) 和属性设置 (set) 操作，处理程序中定义的相应拦截器会被触发，并执行所需要的操作。
Proxy 的常用拦截器
Proxy 支持多种拦截器，具体如下：
- get：拦截对象的属性读取；
- set：拦截对象的属性设置；
- has：拦截 in 操作符；
- deleteProperty：拦截 delete 操作符；
- apply：拦截函数调用；
- construct：拦截 new 操作符。
如果开发人员只需要拦截一种操作，可以只实现其中一个拦截器方法。以下是一个属性名转换的示例，将属性名重命名为下划线结尾。
const handler = {
get(target, prop) {
if (prop[0] === '_') {
throw new Error('Access denied!');
}
return target['_' + prop];
},
set(target, prop, value) {
if (prop[0] === '_') {
throw new Error('Access denied!');
}
target['_' + prop] = value;
}
};
let obj = { a: 1, b: 2, _c: 3 };
let proxy = new Proxy(obj, handler);
proxy.a = 4; // ok
proxy.b = 5; // ok
proxy._c = 6; // throws error: Access denied!什么是 Reflect ？
Reflect 是一个内置对象，提供了一组与 Proxy 对象相关的静态方法。它可以简化 Proxy 的使用，也可以在某些情况下完全取代 Proxy。
Reflect 中的大部分方法与 Proxy 中的拦截器方法具有相同的名称和参数，但拦截器方法只能通过 Proxy 实例来调用，而 Reflect 方法则可以直接调用。
如何使用 Reflect ？
下面是使用 Reflect 来实现拦截器的示例：
const handler = {
get(target, prop) {
if (prop[0] === '_') {
throw new Error('Access denied!');
}
return Reflect.get(target, '_' + prop);
},
set(target, prop, value) {
if (prop[0] === '_') {
throw new Error('Access denied!');
}
return Reflect.set(target, '_' + prop, value);
}
};
let obj = { a: 1, b: 2, _c: 3 };
let proxy = new Proxy(obj, handler);
proxy.a = 4; // ok
proxy.b = 5; // ok
proxy._c = 6; // throws error: Access denied!在上面的示例中，get 和 set 方法中的代码被简化为调用 Reflect 对应的方法。这种方式不仅更加简洁，而且也更加灵活，因为 Reflect 拦截器方法可以直接在其它上下文中使用。
总结
Proxy 和 Reflect 组成了 ES6 中 object 类型的拦截器框架，可以轻松地在 JavaScript 环境和浏览器中创建各种代理类型和劫持行为。此外，Proxy 和 Reflect 的组合也可以优化代码，减少开发人员对对象属性和操作的处理。在使用 Proxy 和 Reflect 时，开发人员应该确定代理对象、设置拦截器方法，并根据具体的需求调用相应的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1c29aadd4f0e0ffaf6230