箭头函数在事件处理器中自动继承外层this，避免丢失；它无自有this，捕获定义时词法作用域的this（如类实例），适用于事件回调和异步操作，但不可继承、重写或动态绑定，应通过类字段语法定义。
箭头函数在编写事件处理器时，最大的优势是自动继承外层作用域的 this，避免因函数被间接调用而导致 this 丢失。
事件处理器中 this 丢失的典型问题
当普通函数作为事件回调传入（如 addEventListener 或 React 的 onClick），它脱离了原本的对象上下文，this 会指向全局对象（非严格模式）或 undefined（严格模式），无法访问类实例的属性和方法。
- 例如：
button.addEventListener('click', this.handleClick)中，若handleClick是普通方法，调用时this不再指向组件实例 - 传统补救方式：在构造函数中手动绑定
this.handleClick = this.handleClick.bind(this)，或使用内联写法onClick={() => this.handleClick()}（但可能影响 React diff 性能）
箭头函数如何解决这个问题
箭头函数没有自己的 this，它直接捕获定义时所在词法作用域的 this——也就是类实例本身。只要定义在类字段中，就能天然保持绑定。
- 推荐写法：
handleSubmit = (e) => { e.preventDefault(); console.log(this.state); } - 该函数可直接传给
onClick={this.handleSubmit}，无需额外绑定，且每次调用都稳定指向当前实例 - 适用于
fetch().then(data => this.update(data))、setTimeout(() => this.tick(), 1000)等异步回调场景
为什么不能直接用箭头函数定义“类方法”
箭头函数不是标准的方法定义语法，它不参与原型链，不可被继承或重写，也不支持 call/apply/bind 动态修改 this。
立即学习“Java免费学习笔记（深入）”；
- 它本质是“绑定到实例的函数值”，适合封装需固定上下文的逻辑（如事件响应、异步回调）
- 但不适合需要多态、动态绑定或被子类覆盖的公共方法（如生命周期方法、工具方法）
- 类字段语法（
method = () => {}）是现代实践中的事实标准，已纳入 ES2022
实际使用中的关键细节
箭头函数的 this 绑定发生在定义时刻，而非调用时刻——这意味着它的可靠性取决于定义位置。
- 必须定义在类实例上下文中（如类字段），才能捕获实例 this
- 如果写在普通对象字面量里（如
{ onClick: () => this.do() }），this 指向外层作用域，通常不是你期望的对象 - 不能用作 DOM 事件监听器的直接赋值（如
el.onclick = () => {}），因为此时 this 指向全局，而非触发元素；这类场景应保留普通函数或显式传参
