箭头函数能避免 this 丢失，因其不绑定自身 this 而沿用外层作用域的 this 值，适用于 setTimeout、addEventListener、数组方法回调及 React 事件处理器等需保持外层 this 的场景，但不可作为构造函数、无 arguments、无法用 call/apply/bind 修改 this，且 Vue options API 的 methods 中禁用。
箭头函数为什么能避免 this 丢失
传统函数（function）的 this 是运行时动态绑定的，谁调用就指向谁；而箭头函数不绑定自己的 this，它直接沿用外层作用域的 this 值——这个特性让它天然适合替代那些被剥离上下文的回调场景。
典型出错场景：把对象方法传给 setTimeout、addEventListener、数组方法（如 map）、或作为参数传入其他函数时，this 指向 window（非严格模式）或 undefined（严格模式），导致访问 this.xxx 报 Cannot read property 'xxx' of undefined。
哪些地方必须用箭头函数替换传统函数
不是所有函数都该换，只在「需要保持外层 this 指向」且「不依赖自身 this 绑定」时才适用。以下情况建议立刻改：
-
setTimeout/setInterval中调用对象方法：setTimeout(() => this.handleClick(), 100)，而非setTimeout(this.handleClick, 100) -
addEventListener回调：btn.addEventListener('click', () => this.handleBtnClick())，避免this指向btn - 数组遍历中访问实例属性：
list.map(item => this.formatItem(item))，而不是list.map(function(item) { return this.formatItem(item); }) - React 类组件中定义事件处理器（不需
bind(this)）：onClick={() => this.setState({ x: 1 })}
箭头函数不能用的几个关键限制
它省略了 this 绑定，但也因此失去了一些能力——误用反而引发新问题：
- 不能作为构造函数：
const A = () => {}，调用new A()会报TypeError: A is not a constructor - 没有
arguments对象，需用剩余参数：const fn = (...args) => args[0]，不能写arguments[0] - 无法通过
call/apply/bind改变this—— 它们对箭头函数完全无效 - Vue 选项式 API 的
methods或computed里不能用箭头函数，因为 Vue 需要绑定this到组件实例，而箭头函数会捕获外层（通常是window）的this
对比示例：错误写法 vs 正确修复
假设有一个计数器类：
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
}
start() {
// ❌ 错误：this.increment 被单独取出，this 指向丢失
setInterval(this.increment, 1000);
}
}
修复方式有三种，但只有前两种真正解决问题：
- ✅ 箭头函数封装：
setInterval(() => this.increment(), 1000) - ✅
bind显式绑定：setInterval(this.increment.bind(this), 1000) - ❌ 单独提取方法再调用：
const inc = this.increment; setInterval(inc, 1000)—— 依然丢失this
注意：如果 increment 内部还依赖 event 或其他参数，箭头函数里要手动透传，比如 el.addEventListener('click', (e) => this.handleClick(e))。
最常被忽略的一点是：箭头函数解决的是「调用时 this 不受控」的问题，但它不解决「函数本身需被多次复用且每次 this 不同」的场景——那种情况，还是得用 bind 或普通函数 + 显式传参。
