探究 JavaScript 中 Proxy Reflect 中的 receiver 参数

Proxy 和 Reflect 是 ES6 引入的两个新的特性，它们可以用来拦截、代理和反射 JavaScript 对象的默认行为。在 Proxy 中，我们可以使用 receiver 参数来控制对代理对象的方法或属性的访问。本文将介绍 Proxy 和 Reflect 中的 receiver 参数，并通过实例来说明它们的用法。

在 Proxy 中，receiver 参数指代一个可选对象，用于指定 handler 对象内部调用时 this 关键字的指向。例如，当我们对一个对象进行 Proxy 操作时，如果该对象拥有一个方法，那么该方法中的 this 指向原对象而非代理对象。如果我们希望 this 指向代理对象而非原对象，就可以使用 receiver 参数。

下面是一个使用 receiver 参数的例子：

const obj = {
  foo() {
    console.log(this);
  },
};

const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    const value = Reflect.get(target, prop, receiver);
    if (typeof value === 'function') {
      return function (...args) {
        console.log('Before calling function');
        const result = value.apply(this, args);
        console.log('After calling function');
        return result;
      };
    }
    return value;
  },
});

proxy.foo(); // 输出代理对象而非原对象

在上面的例子中，我们使用了 Proxy 对象对一个对象进行了代理，并重写了该对象中的方法。通过使用 receiver 参数，我们将方法中的 this 指向了代理对象而非原对象，从而达到了我们的目的。

在 Reflect 中，receiver 参数是用于调用 Reflect 方法时传递额外参数的。例如，Reflect.set() 方法可以接收三个参数：目标对象、属性名和属性值。当我们需要在调用 Reflect.set() 方法时传递额外的参数时，就可以使用 receiver 参数。

下面是一个使用 receiver 参数的例子：

const obj = {
  foo: 'bar',
};

const proxy = new Proxy(obj, {
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  },
});

const receiverObj = {
  receiverProp: 'receiverValue',
};

proxy.foo = 'baz'; // 输出设置日志

Reflect.set(proxy, 'newProp', 'newValue', receiverObj); // 输出设置日志，并传递了额外的参数

在上面的例子中，我们使用了 Reflect.set() 方法设置了代理对象中的新属性，并传递了一个额外的参数 receiverObj 作为 receiver 参数。在 set() 方法中，我们将 receiver 参数传递给了 Reflect.set() 方法，从而可以在调用该方法时访问 receiver 参数中的属性。

总的来说，receiver 参数是 Proxy 和 Reflect 两个新特性中用于控制代理对象行为的一个参数。在 Proxy 中，我们可以使用 receiver 参数来指定方法中的 this 指向代理对象而非原对象；在 Reflect 中，我们可以使用 receiver 参数来传递额外参数。使用 receiver 参数可以帮助我们更好地控制对象的行为，如果我们需要在对代理对象进行操作时对其行为进行更加精细的控制，就可以使用 receiver 参数来实现。同时，由于 receiver 参数提供了更多的控制方式，也使得我们可以更好地实现代码的复用和封装。

需要注意的是，在使用 receiver 参数时，我们需要特别小心，以免出现不可预期的行为。因此，在使用 receiver 参数时，建议对其进行充分测试，以确保其能够正确地满足我们的需求。

除了 receiver 参数之外，Proxy 和 Reflect 还提供了许多其他有用的特性，例如 trap 方法、拦截器、捕获器等等，可以用于实现更加复杂和精细的对象操作。如果您想深入了解 Proxy 和 Reflect 的更多特性和用法，可以关注我呦。