在前端面试中，“箭头函数与普通函数的区别”是一道出现频率极高的基础题。只是很多开发者仅停留在“写法更简单”或“this 指向不同”的浅层认知上。作为一名合格的前端工程师，需要从 JavaScript 引擎的执行机制层面这两者的本质差异。

第一部分这方面，直观的代码对比

我们通过代码直观地感受两者在书写层面上的差异。箭头函数本质上是 ES6 引入的一种语法糖，旨在简化函数定义。

基础写法对比

JavaScript

// 普通函数声明
function add {
return a + b;}
// 普通函数表达式
const sub = function {
return a - b;}，// 箭头函数
const mul = => {
return a * b;}，

箭头函数的语法糖特性

箭头函数支持高度简化的写法，但也引入了一些特定的语法规则：

• 省略参数括号当且仅当只有一个参数时可以省略括号。
• 隐式返回当函数体只有一行语句时可以省略花括号 {} 和 return 关键字。

// 省略参数括号
const square = x => x * x;// 完整写法对比
const squareFull = => {
return x * x;}，

返回对象字面量的陷阱

这是初学者最容易踩的坑。当隐式返回一个对象字面量时必须使用小括号 包裹，否则 JS 引擎会将对象的花括号 {} 解析为函数体的代码块。

// 错误写法：返回 undefined。引擎认为 {} 是代码块
const getUserError = id => { id: id,name: 'User' };// 正确写法：使用 包裹
const getUser = id =>;

至于第二部分。特性分析

在深入差异之前，需要界定两种函数的底层特性，这是理解它们行为差异的基石。

普通函数

• 动态作用域机制: this 的指向在函数被调用时决定，而非定义时。
• 完整性: 拥有 prototype 属性，可以作为构造函数。怎么说呢，
• 参数集合: 函数体内自动生成 arguments 类数组对象。
• 构造能力: 具备 ] 内部方法和 ] 内部方法。

箭头函数

• 词法作用域机制: this 的指向在函数定义时决定，捕获外层上下文。不过，
• 轻量化: 没有 prototype 属性。没有 arguments 对象。
• 非构造器: 只有 ] 内部方法。没有 ] 内部方法，所以不可实例化。

第三部分这方面，主要差异详细说明

. this 指向机制

This 是两者最根本区别所在：

• 普通函数：This 指向取决于调用位置。- 默认绑定：独立调用指向 window。- 隐式绑定：作为对象方法调用，指向该对象。- 显式绑定：通过 call、apply、bind 修改指向。

• 箭头函数：This 遵循词法作用域。不过，它没有自己的 this，而是捕获定义时所在外层上下文的 this。一旦绑定，无法被修改，

场景演示：setTimeout 中的回调

const obj = {
从name来看。'Juejin',// 普通函数
sayWithRegular: function {
setTimeout {
console.log;},)，},// 箭头函数
sayWithArrow: function {
setTimeout => {
console.log;},)，}
};obj.sayWithRegular;// 输出: Regular: undefined
obj.sayWithArrow;// 输出: Arrow: Juejin
解析的观点是。

• - sayWithRegular 的回调是独立调用，this 指向全局对象，通常没有 name 属性。
• - sayWithArrow 的箭头捕获了外层 sayWithArrow 函数的 this。即 obj，所以能正确访问 name。即便 setTimeout 在全局环境中执行回调，箭头保持不变。

显式绑定无效验证：

const arrow = => console.log;const obj = { id: };arrow.call，按理说，// 依然输出 window/global

由于箭头内部缺失 ] 方法和 prototype 属性。它不能被用作构造器，

const RegularFunc = function {};按理说，const ArrowFunc = => {};

console.log;其实，// { constructor: ... } console.log;//

new RegularFunc;老实说，// 正常执行

new ArrowFunc;// Uncaught TypeError: ArrowFunc is not a constructor

这一特性说明箭头旨在处理逻辑运算和回调，而非对象建模。

普通函使用 arguments 获取不定参数；而 arrow 函数访问 arguments 报错 ReferenceError，因为根本不存在。

正确方案这方面，ES6 推荐使用剩余参数。

function sumRegular {
return Array.from.reduce=>a+b);}

const sumArrow = => { // console.log;// 报错 return args.reduce=>a+b);}，

console.log);

. 方法定义中的陷阱

鉴于 arrow 函数 this 绑定机制，不推荐在定义对象原型方法或字面量方法时使用 arrow。

const person ={
从name来看。'Developer',sayHi :=>{ console.log;说起来，},//错误示范。此处this指window而非person

sayHello:function{ console.log;} // 正确示范，此处this动态绑定到调用者 };

person.sayHi;// undefined person.sayHello;// Developer

再看第四部分，面试场景复盘

面试官提问: “请谈谈箭头与普通函区别。”

高分回答范本

• 主要 “箭头是 ES6 特性。不仅语法更简洁，明显改变了 this 的绑定方式——普通函动态绑定，arrow词法绑定。”

• 展开细节

• - **关于 this** ：普通函此取决于调用方式，可用 call/apply/bind 改变；arrow 捕获定义时上下文，这一绑定不可改动。对解决回调中的 lost‑this 问题极其有利。
• - **关于构造能力** ：arrow 无 ] 与 prototype，不能 new 实例。
• - **关于参数处理** ：arrow 没有 arguments，只能用 ...args 来获取不定参。

• 补充亮点

“实际开发中，arrow 非常适合回调、数组操作、锁定 this 场景。但若需定义可实例化的方法或需要动态 this，应可以优先考虑普通函。”

---