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 和代理功能,写出更健壮的代码。

相关推荐
MY_TEUCK2 小时前
【Java 后端】SpringBoot 登录认证与会话跟踪实战(JWT + Filter/Interceptor)
java·开发语言·spring boot
镜宇秋霖丶2 小时前
2026.5.6@霖宇博客制作中遇见的问题
前端·javascript·vue.js
QQ2422199792 小时前
基于python+微信小程序的家教管理系统_mh3j9
开发语言·python·微信小程序
沐知全栈开发3 小时前
JavaScript 条件语句
开发语言
RSTJ_16253 小时前
PYTHON+AI LLM DAY THREETY-SEVEN
开发语言·人工智能·python
吴声子夜歌3 小时前
Vue3——TypeScript基础
javascript·typescript
清水白石0083 小时前
《Python性能深潜:从对象分配开销到“小对象风暴”的破解之道(含实战与最佳实践)》
开发语言·python
Je1lyfish3 小时前
CMU15-445 (2025 Fall/2026 Spring) Project#3 - QueryExecution
linux·c语言·开发语言·数据结构·数据库·c++·算法
小李子呢02113 小时前
前端八股Vue---Vue-router路由管理器
前端·javascript·vue.js
Brilliantwxx4 小时前
【C++】 vector(代码实现+坑点讲解)
开发语言·c++·笔记·算法