箭头函数与普通函数区别全解析

JavaScript箭头函数虽简洁优雅，却与普通函数存在本质差异：它不绑定自身this（而是继承外层作用域）、不可用new构造、没有arguments和yield支持，且返回值规则隐晦——单表达式自动返回，但对象字面量必须用小括号包裹，否则被误解析为代码块而返回undefined；这些特性看似便利，实则暗藏诸多“坑”，稍不注意就会引发this指向错误、构造失败、参数访问异常或意外undefined返回，掌握它们的区别不仅是写出正确代码的关键，更是避免线上事故的必备基础。

箭头函数没有自己的 this

这是最常踩坑的一点：箭头函数不绑定自己的 this，而是沿用外层作用域的 this 值。普通函数每次调用时会根据调用方式（如 obj.fn()、fn.call(obj)）动态确定 this。

典型问题场景：

• 对象方法中写箭头函数 → this 指向外层（通常是 window 或 undefined，严格模式下）
• 事件回调里用箭头函数 → 本意是绑定当前实例，但若外层 this 不对，就失效
• 想用 call/apply 强制改变 this → 对箭头函数完全无效

示例：

const obj = {
  name: 'Alice',
  regular() { return this.name },
  arrow: () => this.name
};
obj.regular(); // 'Alice'
obj.arrow();   // undefined（非严格模式下可能是 window.name）

箭头函数不能作为构造函数

调用 new 箭头函数会直接抛出 TypeError: xxx is not a constructor。因为箭头函数没有 [[Construct]] 内部方法，也没有 prototype 属性。

这意味着：

• 不能用 new 实例化
• 不能用在需要原型链继承的场景（如 Class 的静态方法中返回新实例时需谨慎）
• 无法通过 instanceof 判断类型（它连 prototype 都没有）

替代方案：必须用普通函数或 class 定义构造逻辑。

箭头函数没有 arguments，也不支持 yield

箭头函数内部访问 arguments 会报 ReferenceError，因为它不创建自己的 arguments 对象。同理，它不能用 yield，因此不能作为 Generator 函数。

常见应对方式：

• 用剩余参数 ...args 替代 arguments
• 需要 yield 就必须改用 function* 声明
• 在需要动态参数处理又想用箭头函数时，得提前把参数收进数组再传入

示例：

const bad = () => console.log(arguments); // ReferenceError
const good = (...args) => console.log(args); // ✅

箭头函数的返回值隐式规则容易误判

当箭头函数体是单个表达式且省略大括号时，会自动返回该表达式的值；但一旦用了大括号，就必须显式写 return，否则返回 undefined。

这个差异在对象字面量返回时尤其危险：

• x => ({a: 1}) → 正确返回对象（小括号避免被解析为代码块）
• x => {a: 1} → 返回 undefined（这其实是代码块，a: 1 是标签语句）
• x => ({a: 1}) 和 x => return {a: 1} 看似一样，但后者语法错误（箭头函数里不能用 return 关键字除非有大括号）

最容易忽略的是：对象字面量必须包裹在小括号里，否则 JS 解析器会把它当作函数体的开始。

本篇关于《箭头函数与普通函数区别全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！