箭头函数的this由定义位置的外层作用域决定，而非调用方式；必须写在实例方法内部才能捕获实例this，全局或对象字面量中直接定义会导致this指向错误。
箭头函数本身不确保 this 正确，它只是“继承”外层作用域的 this——所以关键不是用不用箭头函数，而是它写在哪、外层 this 是不是你想要的那个对象。
必须写在实例方法内部
只有当箭头函数定义在类或对象的方法里，它才能捕获到该实例的 this。如果写在全局、工具函数里，或者普通函数中，外层 this 很可能就是 undefined 或 window。
- ✅ 正确：class App { start() { setTimeout(() => console.log(this.data), 100); } }
- ❌ 错误：const handler = () => console.log(this.data); // 外层是全局，this 不是你想要的实例
不能靠 bind / call / apply 强行改
箭头函数的 this 是词法绑定的，定义完就固定了。call、apply、bind 对它完全无效——这不是缺陷，而是设计使然。所以别试图“修复”它，而要从定义位置入手。
- 普通函数可用 setTimeout(fn.bind(this), 100) 补救
- 箭头函数只需保证：它出现在一个 this 已明确指向实例的函数体内
常见异步场景直接套用
只要外层上下文正确，以下写法天然安全：
- Promises：
fetch('/api').then(res => this.updateState(res)) - 定时器：
setInterval(() => this.ping(), 5000) - 事件监听（需注意触发源）：
btn.addEventListener('click', () => this.handleClick()) - async/await 后的链式回调：
await fetch(...); this.data = await res.json();（await 后仍在同一作用域，无需箭头）
别在对象字面量里直接写箭头方法
像 const obj = { fn: () => console.log(this) } 这种写法，this 指向的是定义时的外层（通常是全局），不是 obj 本身。对象方法想保持 this，要么用普通函数 + 隐式调用（obj.fn()），要么把箭头函数放在构造函数或类方法里初始化。
- ✅ 类字段写法：
class X { handleClick = () => { this.doSomething(); } } - ❌ 对象属性写法：
const x = { method: () => this.value }—— this 不是 x
