箭头函数在 setTimeout 中能自然保留外层 this，根本原因是它不绑定自己的 this，而是继承外层函数作用域的 this 值；传统函数因被全局环境间接调用导致 this 丢失，而箭头函数词法绑定外层 this，故可正确访问 obj 属性。
箭头函数在 setTimeout 中能自然保留外层作用域的 this，根本原因是它**不绑定自己的 this，而是继承外层函数作用域的 this 值**。这正好绕开了传统匿名函数在 setTimeout 中因调用方式改变导致的 this 丢失问题。
为什么传统函数在 setTimeout 中会丢失 this
在 setTimeout 中直接传入普通函数（如 setTimeout(callback, 1000)），该回调函数是被「间接调用」的——由浏览器全局环境（或严格模式下的 undefined）调用，而非原对象调用，因此函数内部的 this 不再指向定义时的对象，而是退化为全局对象（非严格模式）或 undefined（严格模式）。
例如：
（常见错误写法）const obj = {
name: 'Alice',
sayHi() {
setTimeout(function() {
console.log(this.name); // ❌ this 指向 window 或 undefined，输出 undefined
}, 100);
}
};
obj.sayHi();
箭头函数如何解决 this 丢失
箭头函数没有自己的 this，它的 this 在定义时就确定（词法绑定），始终等于外层普通函数执行时的 this。只要外层函数的 this 是正确的（比如方法调用 obj.sayHi()），箭头函数就能安全访问 obj 上的属性和方法。
立即学习“Java免费学习笔记（深入）”；
- 把
setTimeout的回调写成箭头函数，它自动捕获外层sayHi方法中的this - 无需
.bind(this)、self = this或额外闭包 - 代码更简洁，语义更清晰
正确写法：
const obj = {
name: 'Alice',
sayHi() {
setTimeout(() => {
console.log(this.name); // ✅ 输出 'Alice'
}, 100);
}
};
obj.sayHi();
注意事项和适用边界
箭头函数不是万能解药，需注意以下几点：
-
不能用作构造函数：箭头函数没有
prototype，也不能用new调用 -
没有
arguments对象：需用剩余参数...args替代 -
不能改写
this绑定：无法用.call()、.apply()、.bind()修改其this -
外层必须有有效的
this绑定：如果箭头函数直接写在全局作用域，它的this就是全局对象（或undefined），依然可能出错
替代方案对比（供参考）
除了箭头函数，还有几种传统方式也能解决 this 丢失，但各有代价：
-
function.bind(this)：显式绑定，稍冗长但语义明确 -
const self = this+ 普通函数：兼容性好，但多一层变量和作用域嵌套 - 将回调封装为类方法并用
bind预绑定：适合复用场景，但需提前处理
箭头函数在绝大多数事件回调、定时器、Promise 处理等异步场景中，是最轻量、最直观的选择。
