如何使用 Proxy 拦截对象的操作？

推荐答案

// www.javascriptcn.com code example
const target = {
  name: 'Alice',
  age: 25
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting property: ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting property: ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  },
  deleteProperty(target, prop) {
    console.log(`Deleting property: ${prop}`);
    return Reflect.deleteProperty(target, prop);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出: Getting property: name, Alice
proxy.age = 30; // 输出: Setting property: age to 30
delete proxy.age; // 输出: Deleting property: age

本题详细解读

1. Proxy 的基本概念

Proxy 是 ES6 引入的一个新特性，用于创建一个对象的代理，从而可以拦截并重新定义对象的基本操作。通过 Proxy，你可以拦截诸如属性读取、属性赋值、属性删除等操作，并在这些操作发生时执行自定义的逻辑。

2. Proxy 的构造函数

Proxy 的构造函数接受两个参数：

• target：要代理的目标对象。
• handler：一个对象，其属性是用于定义代理行为的函数（也称为“陷阱”）。

3. 常用的陷阱方法

• get(target, prop, receiver)：拦截对象属性的读取操作。
• set(target, prop, value, receiver)：拦截对象属性的赋值操作。
• deleteProperty(target, prop)：拦截对象属性的删除操作。

4. Reflect 对象

Reflect 是一个内置对象，它提供了与 Proxy 陷阱方法相对应的方法。使用 Reflect 可以更方便地实现默认行为。例如，Reflect.get(target, prop, receiver) 等同于直接访问 target[prop]。

5. 示例代码解析

在示例代码中：

• handler 对象定义了 get、set 和 deleteProperty 三个陷阱方法。
• 当访问 proxy.name 时，get 陷阱被触发，输出 Getting property: name，并返回 target.name 的值。
• 当设置 proxy.age = 30 时，set 陷阱被触发，输出 Setting property: age to 30，并将 target.age 设置为 30。
• 当删除 proxy.age 时，deleteProperty 陷阱被触发，输出 Deleting property: age，并删除 target.age 属性。

6. 使用场景

Proxy 可以用于多种场景，例如：

• 数据验证：在设置属性时进行验证。
• 日志记录：在访问或修改属性时记录日志。
• 数据绑定：在属性变化时自动更新 UI。
• 缓存：在访问属性时返回缓存的值。

通过 Proxy，你可以更灵活地控制对象的行为，实现更复杂的逻辑。