使用 Proxy 和 Reflect 拦截器实现自定义对象逻辑

在 JavaScript 编程中，拦截器（Interceptor）是一种常见的设计模式，它可以在程序执行过程中拦截方法的调用，并且可以在方法调用前后执行一些自定义的逻辑。在 ES6 中，我们可以使用 Proxy 和 Reflect 对象来实现拦截器的功能。

Proxy 是 ES6 中新增的一个特性，它可以拦截对对象的访问和操作，包括读取属性、设置属性、调用方法等。Proxy 的语法如下：

const proxy = new Proxy(target, handler);

其中，target 是要代理的对象，handler 是一个拦截器对象，它可以包含一些方法来拦截对象的访问和操作。下面是一个使用 Proxy 拦截对象属性读取的例子：

const obj = {
  name: 'Alice',
  age: 18,
};

const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`读取属性 ${prop}`);
    return target[prop];
  },
});

console.log(proxy.name); // 读取属性 name，输出 Alice
console.log(proxy.age); // 读取属性 age，输出 18

在上面的例子中，我们使用 Proxy 对象来代理一个普通的对象，并且使用 get 方法来拦截对象属性的读取操作。当我们读取代理对象的属性时，会先执行 get 方法中的自定义逻辑，然后再返回属性的值。

除了属性读取，我们还可以使用 Proxy 拦截对象属性的设置、删除、枚举等操作。下面是一个使用 Proxy 拦截对象属性设置的例子：

const obj = {
  name: 'Alice',
  age: 18,
};

const proxy = new Proxy(obj, {
  set(target, prop, value) {
    console.log(`设置属性 ${prop} 的值为 ${value}`);
    target[prop] = value;
  },
});

proxy.name = 'Bob'; // 设置属性 name 的值为 Bob
proxy.age = 20; // 设置属性 age 的值为 20

在上面的例子中，我们使用 set 方法来拦截对象属性的设置操作。当我们设置代理对象的属性时，会先执行 set 方法中的自定义逻辑，然后再将属性的值设置为指定的值。

除了 Proxy，ES6 还引入了 Reflect 对象，它可以用来执行一些默认的操作，并且可以在操作前后执行一些自定义的逻辑。Reflect 对象的方法与 Proxy 的方法一一对应，可以用来替代一些原有的操作。下面是一个使用 Reflect 拦截对象属性读取的例子：

const obj = {
  name: 'Alice',
  age: 18,
};

const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    console.log(`读取属性 ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
});

console.log(proxy.name); // 读取属性 name，输出 Alice
console.log(proxy.age); // 读取属性 age，输出 18

在上面的例子中，我们使用 Reflect.get 方法来拦截对象属性的读取操作，并且在读取前先执行自定义逻辑。与 Proxy 不同的是，Reflect.get 方法需要传入三个参数，分别是目标对象、属性名和接收器对象。

除了属性读取，Reflect 对象还可以用来拦截属性的设置、删除、枚举等操作。下面是一个使用 Reflect 拦截对象属性设置的例子：

const obj = {
  name: 'Alice',
  age: 18,
};

const proxy = new Proxy(obj, {
  set(target, prop, value, receiver) {
    console.log(`设置属性 ${prop} 的值为 ${value}`);
    return Reflect.set(target, prop, value, receiver);
  },
});

proxy.name = 'Bob'; // 设置属性 name 的值为 Bob
proxy.age = 20; // 设置属性 age 的值为 20

在上面的例子中，我们使用 Reflect.set 方法来拦截对象属性的设置操作。与 Proxy.set 方法不同的是，Reflect.set 方法需要返回一个布尔值，表示属性是否设置成功。

总的来说，使用 Proxy 和 Reflect 对象可以帮助我们更方便地拦截对象的访问和操作，从而实现一些自定义的逻辑。在实际开发中，我们可以使用 Proxy 和 Reflect 对象来实现一些高级的功能，比如数据绑定、事件监听等。