面试题之箭头函数和普通函数有什么区别？

箭头函数（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 属性。

语法简洁。

根据实际需求选择合适的函数类型可以提高代码的可读性和效率。