箭头函数不是语法糖，它与普通函数在this绑定、不可new调用、无arguments三方面存在本质区别，直接替换易引发隐性bug。
箭头函数不是语法糖，它和普通函数在 this、arguments、new 调用三方面有本质区别；不加判断直接替换会导致隐性 bug。
箭头函数没有自己的 this，会沿作用域链向上找
这是最常踩坑的点。普通函数的 this 取决于调用方式（如 obj.fn() 中 this 是 obj），而箭头函数的 this 固定为定义时外层作用域的 this 值。
常见错误场景：
- 对象方法中写箭头函数：
const obj = { name: 'a', say: () => console.log(this.name) }→this指向全局或undefined（严格模式） - 事件回调里用箭头函数本意是绑定
this，但如果外层this本身不对（比如在类字段初始化时未绑定），反而更难排查 - Vue 选项式 API 的
methods或computed里误用箭头函数，导致无法访问this.$data
箭头函数不能作为构造函数，也没有 prototype
调用 new 箭头函数会直接报错：TypeError: xxx is not a constructor。它没有 prototype 属性，也不能用 instanceof 判断。
立即学习“Java免费学习笔记（深入）”；
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
这意味着：
- 所有需要实例化的场景必须用普通函数：类、工厂函数、需要原型链继承的工具函数
- React 中创建组件时，若用箭头函数写
function MyComponent() { ... }是合法的，但写成const MyComponent = () => { ... }就丢失了MyComponent.prototype（虽然 React 不依赖它，但某些 HOC 或 ref 类型推导可能受影响） - 想给函数挂载静态属性（如
fn.cache = new Map()）时，箭头函数无法被重新赋值为对象，普通函数更灵活
箭头函数没有 arguments，也不支持 yield
在箭头函数内部访问 arguments 会报 ReferenceError，它只能靠外层函数的 arguments 或使用剩余参数 ...args 替代。
其他限制包括：
- 不能用
yield，因此不能是生成器函数（function*） - 没有
caller和callee（已废弃但部分老代码仍依赖） - 调试时堆栈中显示为
anonymous，不利于定位（尤其压缩后）
适合用箭头函数的典型场景
不是“能用就用”，而是“明确需要它的特性时才用”：
- 短小的回调：数组方法如
[1,2,3].map(x => x * 2)、setTimeout(() => doSth(), 100) - 需要绑定外层
this且外层this稳定：React 函数组件内事件处理器（onClick={() => setState(x)}）、Promise 链中的.then(data => this.handle(data)) - 避免重复写
function关键字又不需要上述特性的场合（如配置项里的简单转换函数）
真正容易被忽略的是：箭头函数的简洁性是以牺牲运行时灵活性换来的。一旦你需要动态 this、构造能力、或调试可见性，就得退回到普通函数——这不是风格选择，是语义约束。
