箭头函数能解决异步回调中this丢失问题，因其不绑定自身this而继承外层词法作用域的this；普通函数在回调中因单独调用导致this指向全局或undefined；箭头函数适用于setTimeout、Promise.then等需访问实例的场景，但不可用作构造函数或动态绑定this。
箭头函数能解决异步回调中 this 丢失问题，核心在于它不绑定自己的 this，而是继承外层作用域的 this 值。
为什么普通函数在回调里会丢掉 this
在事件监听、定时器、Promise.then 等异步回调中，普通函数执行时的 this 默认指向全局对象（非严格模式下是 window，严格模式下是 undefined），而不是定义它的对象实例。这是因为回调函数被“单独调用”，失去了原始上下文。
- 比如：
obj.handleClick = function() { console.log(this); }，传给button.addEventListener('click', obj.handleClick)后，点击时this指向button而不是obj - 再如：
setTimeout(obj.method, 100)，method内部的this也会失效
箭头函数如何继承外层 this
箭头函数没有自己的 this、arguments、super 或 new.target，它直接沿用定义时所在词法作用域的 this —— 通常是类或对象方法内部的实例本身。
- 写法示例：
setTimeout(() => { console.log(this.name); }, 100);—— 这里的this就是外层方法所属的实例 - 在类中使用时，无需额外绑定：
class App { constructor() { this.name = 'test'; } start() { setTimeout(() => { console.log(this.name); }, 100); } }
适用场景与注意事项
箭头函数适合用于需要访问当前实例属性/方法的异步回调，但不能替代所有函数场景。
- ✅ 适合：
setTimeout、setInterval、Promise.then/catch、fetch().then、事件回调（需手动绑定到元素）、数组方法如map/filter中访问实例数据 - ❌ 不适合：
Object.prototype方法、需要动态this的事件监听器（如想获取触发事件的 DOM 元素，应改用event.currentTarget或显式传参） - ⚠️ 注意：箭头函数不能用作构造函数，也不能用
call/apply/bind改变其this
对比其他解决方案
除了箭头函数，还有几种常见解法，但各有局限：
-
bind(this)：有效但冗长，每次调用都要绑定 -
var self = this：兼容老环境，但污染变量名，不够现代 - 类字段语法 + 箭头函数（
handleClick = () => {}）：React 中常用，本质仍是利用箭头函数继承this
箭头函数是最简洁、语义最清晰的方案，前提是运行环境支持 ES6（几乎所有现代浏览器和 Node.js 8+ 都支持）。
