let obj = { foo: 1 };为什么Reflect.get(obj, ‘foo‘, { foo: 2 }); // 输出 1?

理解 JavaScript 的 Reflect.get() 方法及其 receiver 参数

结论:receiver 不会影响属性的查找过程。,receiver只会影响this的绑定

Reflect.get() 是 JavaScript 中一个强大的反射 API,它允许我们以编程方式获取对象的属性值。虽然看起来简单,但它的第三个参数 receiver 却有一些容易被忽略的细节。

基本用法

Reflect.get() 的基本语法是:

javascript 复制代码
Reflect.get(target, propertyKey[, receiver])

最简单的用法是获取对象的属性值:

javascript 复制代码
const obj = { foo: 1 };
console.log(Reflect.get(obj, 'foo')); // 输出 1

receiver 参数的误区

很多开发者(包括我自己最初)会认为 receiver 参数可以覆盖属性值:

javascript 复制代码
const obj = { foo: 1 };
console.log(Reflect.get(obj, 'foo', { foo: 2 })); // 输出 1,不是 2!

为什么不是 2?​

因为对于普通的数据属性,receiver 不会影响属性的查找过程。Reflect.get() 会直接从 target 对象上查找属性。

receiver 的真正作用

receiver 参数主要影响 getter 函数中的 this 绑定:

javascript 复制代码
const obj = {
  get foo() {
    return this.bar;
  },
  bar: 1
};

const receiver = { bar: 2 };

console.log(Reflect.get(obj, 'foo'));       // 输出 1 (this 指向 obj)
console.log(Reflect.get(obj, 'foo', receiver)); // 输出 2 (this 指向 receiver)

在这个例子中,receiver 改变了 getter 函数执行时的 this 值,因此返回了不同的结果。

实际应用场景

  1. 代理 getter 函数​:

    javascript 复制代码
    const obj = {
      get name() {
        return this._name.toUpperCase();
      }
    };
    
    const proxy = new Proxy(obj, {
      get(target, prop, receiver) {
        console.log(`Getting ${prop}`);
        return Reflect.get(target, prop, receiver);
      }
    });
    
    const child = { _name: 'Alice' };
    Object.setPrototypeOf(child, proxy);
    
    console.log(child.name); 
    // 输出: "Getting name" 然后 "ALICE"
  2. 继承场景​:

    javascript 复制代码
    class Parent {
      get greeting() {
        return `Hello, ${this.name}`;
      }
    }
    
    class Child extends Parent {
      constructor(name) {
        super();
        this.name = name;
      }
    }
    
    const child = new Child('Bob');
    console.log(Reflect.get(Parent.prototype, 'greeting', child)); // "Hello, Bob"

总结

  • 对于普通属性,receiver 不会影响属性查找结果
  • 对于 getter 函数,receiver 决定了函数中 this 的值
  • 在代理和继承场景中,正确使用 receiver 可以保持 this 绑定的正确性

理解 Reflect.get()receiver 参数有助于我们更好地使用 JavaScript 的反射 API 和代理功能,写出更健壮的代码。

相关推荐
子兮曰2 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
冷雨夜中漫步3 小时前
Python快速入门(6)——for/if/while语句
开发语言·经验分享·笔记·python
百锦再3 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
百锦再3 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
颜酱4 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
m0_736919105 小时前
C++代码风格检查工具
开发语言·c++·算法
2501_944934735 小时前
高职大数据技术专业,CDA和Python认证优先考哪个?
大数据·开发语言·python
小迷糊的学习记录5 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜5 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
黎雁·泠崖5 小时前
【魔法森林冒险】5/14 Allen类(三):任务进度与状态管理
java·开发语言