什么是 Proxy？

推荐答案

Proxy 是 ECMAScript 6 引入的一个新特性，它允许你创建一个对象的代理，从而可以拦截并重新定义对象的基本操作。通过 Proxy，你可以控制对目标对象的访问、赋值、枚举等操作，从而实现更高级的功能，如数据验证、日志记录、性能监控等。

本题详细解读

什么是 Proxy？

Proxy 是一个构造函数，用于创建一个对象的代理。它接受两个参数：

1. 目标对象（target）：这是你想要代理的对象。
2. 处理器对象（handler）：这是一个包含“陷阱”（trap）方法的对象，这些方法定义了代理对象的行为。

基本用法

// www.javascriptcn.com code example
const target = {
  message: "Hello, World!"
};

const handler = {
  get: function(target, prop, receiver) {
    if (prop === 'message') {
      return target[prop].toUpperCase();
    }
    return Reflect.get(...arguments);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // 输出: "HELLO, WORLD!"

在这个例子中，handler 对象定义了一个 get 陷阱，当访问 proxy.message 时，get 陷阱会被触发，返回 message 的大写形式。

常见的陷阱方法

• get(target, prop, receiver)：拦截对象属性的读取操作。
• set(target, prop, value, receiver)：拦截对象属性的设置操作。
• has(target, prop)：拦截 in 操作符。
• deleteProperty(target, prop)：拦截 delete 操作符。
• apply(target, thisArg, argumentsList)：拦截函数的调用、apply 和 call 操作。
• construct(target, argumentsList, newTarget)：拦截 new 操作符。

使用场景

1. 数据验证：可以在 set 陷阱中验证数据的合法性。
2. 日志记录：可以在 get 或 set 陷阱中记录对象的访问和修改。
3. 性能监控：可以在 apply 陷阱中监控函数的执行时间。
4. 虚拟属性：可以通过 get 陷阱动态生成属性值。

注意事项

• Proxy 只能代理对象，不能代理原始值（如字符串、数字等）。
• Proxy 的陷阱方法必须返回一个有效的值，否则会抛出错误。
• Proxy 的性能开销较大，因此在性能敏感的场景中应谨慎使用。

通过 Proxy，你可以实现许多强大的功能，但同时也需要谨慎使用，以避免不必要的性能损耗和复杂性。