箭头函数（Arrow Function）和普通函数（Regular Function）是 JavaScript 中两种不同的函数定义方式，它们在语法、上下文（this）、原型链等方面存在显著区别。以下是它们的主要区别：
1. 语法差异
-
普通函数：
function normalFunction(a, b) {return a + b; }或者使用函数表达式：
const normalFunction = function(a, b) {return a + b; }; -
箭头函数：
const arrowFunction = (a, b) => {return a + b; };如果箭头函数体只有一条语句，可以省略大括号并自动返回结果：
const arrowFunction = (a, b) => a + b;
2. this 的处理方式
这是箭头函数和普通函数最重要的区别之一。
-
普通函数：
-
普通函数的
this是动态绑定的，取决于函数的调用方式：-
作为方法调用：
this指向调用它的对象。const obj = {
name: "Kimi",
greet: function() {
console.log(this.name); // 输出 "Kimi"
}
};
obj.greet(); -
作为普通函数调用：
this指向全局对象（非严格模式下是window或global，严格模式下是undefined）。
function greet() {
console.log(this);
}
greet(); // 非严格模式下输出 window，严格模式下输出 undefined -
使用
call、apply或bind： 可以手动绑定this。greet.call({ name: "Kimi" }); // 输出 { name: "Kimi" }
-
-
-
箭头函数：
-
箭头函数没有自己的
this，它会捕获其所在上下文的this值，并在函数内部使用。 -
箭头函数的
this是在定义时就确定的，不会随着调用方式改变。
const obj = {
name: "Kimi",
greet: () => {
console.log(this.name); // 输出 undefined（因为箭头函数捕获了全局上下文的 this）
}
};
obj.greet();const normalGreet = function() {
console.log(this.name); // 输出 "Kimi"
};
const arrowGreet = () => {
console.log(this.name); // 输出 undefined
};normalGreet.call({ name: "Kimi" }); // 输出 "Kimi"
arrowGreet.call({ name: "Kimi" }); // 输出 undefined -
3. arguments 对象
-
普通函数：
-
普通函数内部可以访问
arguments对象，它是一个类数组对象，包含函数调用时传入的所有参数。
function sum() {
console.log(arguments); // 类数组对象，包含所有参数
return Array.from(arguments).reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 输出 6 -
-
箭头函数：
-
箭头函数不绑定自己的
arguments对象，只能通过参数名访问参数。
const sum = (...args) => {
console.log(arguments); // ReferenceError: arguments is not defined
return args.reduce((a, b) => a + b, 0);
};
console.log(sum(1, 2, 3)); // 输出 6 -
4. new 调用
-
普通函数：
-
普通函数可以用
new关键字创建一个新的实例对象。
function Person(name) {
this.name = name;
}
const person = new Person("Kimi");
console.log(person); // 输出 { name: "Kimi" } -
-
箭头函数：
-
箭头函数不能用
new关键字调用，否则会抛出错误。
const Person = (name) => {
this.name = name;
};
const person = new Person("Kimi"); // TypeError: Person is not a constructor -
5. 原型链
-
普通函数：
-
普通函数有
prototype属性，可以用于原型链继承。
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const person = new Person("Kimi");
person.greet(); // 输出 "Hello, my name is Kimi" -
-
箭头函数：
-
箭头函数没有
prototype属性，因此不能用于原型链继承。
const Person = (name) => {
this.name = name;
};
console.log(Person.prototype); // undefined -
6. 使用场景
-
普通函数：
-
适用于需要动态绑定
this的场景，例如作为方法调用、事件处理器、构造函数等。 -
适用于需要访问
arguments对象的场景。
-
-
箭头函数：
-
适用于不需要动态绑定
this的场景，例如回调函数、匿名函数等。 -
适用于需要简洁语法的场景，尤其是只有一条语句时。
-
总结
-
普通函数：
-
有自己的
this，动态绑定。 -
有
arguments对象。 -
可以用
new调用。 -
有
prototype属性。 -
语法稍显复杂。
-
-
箭头函数：
-
没有自己的
this，捕获定义时的上下文。 -
没有
arguments对象。 -
不能用
new调用。 -
没有
prototype属性。 -
语法简洁。
-
根据实际需求选择合适的函数类型可以提高代码的可读性和效率。
