箭头函数不是语法糖,它不绑定this和arguments、不能用作构造函数;this在定义时确定并继承外层词法作用域,无arguments对象,不支持yield,不可new调用,返回对象字面量需加括号。

箭头函数不是普通函数的语法糖,它不绑定 this、arguments,也不能用作构造函数——这是最核心的区别,不是“写起来更短”那么简单。
箭头函数没有自己的 this,始终继承外层作用域
普通函数的 this 在调用时动态绑定(取决于怎么被调用),而箭头函数的 this 是定义时就确定的,指向其所在词法作用域的 this。
常见错误现象:
在事件回调或定时器中使用普通函数时 this 丢失,有人下意识改用箭头函数“修复”,但若外层 this 本身就不对(比如在对象方法里直接定义箭头函数),问题反而更隐蔽。
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 需要明确绑定
this(如 Vue/React 类组件中的事件处理)→ 用箭头函数 - 要让函数能被
new调用、或需动态this(如 jQuery 回调、原生 DOM 方法的call/apply)→ 必须用普通函数 - 不确定时,先打印
console.log(this)看实际指向,别凭直觉改
箭头函数没有 arguments 对象,也不支持 yield
在箭头函数内部访问 arguments,会报 ReferenceError 或取到外层函数的 arguments;它也不能用作 Generator 函数(不支持 function* 语法,也不能写 yield)。
使用场景:
- 需要类数组参数对象(如兼容老浏览器的参数收集)→ 改用剩余参数
...args,它是标准且推荐的方式 - 要写异步迭代逻辑(如遍历大量数据并暂停)→ 只能用普通
function*,箭头函数完全不可行 - 用 Babel 转译时,
arguments的处理行为可能因 preset 不同而异,但原生环境一律不支持
不能用 new 调用,也没有 prototype
尝试 new (() => {}) 会抛出 TypeError: xxx is not a constructor。箭头函数的 prototype 属性是 undefined,因此无法作为类或工厂函数使用。
性能 / 兼容性影响:
- V8 引擎对箭头函数做了优化,但仅限于闭包场景;如果只是替代一个简单无状态函数,性能差异可忽略
- IE 完全不支持箭头函数,哪怕加了 Babel,
this绑定逻辑也无法完全模拟(尤其嵌套多层时) - Node.js 从 v4.0+ 开始支持,但早期 LTS 版本(如 v6.x)对某些边缘语法(如带换行的箭头体)解析不稳定
返回对象字面量时必须加括号
这是极易踩坑的语法点:箭头函数若要隐式返回一个对象,必须把对象包裹在 () 中,否则大括号会被解析为函数体。
错误写法:const fn = () => { a: 1 }; → 返回 undefined,且 a: 1 是标签语句,不是对象属性
正确写法:const fn = () => ({ a: 1 });
其他情况:
- 返回数组、字符串、数字等原始值或非对象结构 → 括号可省略
- 显式写
return→ 大括号是函数体,对象必须正常写return { a: 1 } - 用 Prettier 或 ESLint(如
arrow-parens规则)可提前暴露这类问题
真正难的不是记住“箭头函数没 this”,而是判断某个具体场景里,你到底需要的是词法绑定,还是动态绑定——这得看调用链和上下文生命周期,而不是看代码长得像不像。










