箭头函数的 this 静态绑定于定义时外层作用域，不支持动态上下文；需动态 this 时必须用普通函数，如事件处理器、call/apply 借用等场景。
箭头函数本身不处理动态上下文——它根本不支持动态 this。它的设计就是“静态绑定”，即 this 在定义时就确定，永远沿作用域链向上找外层的 this，运行时不会改变。所以问题不是“怎么在箭头函数里处理动态上下文”，而是“当需要动态上下文时，不该用箭头函数”。
箭头函数适合固定上下文的场景
当你明确希望函数始终访问定义时所在对象的 this（比如类实例、闭包环境），箭头函数是天然选择：
- 定时器回调中访问实例属性：
setInterval(() => { this.count++; }, 1000) - 数组方法中保持实例上下文：
list.map(item => this.process(item)) - Promise 链中调用实例方法：
fetch(...).then(res => this.handleData(res))
需要动态上下文时，必须用普通函数
如果函数的 this 应该随调用方式变化（例如作为 DOM 事件处理器、被其他对象借用、或需用 call/apply 临时指定），就必须使用传统函数声明或表达式：
- DOM 事件中要访问触发元素？用
event.currentTarget，不是靠 this：btn.addEventListener('click', function(e) { console.log(this === e.currentTarget); }) - 想让方法能被不同对象调用并自动绑定对应 this？写成普通方法：
handleClick() { console.log(this); }，再用bind或显式调用 - 需要借用方法？用
call或apply：obj.method.call(otherObj, arg1, arg2)
类中混用两种函数的实用策略
一个类里可以同时存在普通方法（用于可复用、可借用）和箭头函数属性（用于安全外传）：
立即学习“Java免费学习笔记（深入）”；
-
getData() { return this.apiKey; }—— 普通方法，可被测试工具 call 绑定任意上下文 -
onSubmit = () => { this.getData(); this.submitForm(); }—— 箭头函数，直接传给<form onSubmit={this.onSubmit}>不怕 this 丢失
常见误用与纠正
以下做法容易引发困惑：
- ❌
el.addEventListener('click', () => { console.log(this); })—— 这里的this是外层作用域的值（比如类实例），不是点击的元素；应改用event.currentTarget - ❌ 把箭头函数当对象方法定义：
const obj = { method: () => this.val }——this指向外层，不是obj - ✅ 正确思路：先明确“这个函数的 this 应该由谁决定”——是调用者？还是定义者？再选语法
