什么是 Proxy？

Proxy 是 ECMAScript 6（ES6）中引入的一个新特性，用于创建代理对象，可以用来实现对目标对象的自定义行为。代理对象可以拦截和捕获对目标对象的操作，包括属性的读取、写入、删除等，以及对目标对象的其他操作。这使得开发人员可以在操作目标对象之前或之后执行自定义逻辑，从而实现更高级的数据操作和控制。

Proxy 的基本语法如下：

const proxy = new Proxy(target, handler);

- `target`：代理的目标对象，即需要被代理的对象。

- `handler`：一个包含各种拦截操作的方法的对象，这些方法会在对目标对象进行操作时被调用，允许你自定义行为。

Proxy 提供了多种拦截方法，包括但不限于：

- `get(target, property, receiver)`：用于拦截属性读取操作。

- `set(target, property, value, receiver)`：用于拦截属性写入操作。

- `has(target, property)`：用于拦截 `property in object` 操作。

- `deleteProperty(target, property)`：用于拦截属性删除操作。

- `apply(target, thisArg, argumentsList)`：用于拦截函数调用操作。

- `construct(target, argumentsList, newTarget)`：用于拦截类构造函数的调用。

通过使用 Proxy，你可以实现各种高级功能，如数据验证、属性访问控制、数据绑定、惰性加载等。它还常用于实现状态管理库（如 Vuex 或 Redux）以及响应式框架（如 Vue.js 中的响应式系统）。

const target = {
  name: 'John',
  age: 30
};
const handler = {
  get(target, property) {
    console.log(`Getting property: ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting property: ${property} to ${value}`);
    target[property] = value;
  }
};
const proxy = new Proxy(target, handler);
proxy.name; // Output: "Getting property: name"，返回 "John"
proxy.age = 31; // Output: "Setting property: age to 31"

我们创建了一个代理对象 `proxy`，并使用 `handler` 对象定义了 `get` 和 `set` 拦截器，当访问或修改 `proxy` 的属性时，会触发相应的拦截操作，并打印相关消息。