在 settimeout 中使用箭头函数可以保持 this，因为箭头函数没有自己的 this，它会捕获定义时所在作用域的 this。只需将回调函数改为箭头函数形式即可。
普通函数与箭头函数的 this 区别是什么
普通函数作为 setTimeout 的回调时，其 this 指向全局对象（浏览器中为 window），而箭头函数则继承外层作用域。这种差异导致在类或对象方法中使用时行为不同。
class Counter {
constructor() {
this.count = 0;
}
// 使用普通函数
incrementRegular() {
setTimeout(function() {
console.log(this); // window
this.count++; // 报错：this.count is undefined
}, 1000);
}
// 使用箭头函数
incrementArrow() {
setTimeout(() => {
console.log(this); // Counter 实例
this.count++; // 正常工作
}, 1000);
}
}
const counter = new Counter();
counter.incrementArrow();
运行上述代码后，incrementArrow 能正确访问 this.count，而 incrementRegular 会因 this 指向错误而失败。
如何在不改变 this 的情况下处理回调
除了使用箭头函数，还可以通过 bind 方法显式绑定 this，或者保存 this 引用到变量中。这些方法都能确保回调函数中 this 的正确性。
class Counter {
constructor() {
this.count = 0;
}
// 使用 bind
incrementBind() {
setTimeout(function() {
console.log(this); // Counter 实例
this.count++;
}.bind(this), 1000);
}
// 保存 this 引用
incrementSaveThis() {
const self = this;
setTimeout(function() {
console.log(self); // Counter 实例
self.count++;
}, 1000);
}
}
const counter = new Counter();
counter.incrementBind();
counter.incrementSaveThis();
以上两种方法同样能正确更新 count 属性，且不会引发 this 指向错误。
当 setTimeout 回调中 this 为 undefined 时会发生什么
如果在严格模式下使用普通函数作为 setTimeout 的回调，this 将为 undefined，尝试访问其属性会抛出 TypeError。这是 JavaScript 严格模式的特性，旨在防止意外的全局变量污染。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
