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)//李四

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

相关推荐
大貔貅喝啤酒3 天前
Gitea+Jenkins+Docker 搭建 Node 项目 CI/CD 自动部署完整教程
ci/cd·docker·jenkins·js·gitea
我命由我1234512 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
COOLMO研究AI16 天前
Next.js App Router 中 sitemap、robots 与 canonical 的配置与排查
前端·web·js·网站优化
海天鹰22 天前
在线GPX编辑器gpx.studio
js
yume_sibai23 天前
ES6 核心知识点完全总结(变量 + 箭头函数 + 解构 + Promise + 模块化)
前端·ecmascript·es6
尾善爱看海23 天前
前端面试算法手撕全解(高频真题+标准答案)
算法·js
晴天161 个月前
ES6+ 核心语法
前端·es6·状态模式
变与不变8061 个月前
JS作用域,作用域链
前端·javascript·es6
sunphp开发者1 个月前
明灯智慧地图导览系统制作教程
vue·php·uniapp·js·贴图
我命由我123451 个月前
JS Mock(Mock 拦截请求的前提、Mock 使用、关闭 Mock)
开发语言·前端·javascript·前端框架·html·html5·js