Reflect.get和target[key]有何不同?

主要区别在this指向不同,下面输出张三还是李四?:

javascript 复制代码
  const person={
      name:'张三',
      get FullName(){
          return this.name;
      },
  };
      
  let personProxy=new Proxy(person,{
      get(target,key){
          return Reflect.get(target,key)//或者return target[key]
      }
  });
  const p1={__proto__:personProxy,name:'李四'}
  console.log(p1.FullName)

答案:张三。

当我们读取p1.FullName时,它自身是没有该属性的,也没有指定该属性的getter,它会找到继承自personProxy中,此时会触发get读取target里面的key,此时的target目标对象为person,key为FullName,如果想指定调用者为p1,可以使用第三个参数receiver

javascript 复制代码
const person={
    name:'张三',
    get FullName(){
        return this.name;
    },
};
    
let personProxy=new Proxy(person,{
    get(target,key,receiver){
        return Reflect.get(target,key,receiver)
    }
});
const p1={__proto__:personProxy,name:'李四'}
console.log(p1.FullName)//李四

更多好玩好玩前端知识,可以搜索【坤坤前端笔记】小程序,让我们换个姿势学前端。

相关推荐
骑着蜗牛撵大象3276 小时前
语音变分录、规则挡幻觉:拆解开源 AI 记账系统 Smart Ledger 的全栈设计
人工智能·ai·架构·js·数据校验
ratel️17 小时前
小墨析 · Office Agent 日常办公不烧心
python·langchain·word·excel·fastapi·js·ppt
FRing032 天前
JavaScript入门到精通二十六(变量提升、函数剩余参数、展开运算符、ES6箭头函数)
开发语言·前端·javascript·es6·箭头函数
落花看风雪2 天前
从零开始搭建后台系统(vue3+TypeScript+Vite)01
typescript·vue·js
এ慕ོ冬℘゜4 天前
es6理论总结
前端·javascript·es6
酷炫码神6 天前
Day 6|ES6+ 语法:把现代 JS 写顺手,从解构到 map / filter / reduce
前端·javascript·es6
逆风优雅8 天前
nestjs middleware 接口请求日志
后端·js
2603_9658966212 天前
JS ES6常用新特性|let/const、解构赋值、展开运算符
前端·javascript·es6
请为小H留灯15 天前
Windows 本地前端项目一键运行指南:Volta+Node+pnpm + 阿里镜像完整初始化流程
前端·pnpm·node·js
এ慕ོ冬℘゜19 天前
es6基础
前端·javascript·es6