如何用箭头函数解决传统函数中 this 丢失的常见报错-js教程-PHP中文网

箭头函数能避免 this 丢失，因其不绑定自身 this 而沿用外层作用域的 this 值，适用于 settimeout、addeventlistener、数组方法回调及 react 事件处理器等需保持外层 this 的场景，但不可作为构造函数、无 arguments、无法用 call/apply/bind 修改 this，且 vue options api 的 methods 中禁用。

如何用箭头函数解决传统函数中 this 丢失的常见报错

箭头函数为什么能避免 `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);
  }
}

修复方式有三种，但只有前两种真正解决问题：