箭头函数的this是词法绑定的，定义时就确定且永不改变；普通函数的this取决于调用方式。箭头函数无arguments、不能new调用，适合捕获外层this；普通函数适用于需动态this、arguments或构造调用的场景。
箭头函数的 this 是词法绑定的，不是运行时绑定
普通函数的 this 取决于调用方式（谁调用、怎么调用），而箭头函数没有自己的 this，它直接从外层作用域继承 this 值——这个值在函数定义时就确定了，之后永远不会变。
这意味着：
• 在对象方法中写箭头函数，this 不会指向该对象，而是指向定义时的外层 this（通常是全局或模块顶层）
• 在事件回调、setTimeout 或 Promise.then 中用箭头函数，能自然捕获外层 this，避免手动 .bind(this) 或缓存 const self = this
常见错误现象：
• obj.method() 内部用箭头函数访问 this.prop，结果是 undefined
• 类中写 handleClick = () => { console.log(this.state) } 没问题，但写成 handleClick() { console.log(this.state) } 后又在 JSX 里写 onClick={this.handleClick}，就可能因绑定丢失而报错
什么时候必须用普通函数，不能用箭头函数
以下场景必须用 function 关键字定义的函数（或方法简写）：
立即学习“Java免费学习笔记（深入）”；
- 对象方法需要访问自身属性，例如
obj.getName() { return this.name } - 类的方法需要被正确绑定到实例（尤其没用类字段语法时），例如构造器里没手动
this.fn = this.fn.bind(this)，又没用箭头函数字段写法 - 需要使用
arguments对象（箭头函数没有arguments） - 需要通过
call/apply/bind动态指定this
示例对比：
const obj = {
name: 'Alice',
regular() { return this.name }, // ✅ 返回 'Alice'
arrow: () => this.name // ❌ 返回 undefined（this 是全局或 module）
};
React 类组件中箭头函数字段的 this 行为
像 handleSubmit = (e) => { this.setState(...) } 这种写法，本质是把函数赋值给实例属性，且因箭头函数特性，this 永远指向组件实例——这绕过了传统方法绑定问题。
但要注意：
• 它不是“自动绑定”，而是靠词法作用域捕获了定义时的 this（即 class 构造阶段的实例）
• 每次渲染都重新创建函数（可能影响 React.memo 或 useCallback 的依赖判断）
• 如果函数体很大或频繁触发，建议改用 useCallback + 普通函数，配合依赖数组控制重创建
性能提示：大量使用类字段箭头函数可能导致内存占用略高，尤其在列表项组件中；函数体简单、不涉及闭包大对象时，影响可忽略。
如何快速判断该用哪种函数
问自己三个问题：
• 我是否需要 this 指向调用者？→ 用普通函数
• 我是否希望 this 和外层保持一致（比如类顶层、事件处理器外层）？→ 用箭头函数
• 我是否需要 arguments 或动态绑定？→ 用普通函数
容易被忽略的一点：箭头函数不能用作构造函数（调用会报 TypeError: xxx is not a constructor），所以从不用于 new 场景。
