箭头函数不创建自己的this，而是捕获外层非箭头函数执行时的this值，因此能简化回调中this绑定问题；但不可用于需动态this的场景（如DOM事件处理器），且无arguments、不能new。
箭头函数不会创建自己的 this，而是沿作用域链向上捕获父级执行上下文的 this 值——这正是它能简化回调中 this 绑定问题的根本原因。
为什么普通函数在回调里容易丢失 this
事件监听、setTimeout、数组方法（如 map、filter）的回调默认以全局对象或 undefined（严格模式）作为 this，导致访问实例属性时报 TypeError: Cannot read property 'xxx' of undefined。
常见补救写法包括：.bind(this)、const self = this、function() {}.bind(this)——都冗余且割裂语义。
箭头函数怎么自动继承 this
只要箭头函数定义在某个函数内部，它的 this 就固定为该外层函数执行时的 this，且不可被 call/apply/bind 改变。
- 适用于类方法内定义的回调：如 React 类组件生命周期、Vue 选项 API 的
methods中 - 不适用于需要动态
this的场景（比如作为事件处理器直接绑定到 DOM 元素上并期望this指向该元素） - 注意：若外层函数本身是箭头函数，则继续向上找，直到遇到非箭头函数或全局作用域
示例：
class Counter {
constructor() {
this.count = 0;
}
start() {
// ✅ 箭头函数捕获 constructor 或 start 调用时的 this
setTimeout(() => {
this.count++; // 正确访问实例属性
console.log(this.count);
}, 100);
}
}
哪些地方用箭头函数反而会出问题
当回调预期 this 是调用者本身（而非定义者）时，箭头函数会破坏行为。
- DOM 事件监听器：
btn.addEventListener('click', () => { ... })→this不再指向btn，应改用event.currentTarget或保留普通函数 - 对象方法内嵌套箭头函数，但又想让内层回调的
this指向该对象：此时需显式绑定，或改用普通函数 +bind - 使用
jQuery的.each()或原生Array.prototype.forEach()时，若依赖回调中this为传入的thisArg，箭头函数会忽略该参数
和 bind 相比，性能与可读性差异
箭头函数在定义时就确定 this，无运行时绑定开销；bind 每次调用都生成新函数，可能影响闭包内存占用。
但要注意：类字段语法中的箭头函数（如 handleClick = () => {}）会在每次实例化时创建新函数，对大量渲染的列表项有轻微性能影响；而传统方法声明 + bind 在 render 中调用仍会产生重复绑定。
真正简洁安全的写法往往是：方法声明写在类体顶层，事件绑定时用 onClick={this.handleClick}（React），或在 mounted 中一次性 addEventListener（Vue/原生）。
最易被忽略的一点：箭头函数没有 arguments 对象，也不支持 new，所以不能替代所有普通函数——它只是解决 this 继承这个特定问题的工具，不是万能语法糖。
