JavaScript 普通函数与箭头函数的区别小结
作者：NEXT06
在前端面试中，“箭头函数与普通函数的区别”是一道出现频率极高的基础题。然而，很多开发者仅停留在“写法更简单”或“this 指向不同”的浅层认知上。作为一名合格的前端工程师，我们需要从 JavaScript 引擎的执行机制层面，深入理解这两者的本质差异。
本文将从语法特性、运行原理、核心差异及面试实战四个维度，对这一知识点进行全方位的拆解。
第一部分：直观的代码对比（语法层）
首先，我们通过代码直观地感受两者在书写层面上的差异。箭头函数（Arrow Function）本质上是 ES6 引入的一种语法糖，旨在简化函数定义。
1. 基础写法对比
// 普通函数声明
function add(a, b) {
return a + b;
}
// 普通函数表达式
const sub = function(a, b) {
return a - b;
};
// 箭头函数
const mul = (a, b) => {
return a * b;
};
2. 箭头函数的语法糖特性
箭头函数支持高度简化的写法，但同时也引入了一些特定的语法规则：
- 省略参数括号：当且仅当只有一个参数时，可以省略括号。
- 隐式返回：当函数体只有一行语句时，可以省略花括号 {} 和 return 关键字。
// 省略参数括号
const square = x => x * x;
// 完整写法对比
const squareFull = (x) => {
return x * x;
};
3. 返回对象字面量的陷阱
这是初学者最容易踩的坑。当隐式返回一个对象字面量时，必须使用小括号 () 包裹，否则 JS 引擎会将对象的花括号 {} 解析为函数体的代码块。
// 错误写法：返回 undefined，引擎认为 {} 是代码块
const getUserError = id => { id: id, name: 'User' };
// 正确写法：使用 () 包裹
const getUser = id => ({ id: id, name: 'User' });
第二部分：特性分析（原理层）
在深入差异之前，我们需要界定两种函数的底层特性，这是理解它们行为差异的基石。
普通函数（Regular Function）
- 动态作用域机制：this 的指向在函数被调用时决定，而非定义时。
- 完整性：拥有 prototype 属性，可以作为构造函数。
- 参数集合：函数体内自动生成 arguments 类数组对象。
- 构造能力：具备 [[Construct]] 内部方法和 [[Call]] 内部方法。
箭头函数（Arrow Function）
- 词法作用域机制：this 的指向在函数定义时决定，捕获外层上下文。
- 轻量化：设计之初就是为了更轻量级的执行。没有 prototype 属性，没有 arguments 对象。
- 非构造器：只有 [[Call]] 内部方法，没有 [[Construct]] 内部方法，因此不可实例化。
第三部分：核心差异深度解析
接下来，我们将从底层机制出发，分点剖析两者的核心差异。
1. this 指向机制（核心差异）
这是两者最根本的区别。
普通函数：this 指向取决于调用位置。
- 默认绑定：独立调用指向 window（严格模式下为 undefined）。
- 隐式绑定：作为对象方法调用，指向该对象。
- 显式绑定：通过 call、apply、bind 修改指向。
箭头函数：this 遵循词法作用域。它没有自己的 this，而是捕获定义时所在外层上下文的 this。一旦绑定，无法被修改。
场景演示：setTimeout 中的回调
const obj = {
name: 'Juejin',
// 普通函数
sayWithRegular: function() {
setTimeout(function() {
console.log('Regular:', this.name);
}, 100);
},
// 箭头函数
sayWithArrow: function() {
setTimeout(() => {
console.log('Arrow:', this.name);
}, 100);
}
};
obj.sayWithRegular(); // 输出: Regular: undefined (或 window.name)
obj.sayWithArrow(); // 输出: Arrow: Juejin
解析：
- sayWithRegular 中的回调函数是独立调用的，this 指向全局对象（浏览器中为 window），通常没有 name 属性。
- sayWithArrow 中的箭头函数在定义时，捕获了外层 sayWithArrow 函数的 this（即 obj），因此能正确访问 name。即便 setTimeout 是在全局环境中执行回调，箭头函数的 this 依然保持不变。
显式绑定无效验证：
const arrow = () => console.log(this);
const obj = { id: 1 };
// 尝试修改箭头函数的 this
arrow.call(obj); // 依然输出 window/global
2. 构造函数能力
由于箭头函数内部缺失 [[Construct]] 方法和 prototype 属性，它不能被用作构造函数。
const RegularFunc = function() {};
const ArrowFunc = () => {};
console.log(RegularFunc.prototype); // { constructor: ... }
console.log(ArrowFunc.prototype); // undefined
new RegularFunc(); // 正常执行
new ArrowFunc(); // Uncaught TypeError: ArrowFunc is not a constructor
这一特性说明箭头函数旨在处理逻辑运算和回调，而非对象建模。
3. 参数处理（arguments vs Rest）
在普通函数中，我们习惯使用 arguments 对象来获取不定参数。但在箭头函数中，访问 arguments 会导致引用错误（ReferenceError），因为它根本不存在。
正确方案：ES6 推荐使用 剩余参数（Rest Parameters） 。
// 普通函数
function sumRegular() {
return Array.from(arguments).reduce((a, b) => a + b);
}
// 箭头函数：使用 ...args
const sumArrow = (...args) => {
// console.log(arguments); // 报错：arguments is not defined
return args.reduce((a, b) => a + b);
};
console.log(sumArrow(1, 2, 3)); // 6
4. 方法定义中的陷阱
鉴于箭头函数的 this 绑定机制，不推荐在定义对象原型方法或对象字面量方法时使用箭头函数。
const person = {
name: 'Developer',
// 错误示范：this 指向 window，而非 person 对象
sayHi: () => {
console.log(this.name);
},
// 正确示范：this 动态绑定到调用者 person
sayHello: function() {
console.log(this.name);
}
};
person.sayHi(); // undefined
person.sayHello(); // Developer
第四部分：面试场景复盘（实战）
面试官提问：“请你谈谈箭头函数和普通函数的区别。”
高分回答范本：
（建议采用“总-分-总”策略，逻辑清晰，覆盖全面）
1. 核心总结
“箭头函数是 ES6 引入的特性，它不仅提供了更简洁的语法，更重要的是彻底改变了 this 的绑定机制。简单来说，普通函数是动态绑定，箭头函数是词法绑定。”
2. 核心差异展开
- 关于 this 指向（最重要） ：
普通函数的 this 取决于调用方式，谁调用指向谁，可以通过 call/apply/bind 改变。
而箭头函数没有自己的 this，它会捕获定义时上下文的 this，且永久绑定，即使使用 call 或 apply 也无法改变指向。这很好地解决了回调函数中 this 丢失的问题。 - 关于构造能力：
箭头函数不能作为构造函数使用，不能使用 new 关键字，因为它没有 [[Construct]] 内部方法，也没有 prototype 原型对象。 - 关于参数处理：
箭头函数内部没有 arguments 对象，如果需要获取不定参数，必须使用 ES6 的剩余参数 ...args。
3. 补充亮点与使用建议
“在实际开发中，箭头函数非常适合用在回调函数、数组方法（如 map、reduce）或者需要锁定 this 的场景（如 React 组件方法）。但在定义对象方法、原型方法或动态上下文场景中，为了保证 this 指向调用者，依然应该使用普通函数。”
到此这篇关于JavaScript 普通函数与箭头函数的区别小结的文章就介绍到这了,更多相关JavaScript 普通函数与箭头函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！