深入解析：为什么JavaScript中Proxy必须配合Reflect使用

引言

在EcmaScript 2015标准中，JavaScript引入了Proxy（代理）和Reflect（反射）两个重要的内置对象。

利用Proxy和Reflect，我们可以实现对对象操作的深度拦截与劫持，其功能远超ES5中的Object.defineProperty()，提供了更强大且灵活的元编程能力。

尽管大多数开发者对这两个ES6新增特性已有一定了解，但往往不清楚为何在最佳实践中，Proxy必须与Reflect配合使用。

本文将通过几个直观且易懂的代码示例，详细阐述Proxy与Reflect之间相辅相成的技术关系。

前置知识

• Proxy对象用于定义基本操作的拦截器，可以创建一个对象的代理，从而实现对属性查找、赋值、枚举、函数调用等基本操作的自定义拦截。

• Reflect对象提供了一组与Proxy陷阱名称相同的方法，用于拦截JavaScript的底层操作，如属性获取、设置等。

简而言之，Proxy负责创建代理对象并定义拦截逻辑，而Reflect则用于在代理内部执行原始的JavaScript操作，两者结合可实现对原生行为的精确控制。

如果读者对这两个API尚不熟悉，建议查阅MDN文档以补充相关知识。

值得注意的是，大名鼎鼎的Vue.js/Core框架中的核心响应式模块，正是基于Proxy和Reflect这两个API构建实现的。

单独使用Proxy

首先，我们通过一个简单示例，展示仅使用Proxy时的基本用法：

const obj = {
  name: 'wang.haoyu',
};

const proxy = new Proxy(obj, {
  // get陷阱中target表示原对象 key表示访问的属性名
  get(target, key) {
    console.log('劫持你的数据访问' + key);
    return target[key]
  },
});

proxy.name // 劫持你的数据访问name -> wang.haoyu

代码逻辑看似简单：我们使用Proxy创建了一个基于原始对象obj的代理，并在handler中定义了一个get陷阱。

当访问proxy.name时，会触发对应的get陷阱。陷阱内部执行逻辑后，返回target[key]，即原始对象中对应的值wang.haoyu。

Proxy中的receiver参数

在上述Demo中，功能运行正常。但细心的读者在查阅Proxy的MDN文档时可能会发现，get陷阱实际上接收第三个参数receiver。

这个receiver参数的具体含义是什么？许多开发者误以为它仅仅代表代理对象本身，这种理解是不全面的。

接下来，我们通过一个具体例子来深入分析：

const obj = {
  name: 'wang.haoyu',
};

const proxy = new Proxy(obj, {
  // get陷阱中target表示原对象 key表示访问的属性名
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});

// log: true
proxy.name;

在上面的Proxy实例中，我们在get陷阱中接收了receiver参数。

在陷阱内部打印console.log(receiver === proxy);，结果为true，表明在此特定场景下，receiver确实等于代理对象proxy。

因此，receiver确实可以表示代理对象，但这仅是receiver所代表的一种情况。

接下来，我们看另一个更复杂的例子：

const parent = {
  get value() {
    return '19Qingfeng';
  },
};

const proxy = new Proxy(parent, {
  // get陷阱中target表示原对象 key表示访问的属性名
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
obj.value

关于原型链上get/set属性访问器的“屏蔽”效应，本文暂不展开详细讲解，重点在于receiver的表现。

在上述代码中，我们在proxy对象的get陷阱内打印console.log(receiver === proxy);，结果却为false。

此时，receiver究竟指向哪里？这正是Proxy中get陷阱引入第三个参数receiver的核心意义所在。

请看下方的代码逻辑：

...
const proxy = new Proxy(parent, {
  // get陷阱中target表示原对象 key表示访问的属性名
  get(target, key, receiver) {
-   console.log(receiver === proxy) // log:false
+   console.log(receiver === obj) // log:true
    return target[key];
  },
});
...

简单来说，get陷阱中的receiver参数旨在正确传递调用上下文。

当涉及属性访问时，必须注意get陷阱还会触发对应的属性访问器（即getter方法）。

从上述代码可以清晰看到，此时的receiver代表的是继承自Proxy的对象，即obj本身。

至此我们明白，Proxy中get陷阱的receiver不仅仅代表代理对象本身，还可能代表继承自代理对象的原始对象。

本质上，receiver的存在是为了确保陷阱函数中调用者上下文的正确性，例如在本例中，receiver指向obj。

注意，不要将receiver与get陷阱中的this关键字混淆。陷阱中的this关键字始终指向代理的handler对象。

例如：

const parent = {
  get value() {
    return '19Qingfeng';
  },
};

const handler = {
  get(target, key, receiver) {
    console.log(this === handler); // log: true
    console.log(receiver === obj); // log: true
    return target[key];
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
obj.value

Reflect中的receiver机制

在明确了Proxy中get陷阱的receiver含义后，我们进一步探讨Reflect API中get陷阱的receiver作用。

我们知道，在Proxy中（以get陷阱为例），第三个参数receiver代表触发陷阱时的正确上下文，可能是代理对象本身，也可能是继承自代理对象的对象。

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
    return Reflect.get(target, key);
    // 这里相当于 return target[key]
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
console.log(obj.value);

我们稍作分析上述代码：

• 当我们调用obj.value时，由于obj自身不存在value属性。

• 其继承的proxy对象中存在value的属性访问操作符，从而触发了屏蔽效果。

• 此时，会触发proxy上的get value()属性访问操作。

• 同时，由于访问了proxy上的value属性访问器，进而触发了Proxy的get陷阱。

• 进入陷阱时，target为源对象parent，key为value。

• 陷阱中返回Reflect.get(target,key)，这在语义上相当于target[key]。

• 此时，一个隐蔽的问题出现了：get陷阱中的this指向被悄悄修改了！

• 原本调用方的obj，在陷阱执行中被修改为了对应的target，即parent。

• 因此，自然打印出了对应的parent[value]，即“19Qingfeng”。

这显然不符合预期。当我们访问obj.value时，期望输出的是obj自身上的name属性，即“wang.haoyu”。

此时，Reflect中get陷阱的receiver参数便发挥了关键作用。

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
-   return Reflect.get(target, key);
+   return Reflect.get(target, key, receiver);
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: wang.haoyu
console.log(obj.value);

上述代码的原理其实非常直观：

• 首先，如前所述，Proxy中get陷阱的receiver不仅表示代理对象本身，还可能表示继承自代理对象的对象，具体取决于调用方。在本例中，它指向继承自代理对象的obj。

• 其次，我们在Reflect的get陷阱中传递了Proxy中的receiver（即obj）作为第三个参数，这会修正调用时的this指向。

你可以简单地将Reflect.get(target, key, receiver)理解为target[key].call(receiver)。虽然这是伪代码，但有助于理解其机制。

相信至此读者已明白Reflect中receiver的含义：它能够修改属性访问中的this指向，使其指向传入的receiver对象。

总结

相信通过上述分析，读者已清楚为何Proxy必须配合Reflect使用：其核心在于确保触发代理对象劫持时，能保持正确的this上下文指向。

回顾get陷阱（set及其他涉及receiver的陷阱同理）：

• Proxy中接收的Receiver形参，表示代理对象本身或继承自代理对象的对象。

• Reflect中传递的Receiver实参，用于修改执行原始操作时的this指向。

结尾

文章至此结束。为何突然提及Proxy与Reflect的话题？

这源于笔者近期在阅读Vue/Core.js源代码，发现其内部大量应用了Proxy与Reflect，从而引发了本文的探讨。

关于Proxy为何必须配合Reflect使用，若结合Vue.js响应式模块中的依赖收集机制，理解会更加透彻。为照顾不熟悉Vue.js的读者，此处未作展开。

此外，笔者在阅读Vue.js过程中也尝试撰写阶段性总结文章，后续将详细讲解这一过程，有兴趣的同学可关注最新动态。

到此，关于“JS中为什么Proxy一定要配合Reflect使用”的文章介绍完毕。更多相关JS Proxy与Reflect内容，请搜索本站往期文章或继续浏览相关文章，希望大家多多支持本站！