题目 15 / 31

同名的局部变量会遮蔽 this.message 吗?

知识点: this 绑定难度: 基础

局部变量和通过 this 读取的属性,本来就活在两个完全不同的命名空间里。

使用执行可视化器解题在下方逐步观察每个绑定、函数调用和控制台输出。

预测输出结果

预测输出。方法内部声明了局部变量 message —— return this.message 读到的是它,还是对象的属性?

const object = {
  message: 'Hello, World!',
  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }
};
console.log(object.getMessage());
查看答案与完整解析

正确输出

Hello, World!

为什么会这样

getMessage 内部声明了局部常量 message,但这个绑定只对裸标识符 message 生效,不会影响 this.message。

this.message 是一次属性访问:先把 this 解析为调用它的接收者对象,再去这个对象上查找 message 属性,完全绕开了同名的局部变量。

object.getMessage() 是一次方法调用,this 被隐式绑定到 object,所以 this.message 读到的是对象自身的 message 属性,打印 "Hello, World!"。

这道题考察什么

  • this.x 是属性查找,不是标识符查找
  • 局部变量永远不会遮蔽属性访问
  • 隐式绑定:方法调用会把 this 绑定到接收者对象

运行环境前提

这个区别在任何 JavaScript 环境中都成立——属性访问和变量解析始终是两套独立的机制。

规范参考

JavaScript 代码编辑器支持直接编辑或粘贴自定义代码
第 0 步 / 共 0 步
单步Space播放
按 → 单步 或 Space 自动播放
阶段 1: 编译预解析(变量提升与内存分配)
阶段 2: 代码执行(逐行赋值与调用求值)
单步执行原理解析

按键盘右方向键 “→” 进行单步调试,或按空格键 “Space” / 点击 “▶ 自动播放” 进行连续执行。