题目 16 / 31

把方法传给 setTimeout 之后,this 会发生什么?

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

把 object.method 当作裸函数引用传出去,会让它和原来的接收者对象脱钩。

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

预测输出结果

预测输出。setTimeout 最终调用的这个回调,还记得自己来自 object 吗?

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

正确输出

undefined

为什么会这样

object.logMessage 在这里只是被当作一个值读出——一个指向函数对象的引用——然后交给 setTimeout。接收者对象并不会随这个引用一起被带走。

定时器触发时,setTimeout 会把它当作一次没有接收者的普通调用来执行。非严格模式下,默认绑定接管,this 变成全局对象。

全局对象上没有 message 属性,所以 this.message 读到 undefined。

这道题考察什么

  • 函数值本身不会记住它是从哪个对象上读出来的
  • 默认绑定:非严格模式下,无接收者的调用会把 this 绑定到全局对象
  • 把方法当回调传递,是丢失 this 的常见场景

运行环境前提

假设运行在经典(非模块、非严格模式)的浏览器脚本中,默认绑定解析为 window;严格模式代码下 this 则会保持为 undefined。

规范参考

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

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