17370845950

箭头函数不是语法糖，它与function函数在this绑定、arguments对象、new调用等方面存在本质区别：无独立this（继承外层）、无arguments、不可new调用、不支持generator/async generator，单表达式隐式返回需注意对象字面量括号。

箭头函数不是语法糖，它和 function 关键字声明的函数在 this、arguments、new 调用等行为上有本质区别，不能随意替换。

箭头函数没有自己的 this，始终继承外层作用域的 this

这是最常踩坑的一点。传统函数的 this 取决于调用方式（如 obj.fn() 中 this 指向 obj），而箭头函数的 this 在定义时就固定了，无法被 .call()、.apply()、.bind() 改变。

• 事件监听器里写 () => this.xxx，如果外层 this 是 undefined（严格模式）或全局对象，就会出错；应改用 function() { this.xxx } 或提前绑定
• Vue 选项式 API 的 methods 中禁止使用箭头函数，否则 this 指向不是组件实例
• React 类组件的事件回调若用箭头函数（如 onClick={() => this.handleClick()}），每次渲染都新建函数，可能触发子组件不必要的重渲染（可用 useCallback 优化）

箭头函数没有 arguments 对象，也不支持 new 调用

它无法访问 arguments，也不能作为构造函数——调用 new 会直接抛出 TypeError: xxx is not a constructor。

• 需要类数组参数时，改用剩余参数：(...args) => args[0] 替代 function() { return arguments[0]; }
• 要模拟构造函数行为（比如封装工厂逻辑），必须用 function 或 class，箭头函数完全不可行
• Generator 函数（function*）和异步函数（async function）都不能写成箭头形式：async () => {} 合法，但 async () => yield 1 语法错误

简写语法只适用于单表达式，多语句必须加 {} 和 return

很多人以为 () => 1 和 () => { 1 } 等价，其实后者不返回任何值（即返回 undefined）。

• 单参数可省括号：x => x * 2；但无参或多个参数必须写：() => 0、(a, b) => a + b
• 单表达式隐式返回：x => ({ id: x }) —— 注意括号要包住对象字面量，否则会被解析为代码块
• 想返回对象却忘了括号，结果函数返回 undefined，这种 bug 很隐蔽

const objFactory = (id) => { id: id }; // ❌ 返回 undefined  
const objFactory = (id) => ({ id: id }); // ✅ 返回 { id: id }

真正难的不是记住规则，而是判断「这里该不该用箭头函数」——关键看是否依赖动态 this、是否需要被 new、是否要访问 arguments。其他时候，它只是更简洁的函数写法而已。