箭头函数与普通函数区别详解

珍惜时间，勤奋学习！今天给大家带来《JavaScript箭头函数与普通函数区别解析》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

箭头函数无自有this、不可构造、无arguments、无yield、返回值需注意隐式规则：其this沿用外层，不能new调用，不支持arguments和yield，单表达式自动返回，对象字面量须用小括号包裹。

箭头函数没有自己的 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学习网公众号吧！