为什么 Proxy 一定要配合 Reflect 使用？

海盗船长。

已于 2022-08-19 08:27:36 修改

阅读量1.1k

点赞数 5

分类专栏： JavaScript 文章标签： es6 javascript 前端 vue html

于 2022-08-10 20:30:00 首次发布

本文链接：https://blog.csdn.net/qq_45828551/article/details/126251545

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

EcmaScript 2015 中引入了 Proxy 和 Reflect 两个新的内置模块。

大家可能或多或少都了解过 Proxy 和 Reflect，因为vue3就是使用 Proxy 和 Reflect 实现响应式的，但是大家可能不清楚为什么 Proxy 一定要配合 Reflcet 使用。下面举几个例子来描述一下他们之间的关系。

前置知识

Proxy： 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。

它不直接操作对象，而是代理模式，通过代理对象进行操作，然后在进行操作的同时，可以添加一些额外操作。

Reflect：它提供拦截 JavaScript 操作的方法。这些方法与 Proxy 的方法相同。

简单来说，我们可以通过 Proxy 创建代理对象，从而在代理对象中使用 Reflect 达到对于 JavaScript 原始操作的拦截。如果你还不了解，赶紧点击此链接去补习吧。

单独使用 Proxy

请看下面代码：

let cat = {
  name: "Tom",
  age: 2,
};
let proxy = new Proxy(cat, {
  get(target, key, receiver) {
    console.log("正在读取 %s 属性", key);
    return target[key];
  },
});
proxy.name; // 正在读取 name 属性
proxy.age; // 正在读取 age 属性

我们通过 Proxy 创建了一个基于 target 对象的代理对象，同时声明了一个 get 方法，我们访问 proxy.name 时实际触发了 get 方法，最后返回 target[key]，也就是 "Tom"。

Proxy 中的 receiver

细心的同学可能已经发现上面代码中 get 方法中的 receiver 参数没有使用，那么这个参数究竟代表什么意思呢？大家可能会把他理解成代理对象的实例。

现在请看下面代码：

let target = {
  name: "Tom",
};
let proxy = new Proxy(target, {
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});
proxy.name; // true

上面代码中，我们在 get 方法中打印了 receiver 严格等于 proxy。控制台输出 true。表示这里的 receiver 的确是和代理对象 proxy 是相等的。

所以 receiver 是可以表示代理对象的实例，但是这仅仅是 receiver 代表的一种情况而已。

请看下面代码：

let parent = {
  get value() {
    return "parent";
  },
};

let proxy = new Proxy(parent, {
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});

let child = { name: "Jerry" };
// 设置 child 继承 代理对象 proxy
Object.setPrototypeOf(child, proxy);

child.value; // false

上面代码同样在 get 方法中打印了 receiver 严格等于 proxy，控制台输出结果却是 false。

这究竟是为什么呢？其实这就是 receiver 存在的意义。

他是为了传递正确的调用者指向，请看下面代码：

let parent = {
  get value() {
    return "parent";
  },
};

let proxy = new Proxy(parent, {
  get(target, key, receiver) {
    console.log(receiver === proxy);
    console.log(receiver === child);
    return target[key];
  },
});

let child = { name: "Jerry" };
// 设置 child 继承 代理对象 proxy
Object.setPrototypeOf(child, proxy);

child.value; // false  true

上面代码，get 方法中多打印了一个 receiver 严格等于 child，控制台打印一次为 fasle 、 true。

我们可以清楚的看到 receiver 代表的是继承了代理对象 proxy 的 child。

到这里，我们明白了 Proxy 中 get 方法的 receiver 参数不仅仅代表 Proxy 的实例，某种情况下，他也会代表继承 Proxy 的那个对象。

Reflect 中的 receiver

我们了解了 Proxy 中的 receiver 参数，代表的是 Proxy 实例或者继承 proxy 的那个对象。

请看代码：

let parent = {
  name: "Tom",
  get value() {
    return this.name;
  },
};

let proxy = new Proxy(parent, {
  get(target, key, receiver) {
    return Reflect.get(target, key);
  },
});

let child = { name: "小Tom" };
// 设置 child 继承 代理对象 proxy
Object.setPrototypeOf(child, proxy);

console.log(child.value);

打印 child.value 控制台输出的是 "Tom"。

我们分析下上面代码。

当我们调用 child.value 的时候，child 本身并不存在 value 属性。

但是它继承的 proxy 对象中存在 value 属性的访问方法。

所以触发 proxy 上的 get value()，同时由于访问了 proxy 上的 value属性，所以触发 proxy 的 get 方法。

get 方法的 target 参数就是 parent，key 参数就是 value。

然后方法中 return Reflect.get(target, key) 相当于 target[key]。

此时，我们访问的 child 对象的 value 属性，return 的却是 parent 的 value 属性。

不知不觉中 this 指向在 get 方法中被偷偷修改了，原本调用的 child 在 get 方法中变成了 parent。

所以打印出来的是 parent[value]，也就是 "Tom"。

这显然不是我们期望的结果，当我们访问 child.value 时，我们希望输出 child 对象的 name 属性，也就是 "小Tom"。

那么，Reflect 中 get 方法的 receiver 参数该上场了。

let parent = {
  name: "Tom",
  get value() {
    return this.name;
  },
};

let proxy = new Proxy(parent, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
});

let child = { name: "小Tom" };
// 设置 child 继承 代理对象 proxy
Object.setPrototypeOf(child, proxy);

console.log(child.value); // 小Tom