登录
从“小白”到“大神”：JS箭头函数与普通函数的深度对决
开场：引入话题
在 JavaScript 的奇妙世界里，函数是一等公民，它们赋予了代码强大的灵活性和复用性。而随着 ES6 的到来，箭头函数以其简洁的语法和独特的特性，迅速成为了开发者们的心头好。但它与传统的普通函数相比，究竟有何不同呢？接下来，让我们通过一个简单的例子来一探究竟。
假设我们有一个需求：计算一个数组中所有元素的平方和。先看看使用普通函数如何实现：
const numbers = [1, 2, 3, 4, 5];
function sumOfSquares(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i] * arr[i];
}
return sum;
}
const result1 = sumOfSquares(numbers);
console.log(result1);
再看看使用箭头函数的实现方式：
const numbers = [1, 2, 3, 4, 5];
const sumOfSquares = arr => arr.reduce((acc, num) => acc + num * num, 0);
const result2 = sumOfSquares(numbers);
console.log(result2);
同样的功能，两种不同的实现方式，代码量和风格却大相径庭。是不是已经勾起了你对箭头函数和普通函数区别的好奇呢？别着急，接下来我们就深入剖析它们之间的差异。
一、语法大不同
（一）普通函数语法剖析
在 JavaScript 的历史长河中，普通函数一直是定义和使用函数的传统方式。它使用function关键字来宣告一个函数，拥有一套完整的结构，包括函数名、参数列表以及包裹在花括号内的函数体。以一个简单的加法函数为例：
function add(a, b) {
return a + b;
}
在这个例子中，add是函数名，它就像是给这个函数取的一个独特的名字，方便我们在代码的其他地方调用它。(a, b)是参数列表，这两个参数就像是函数执行时的 “原材料”，函数会根据传入的参数进行相应的操作。而花括号内的return a + b;则是函数体，这里面包含了具体的执行逻辑，也就是将两个参数相加并返回结果。
（二）箭头函数语法亮点
ES6 引入的箭头函数，犹如一阵清新的风，为 JavaScript 的函数定义带来了全新的体验。它的语法简洁明了，使用=>来定义函数。当箭头函数只有一个参数时，可以省略参数的括号；如果函数体只有一条语句，还能省略花括号和return关键字，直接返回该语句的结果。比如同样是上述加法函数，用箭头函数可以写成：
const add = (a, b) => a + b;
这里直接将函数赋值给add常量，参数(a, b)直接跟在=>前面，而函数体a + b因为只有一条语句，所以省略了花括号和return关键字，代码瞬间变得简洁高效。
（三）代码示例对比
下面通过更多不同参数和函数体情况的代码示例，更直观地感受普通函数和箭头函数的语法差异。
无参数情况：
- 普通函数：
function sayHello() {
console.log('Hello!');
}
- 箭头函数：
const sayHello = () => console.log('Hello!');
单参数情况：
- 普通函数：
function square(x) {
return x * x;
}
- 箭头函数：
const square = x => x * x;
多参数情况：
- 普通函数：
function multiply(a, b, c) {
return a * b * c;
}
- 箭头函数：
const multiply = (a, b, c) => a * b * c;
函数体为多条语句情况：
- 普通函数：
function calculate(a, b) {
let sum = a + b;
let product = a * b;
return sum + product;
}
- 箭头函数：
const calculate = (a, b) => {
let sum = a + b;
let product = a * b;
return sum + product;
};
通过这些示例可以清晰地看到，在不同场景下，箭头函数的语法相较于普通函数更加简洁，能够减少代码的冗余，提高代码的可读性 。尤其是在一些简单的函数定义中，箭头函数的优势更为明显。
二、this 指向的奥秘
（一）普通函数的 this 指向规则
在 JavaScript 的世界里，普通函数的this指向就像是一个 “变色龙”，它会根据函数的调用方式而发生变化。当普通函数在全局作用域中被调用时，它的this指向全局对象。在浏览器环境下，这个全局对象就是window。例如：
function globalFunction() {
console.log(this);
}
globalFunction();
上述代码中，globalFunction在全局作用域中被调用，所以this指向window。
当普通函数作为对象的方法被调用时，this指向调用该方法的对象。比如：
const person = {
name: 'Alice',
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
person.sayHello();
这里sayHello是person对象的方法，当person.sayHello()调用时，this就指向person对象，所以会输出Hello, I'm Alice。
另外，普通函数还可以通过call、apply、bind方法来显式地改变this的指向。call和apply方法会立即调用函数，并且将函数中的this指向传入的第一个参数。不同的是，call方法后续的参数是逐个传入，而apply方法则是将后续参数以数组的形式传入。bind方法则是返回一个新的函数，这个新函数的this被绑定为传入的第一个参数，且不会立即调用。示例如下：
function greet(message) {
console.log(`${message}, I'm ${this.name}`);
}
const person1 = { name: 'Bob' };
const person2 = { name: 'Charlie' };
greet.call(person1, 'Hi');
greet.apply(person2, ['Hello']);
const boundGreet = greet.bind(person1, 'Hey');
boundGreet();
（二）箭头函数的 this 绑定特性
箭头函数的this指向与普通函数截然不同，它就像是一个 “忠贞不渝的卫士”，始终指向定义时外层作用域的this，并且无法通过call、apply、bind方法来改变它的指向。这是因为箭头函数没有自己的this绑定，它的this是从外层作用域继承而来的。例如：
const outerThis = this;
const arrowFunction = () => {
console.log(this === outerThis);
};
arrowFunction();
在这段代码中，箭头函数arrowFunction定义时，外层作用域的this是outerThis，所以箭头函数内部的this也指向outerThis，输出结果为true。
（三）场景分析与示例
通过一个具体的场景来深入分析普通函数和箭头函数在this指向不同时所导致的结果差异。假设我们有一个对象，里面包含一个数组和一个方法，方法的作用是遍历数组并打印每个元素以及当前对象的属性。先用普通函数来实现：
const data = {
numbers: [1, 2, 3],
printNumbers: function() {
const self = this;
this.numbers.forEach(function(number) {
console.log(`${number} belongs to ${self.name}`);
});
}
};
data.printNumbers();
在上述代码中，forEach回调函数是一个普通函数，它的this指向window（在非严格模式下），所以不能直接访问data对象的属性。为了解决这个问题，我们使用了self = this的方式，将this保存到一个变量self中，然后在回调函数中通过self来访问data对象的属性。
再看看使用箭头函数的实现方式：
const data = {
numbers: [1, 2, 3],
printNumbers: function() {
this.numbers.forEach((number) => {
console.log(`${number} belongs to ${this.name}`);
});
}
};
data.printNumbers();
这里forEach回调函数是一个箭头函数，它的this继承自外层的printNumbers方法，也就是data对象，所以可以直接访问data对象的属性，代码更加简洁明了。
三、arguments 参数处理
（一）普通函数的 arguments 对象
在普通函数的世界里，有一个神奇的arguments对象，它就像是一个 “百宝箱”，默默地收集着所有传入函数的参数。无论你在函数定义时是否声明了这些参数，arguments对象都会将它们一一收纳。例如，我们定义一个简单的求和函数：
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3));
在这个sum函数中，没有预先声明参数，但通过arguments对象，我们可以轻松地访问到传入的所有参数，并对它们进行求和操作。arguments对象是一个类数组对象，它具有length属性，可以获取传入参数的个数，并且可以通过索引来访问每个参数，就像访问数组元素一样 。
（二）箭头函数的参数处理方式
与普通函数不同，箭头函数并没有属于自己的arguments对象。如果在箭头函数中尝试访问arguments，会导致错误。不过，箭头函数有它自己独特的参数处理方式 —— 使用剩余参数...。剩余参数可以将所有传入的参数收集到一个数组中，方便我们进行处理。例如，同样是上述求和功能，用箭头函数可以这样实现：
const sum = (...args) => {
let total = 0;
for (let i = 0; i < args.length; i++) {
total += args[i];
}
return total;
};
console.log(sum(1, 2, 3));
这里的...args就是剩余参数，它将传入的所有参数收集到args数组中，我们可以像操作普通数组一样对其进行遍历和计算 。
（三）应用场景对比
在实际开发中，当我们遇到需要处理不定参数的场景时，普通函数和箭头函数的不同处理方式就会展现出各自的优势和适用场景。比如，在一个日志记录函数中，我们可能需要记录不同数量的参数信息。使用普通函数可以这样实现：
function logInfo() {
let message = 'Log Info: ';
for (let i = 0; i < arguments.length; i++) {
message += arguments[i] + ' ';
}
console.log(message);
}
logInfo('User logged in', 'John', '192.168.1.1');
而如果使用箭头函数，则可以利用剩余参数来实现：
const logInfo = (...args) => {
let message = 'Log Info: ';
for (let i = 0; i < args.length; i++) {
message += args[i] + ' ';
}
console.log(message);
};
logInfo('User logged in', 'John', '192.168.1.1');
从代码实现上看，两者都能完成任务，但在一些复杂的场景中，箭头函数的剩余参数语法可能会使代码更加简洁和直观，尤其是在结合数组的一些方法（如map、reduce等）时，能够更方便地对参数数组进行操作。而普通函数的arguments对象则在一些需要兼容旧代码或者对参数顺序和个数有严格要求的场景中，依然发挥着重要作用 。
四、函数的其他特性差异
（一）构造函数的使用限制
在 JavaScript 的面向对象编程中，普通函数扮演着一个重要的角色 —— 它可以作为构造函数来创建对象实例。当我们使用new关键字来调用普通函数时，它就摇身一变成为了构造函数。构造函数在执行时，会创建一个新的空对象，这个新对象的__proto__属性会指向构造函数的prototype属性，然后构造函数内部的this会指向这个新对象，最后返回这个新对象。例如，我们定义一个Person构造函数：
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hello, I'm ${this.name}, ${this.age} years old.`);
};
}
const person1 = new Person('Tom', 25);
person1.sayHello();
这里的Person函数就是一个构造函数，通过new Person('Tom', 25)创建了一个person1对象实例，并且可以调用sayHello方法。每个构造函数都有一个prototype属性，这个属性指向一个对象，称为原型对象，原型对象上的属性和方法可以被通过该构造函数创建的所有实例对象共享 。
而箭头函数则不能作为构造函数使用。这是因为箭头函数没有自己的this绑定，它的this是从外层作用域继承而来的，并且箭头函数也没有prototype属性。如果尝试使用new关键字调用箭头函数，会抛出TypeError错误。例如：
const PersonArrow = (name, age) => {
this.name = name;
this.age = age;
};
const person2 = new PersonArrow('Jerry', 30);
上述代码会报错，提示PersonArrow is not a constructor，这表明箭头函数无法像普通函数那样作为构造函数来创建对象实例 。
（二）函数的原型与继承
普通函数在 JavaScript 的原型链和继承机制中起着关键的作用。通过构造函数的prototype属性，我们可以为一类对象定义共享的属性和方法。例如：
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(`${this.name} barks.`);
};
const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak();
myDog.bark();
在这个例子中，Animal是一个构造函数，它的prototype上定义了speak方法。Dog构造函数通过Animal.call(this, name)继承了Animal的属性，并且通过Dog.prototype = Object.create(Animal.prototype)将Dog的原型设置为Animal原型的一个实例，从而实现了继承。这样，myDog对象既可以调用Animal原型上的speak方法，也可以调用Dog原型上的bark方法。
然而，由于箭头函数没有prototype属性，所以它在继承方面存在很大的局限性。它无法像普通函数那样通过原型链来实现继承，也不能作为构造函数为子类提供基础的属性和方法。在需要使用继承的场景中，箭头函数就显得力不从心了。
（三）适用场景总结
在实际的 JavaScript 编程中，选择使用普通函数还是箭头函数，需要根据具体的场景来决定。
在面向对象编程中，当我们需要定义类和创建对象实例时，普通函数作为构造函数是必不可少的。它能够方便地为对象定义属性和方法，并且通过原型链实现继承和多态等面向对象的特性。例如，在开发一个游戏引擎时，可能会定义各种角色类，如Warrior、Mage、Archer等，这些类都可以通过普通函数作为构造函数来实现，并且可以通过继承一个基类Character来共享一些通用的属性和方法 。
在事件处理中，普通函数也有其优势。因为事件处理函数的this通常需要指向触发事件的元素，而普通函数的this动态绑定特性正好满足这一需求。例如，在一个网页中，当点击按钮时需要执行某个操作，我们可以使用普通函数来定义点击事件的处理函数：
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click me</button>
<script>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function () {
this.style.backgroundColor = 'red';
});
</script>
</body>
</html>
这里的this指向myButton元素，所以可以直接修改按钮的背景颜色。
而箭头函数则更适合用于那些需要简洁语法和固定this指向的场景。比如在数组的方法回调函数中，箭头函数可以使代码更加简洁易读。例如，使用map方法将数组中的每个元素翻倍：
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
在这个例子中，箭头函数作为map方法的回调函数，简洁地实现了对数组元素的操作。
另外，在一些需要访问外层作用域this的场景中，箭头函数也能很好地发挥作用。比如在类的方法中定义一个内部函数，并且这个内部函数需要访问类的this时，使用箭头函数就可以避免this指向的问题 。
结尾：总结与展望
通过以上全方位的对比分析，我们清晰地看到了 JavaScript 中箭头函数和普通函数的显著区别。箭头函数以其简洁的语法，让代码书写更加高效，尤其在处理简单逻辑和作为回调函数时，能大幅提升代码的可读性；它那独特的this指向特性，避免了在复杂场景中this指向混乱的问题，为开发者提供了更加稳定的编程体验 。
而普通函数则凭借其灵活的this绑定规则，在面向对象编程、事件处理等领域发挥着不可替代的作用；其arguments对象和可作为构造函数的特性，也为解决各种复杂的编程需求提供了有力的支持。
在未来的 JavaScript 编程旅程中，我们应根据具体的业务场景和需求，精准地选择使用箭头函数或普通函数。让我们充分利用它们各自的优势，编写出更加优雅、高效、易维护的代码，在 JavaScript 的广阔天地中自由翱翔，创造出更多精彩的应用。
