文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js中Proxy一定要配合Reflect使用的原因是什么

2023-06-29 19:33

关注

这篇文章主要介绍“js中Proxy一定要配合Reflect使用的原因是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js中Proxy一定要配合Reflect使用的原因是什么”文章能帮助大家解决问题。

前置知识

简单来说,我们可以通过 Proxy 创建对于原始对象的代理对象,从而在代理对象中使用 Reflect 达到对于 JavaScript 原始操作的拦截。

如果你还不了解 & ,那么赶快去 MDN 上去补习他们的知识吧。

毕竟大名鼎鼎的 VueJs/Core 中核心的响应式模块就是基于这两个 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 对象的代理,同时在 Proxy 中声明了一个 get 陷阱。

当访问我们访问 proxy.name 时实际触发了对应的 get 陷阱,它会执行 get 陷阱中的逻辑,同时会执行对应陷阱中的逻辑,最终返回对应的 target[key] 也就是所谓的 wang.haoyu .

Proxy 中的 receiver

上边的 Demo 中一切都看起来顺风顺水没错吧,细心的同学在阅读 Proxy 的 MDN 文档上可能会发现其实 Proxy 中 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: trueproxy.name;

上述的例子中,我们在 Proxy 实例对象的 get 陷阱上接收了 receiver 这个参数。

同时,我们在陷阱内部打印 console.log(receiver === proxy); 它会打印出 true ,表示这里 receiver 的确是和代理对象相等的。

所以 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的代理对象proxyObject.setPrototypeOf(obj, proxy);// log: falseobj.value

关于原型上出现的 get/set 属性访问器的“屏蔽”效果,我在这篇文章中进行了详细阐述。这里我就不展开讲解了。

我们可以看到,上述的代码同样我在 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 陷阱还会触发对应的属性访问器,也就是所谓的 get 访问器方法。

我们可以清楚的看到上述的 receiver 代表的是继承与 Proxy 的对象,也就是 obj。

看到这里,我们明白了 Proxy 中 get 陷阱的 receiver 不仅仅代表的是 Proxy 代理对象本身,同时也许他会代表继承 Proxy 的那个对象。

其实本质上来说它还是为了确保陷阱函数中调用者的正确的上下文访问,比如这里的 receiver 指向的是 obj 。

当然,你不要将 revceiver 和 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的代理对象proxyObject.setPrototypeOf(obj, proxy);// log: falseobj.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的代理对象proxyObject.setPrototypeOf(obj, proxy);// log: falseconsole.log(obj.value);

我们稍微分析下上边的代码:

这显然不是我们期望的结果,当我访问 obj.value 时,我希望应该正确输出对应的自身上的 name 属性也就是所谓的 obj.value => wang.haoyu 。

那么,Relfect 中 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的代理对象proxyObject.setPrototypeOf(obj, proxy);// log: wang.haoyuconsole.log(obj.value);

上述代码原理其实非常简单:

你可以简单的将 Reflect.get(target, key, receiver) 理解成为 target[key].call(receiver),不过这是一段伪代码,但是这样你可能更好理解。

相信看到这里你已经明白 Relfect 中的 receiver 代表的含义是什么了,没错它正是可以修改属性访问中的 this 指向为传入的 receiver 对象。

js中Proxy一定要配合Reflect使用的原因是什么

关于“js中Proxy一定要配合Reflect使用的原因是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯