箭头函数不是语法糖,它与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)。
立即学习“Java免费学习笔记(深入)”;
- 单参数可省括号:
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。其他时候,它只是更简洁的函数写法而已。










