JavaScript类方法作为setTimeout回调时无法读取实例字段值问题

问题根本原因 #

JavaScript 中普通函数的this指向是调用时动态绑定的，和函数定义位置无关，只由调用方式决定，不存在定义时自动捕获this的逻辑。

不同调用场景的差异分析 #

• 手动调用hello.runTask()时，runTask是作为hello对象的方法被调用，this会自动指向hello实例，此时实例的task已经完成赋值，所以运行正常。
• 写setTimeout(this.runTask, 0)时，你只是把runTask这个函数本身单独传给了定时器，没有绑定上下文。等到定时器触发执行回调时，是在全局作用域下直接调用该函数，非严格模式下this指向window/globalThis，严格模式下this为undefined，全局环境不存在task属性，所以取到的值是undefined，调用this.task()自然报错。
• 改用setTimeout(() => this.runTask(), 0)正常的原因是：箭头函数没有独立的this，它的this会继承定义时所在外层作用域的this。你在go方法里定义箭头函数时，go的this指向hello实例，所以箭头函数的this就固定绑定了该实例，调用this.runTask()时和手动调用的效果完全一致。

避坑通用规则 #

要避免同类this指向错误，可以记住三个常用方案：

1. 回调包裹箭头函数：就是你已经验证可用的写法，用箭头函数固定外层this
2. 提前绑定this：用bind方法把方法的上下文提前绑定到实例，以下写法也可正常运行：

setTimeout(this.runTask.bind(this), 0);

3. 类方法直接定义为箭头函数属性：如果该方法经常需要作为回调传递，可以直接在类里把方法定义为箭头函数，实例创建时就会自动绑定this到当前实例，后续传递不需要额外处理：

class Hello {
  task = undefined;

  // 直接定义为箭头函数属性
  runTask = () => {
    console.log("Task is", this.task);
    this.task();
  }
  
  // 其他方法...
}

内容的提问来源于stack exchange，提问作者aardvarkk