箭头函数在对象字面量中作方法时，this 不指向当前对象而是捕获外层词法作用域的 this，易导致隐性错误；正确做法是对象方法用普通函数（method() {} 或 function() {}），仅在明确需绑定外层 this 时（如类字段）使用箭头函数。
箭头函数在对象字面量中直接用作方法时，this 不指向当前对象，而是沿词法作用域向上捕获外层的 this —— 这是它“没有自己 this”的本质决定的，不是 bug，但极易引发隐性错误。
为什么对象里写 onClick: () => this.handleClick() 会出错？
因为箭头函数不关心调用方式，只认定义时的外层上下文。如果这个对象字面量写在类外部、或函数作用域里，this 很可能指向 window、undefined 或某个无关实例，而不是你期待的对象本身。
- ❌
const obj = { handler: () => this.data };→ this 是定义 obj 时所在函数/全局的 this - ✅
const obj = { handler() { return this.data; } };→ 普通方法，调用时 obj.handler() 的 this 就是 obj - ✅
const obj = { handler: function() { return this.data; } };→ 效果同上，显式声明普通函数
嵌套对象和原型链中的陷阱更隐蔽
当对象有深层结构（如 obj.nested.action = () => this.value），或方法从原型继承而来，箭头函数会让 this 绑定彻底失效：
- 即使
obj.nested是子对象，this也不会自动变成obj或obj.nested - 原型上的箭头方法无法被子类正确继承使用 —— 因为普通函数靠调用位置动态绑定 this，箭头函数做不到
- 解构后调用（
const { action } = obj.nested; action();）同样丢失上下文，且无法靠 bind 修复（箭头函数 bind 无效）
什么情况下可以用箭头函数？明确需要捕获外层 this 时
不是所有箭头函数都错，关键看意图：如果你本就不想让 this 指向调用对象，而是要固定指向外层实例（比如类组件中保持 this 指向组件实例），那就适合用。
立即学习“Java免费学习笔记（深入）”；
- ✅ 类字段写法：
handleClick = () => { console.log(this.state); }—— 此时 this 已由类实例确定，安全 - ✅ 事件回调包装：
onClick={() => this.submit()}（JSX 中），本质是闭包，非对象方法属性 - ❌
{ onClick: () => this.submit() }（纯对象字面量），除非你确认外层 this 就是你想要的
推荐做法：对象方法默认用普通函数语法
清晰、可预测、兼容原型链与解构操作。需要绑定时，优先用现代写法或显式处理：
- 用简写语法：
method() { /* this 指向调用者 */ } - 需提前绑定（如用于事件监听）：
constructor() { this.handleClick = this.handleClick.bind(this); } - 或用 class fields + 箭头函数（仅限类内，非任意对象）
- 避免把箭头函数塞进配置对象、API 参数、响应式数据等纯对象结构中
