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

JavaScript箭头函数以简洁著称，但其“无this、无arguments、无prototype”的核心特性绝非偶然缺陷，而是深刻的设计取舍——它不绑定自己的this，而是继承定义时词法作用域的this，导致在对象方法、事件回调等场景中极易因上下文丢失而引发静默bug；它彻底摒弃arguments对象，必须用...args替代；无法被new调用，也不支持super和new.target；甚至返回对象字面量时若不加小括号，大括号会被误解析为函数体，造成意外返回undefined。理解这些本质差异，才能避开看似优雅实则危险的陷阱。

箭头函数没有自己的 this，这点必须立刻意识到

箭头函数不绑定 this，它会沿作用域链向上找最近的非箭头函数的 this。这意味着在对象方法、事件回调或定时器中直接用箭头函数，this 很可能不是你预期的对象实例。

• 普通函数：this 由调用方式决定（如 obj.fn() 中 this 是 obj）
• 箭头函数：this 固定为定义时所在词法作用域的 this，无法通过 call/apply/bind 修改
• 常见翻车场景：Vue/React 组件里把事件处理写成 onClick={() => this.handleClick()} 没问题，但若写成 const handler = () => { console.log(this); } 再传给子组件，this 就可能丢失上下文

arguments 在箭头函数里根本不存在

箭头函数没有自己的 arguments 对象。试图访问它会报 ReferenceError: arguments is not defined。

• 替代方案：用剩余参数 ...args —— 它在箭头函数中完全可用
• 错误写法：

  () => { console.log(arguments); }

• 正确写法：

  (...args) => { console.log(args); }

• 注意：即使外层是普通函数，箭头函数内部也不会继承其 arguments

不能用作构造函数，new 会直接报错

箭头函数没有 prototype 属性，也没有 [[Construct]] 内部方法，所以不能被 new 调用。

• 执行 new (() => {}) 会抛出 TypeError: xxx is not a constructor
• 需要实例化？必须用普通函数或 class
• 这个限制也意味着箭头函数不能用 super 或 new.target

返回对象字面量时，括号不是可选的

箭头函数单表达式隐式返回时，如果想返回一个对象，必须用小括号包裹，否则大括号会被解析为函数体。

• 错误（返回 undefined）：

  const fn = () => { a: 1 };

  —— 这里 { a: 1 } 被当成代码块，不是对象
• 正确：

  const fn = () => ({ a: 1 });

• 同理，返回数组字面量不需要括号：

  const arr = () => [1, 2];

  是安全的

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