如何在setTimeout中调用对象方法且不丢失this绑定

该问题的本质是setTimeout接收函数引用作为参数时，函数会被作为普通函数调用，非严格模式下this指向全局window对象导致属性读取失败。以下是几种常用的修复方案：

• 使用bind方法显式绑定this
  Function.prototype.bind()会创建一个新的绑定函数，执行时this永久指向传入的第一个参数。
  代码示例：

// 将greet方法的this永久绑定到bob对象
setTimeout(bob.greet.bind(bob), 500); 
// 输出：Hi, I'm Bob

• 使用箭头函数包装调用
  箭头函数没有自身的this绑定，内部this继承自外层作用域，同时直接通过对象调用greet方法，也能保证this指向正确。
  代码示例：

setTimeout(() => bob.greet(), 500);
// 输出：Hi, I'm Bob

• 使用普通匿名函数包装调用
  和箭头函数逻辑类似，在匿名函数内部主动通过bob对象调用greet方法，触发隐式绑定规则让this指向bob。
  代码示例：

setTimeout(function() {
  bob.greet();
}, 500);
// 输出：Hi, I'm Bob

补充注意：如果后续代码会修改bob变量的指向，bind方案会绑定初始的bob对象，不受后续变量修改影响；而包装函数的方案会读取修改后的bob变量值，可根据业务场景选择合适的方案。

内容的提问来源于stack exchange，提问作者Bobby Wan-Kenobi