JavaScript中的箭头函数是ES6引入的新特性，相对于普通函数有一些不同的特点和用法。本文将会详细阐述箭头函数和普通函数之间的区别和优势。
1. 语法简洁
箭头函数的语法相比普通函数更加简洁易读。普通函数需要使用function关键字定义和返回值使用return关键字，而箭头函数直接使用箭头（=>）来定义函数。
例如，以下是普通函数和箭头函数的对比：
// 普通函数
function sum(a, b) {
return a + b;
}
// 箭头函数
const sum = (a, b) => a + b;
可以看出，箭头函数的定义只需要一行代码，能够更快速地书写和理解。
2. 作用域绑定
箭头函数在定义时绑定了上下文的this值，而普通函数中的this值是在运行时确定的。箭头函数的作用域绑定更为简单和直接。
例如，以下是普通函数和箭头函数中使用this的示例：
// 普通函数
var person = {
name: 'John',
sayName: function() {
console.log('My name is ' + this.name);
}
};
person.sayName(); // My name is John
// 箭头函数
var person = {
name: 'John',
sayName: () => {
console.log('My name is ' + this.name);
}
};
person.sayName(); // My name is undefined
可以观察到，在箭头函数中，this指向了全局对象，而不是执行函数时的上下文对象。因此，在箭头函数中无法使用this来访问当前对象的属性。
3. 不适合作为构造函数
由于箭头函数绑定了上下文的this值，并且无法通过new关键字调用，所以它们不适合作为构造函数使用。
例如，以下是普通函数和箭头函数在作为构造函数时的对比：
// 普通函数作为构造函数
function Person(name) {
this.name = name;
}
var john = new Person('John');
console.log(john.name); // John
// 箭头函数作为构造函数
const Person = (name) => {
this.name = name;
};
var john = new Person('John'); // TypeError: Person is not a constructor
以上示例中，使用箭头函数作为构造函数会引发TypeError，因为箭头函数无法通过new关键字进行实例化。
4. arguments对象
普通函数中，可以通过arguments对象来访问传递给函数的所有参数。而箭头函数中没有自己的arguments对象，它使用的是其外层作用域的arguments对象。
例如，以下是普通函数和箭头函数中使用arguments对象的示例：
// 普通函数
function sum() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // 6
// 箭头函数
const sum = () => {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
};
console.log(sum(1, 2, 3)); // ReferenceError: arguments is not defined
可以看到，箭头函数中无法使用arguments对象，需要通过外层作用域来访问传入的参数。
5. 返回值隐式处理
箭头函数的返回值可以通过隐式返回的方式简化。当函数体只有一条返回语句时，可以省略return关键字并直接返回结果。
例如，以下是普通函数和箭头函数的返回值处理示例：
// 普通函数
function isEven(number) {
if (number % 2 === 0) {
return true;
} else {
return false;
}
}
console.log(isEven(4)); // true
// 箭头函数
const isEven = (number) => number % 2 === 0;
console.log(isEven(4)); // true
可以看到，箭头函数简化了单个表达式的返回值处理，使代码更加简洁。
总结来说，箭头函数与普通函数相比具有更简洁的语法和作用域绑定特性。然而，由于箭头函数在一些功能上的限制，普通函数仍然是在JavaScript中常用的函数定义方式，根据具体的需求选择合适的函数形式。
本文来自极简博客，作者：梦里水乡，转载请注明原文链接：JavaScript中的箭头函数和普通函数有什么不同？
