箭头函数和普通函数有什么区别

箭头函数和普通函数有以下区别：一、语法表达不同；二、this的绑定机制不同；三、arguments对象不同；四、适用场景不同。语法表达不同在于，相比普通函数，箭头函数更加简洁，省略了function关键字和部分语法元素。

一、语法结构的不同

普通函数使用function关键字声明，后跟函数名、参数列表和函数体。而箭头函数使用箭头(=>)来定义函数，箭头函数省略了function关键字以及函数体中的return关键字（在某些情况下）。

普通函数的语法结构示例：

function add(a, b) {
  return a + b;
}

箭头函数的语法结构示例：

const add = (a, b) => a + b;

二、this的绑定机制不同

在普通函数中，this的值是在运行时动态确定的，它的指向取决于函数被调用的方式。而箭头函数具有词法作用域的特性，它会继承外层作用域的this值，因此箭头函数中的this指向的是定义时的作用域。

普通函数中this的绑定机制示例：

const obj = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const greetFunc = obj.greet;
greetFunc(); // 输出：Hello, undefined

在上述例子中，当将obj对象中的greet方法赋值给greetFunc后，greetFunc中的this已经不再指向obj对象，而是指向全局作用域（即window对象）。因此在调用greetFunc时，this.name的值为undefined。

箭头函数中this的绑定机制示例：

const obj = {
  name: 'Alice',
  greet: function() {
    const greetArrow = () => {
      console.log('Hello, ' + this.name);
    };
    greetArrow();
  }
};

obj.greet(); // 输出：Hello, Alice

在上述例子中，箭头函数greetArrow继承了外层作用域（即greet方法）的this值，所以在箭头函数中使用this.name时，它指向的是obj对象中的name属性。

三、arguments对象的不同

在普通函数中，可以使用arguments对象访问传递给函数的所有参数。但是在箭头函数中，arguments对象不可用，取而代之的是使用剩余参数(rest parameters)来获取所有参数的值。

普通函数使用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, 4)); // 输出：10

箭头函数使用剩余参数示例：

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, 4)); // 输出：10

在上述例子中，普通函数sum使用arguments对象遍历了传递给函数的所有参数并计算它们的总和。而箭头函数sum使用了剩余参数语法(…args)，将所有参数打包成一个数组args，然后可以直接对args进行遍历和计算。

四、适用场景的不同

由于箭头函数和普通函数具有不同的特性和行为，它们在不同的场景中有着不同的适用性。

箭头函数适用的场景：

简短的函数表达式，例如回调函数、数组方法的参数函数等。
保留外层作用域的this值，避免this指向发生变化的问题。
函数体只有一条返回语句时，可以省略花括号和return关键字。

普通函数适用的场景：

需要动态确定this的值，或者需要使用call()、apply()和bind()等方法来更改this的值。
需要使用arguments对象来访问传递给函数的参数。
作为构造函数创建对象实例。

本文逐条介绍了箭头函数与普通函数之间的不同点，以便更好地理解它们的特性和适用场景。箭头函数更加简洁，省略了function关键字和部分语法元素，并且继承外层作用域的this值，方便在回调函数等场景中使用。普通函数拥有更大的灵活性，可以根据运行时的情况动态确定this的值，并且可以使用arguments对象访问所有传递给函数的参数。根据具体的使用场景和需求，我们可以选择合适的函数类型来编写代码。

延伸阅读1：使用箭头函数应该注意什么

箭头函数是JavaScript中的一种特殊函数语法，它具有简洁的语法和特定的行为。虽然箭头函数在许多场景下非常有用，但在使用它们时需要注意以下几点：

一、缺乏自己的this绑定

箭头函数没有自己的this绑定，它会继承外层作用域的this值。因此，在使用箭头函数之前，确保了解当前代码块中的this是什么，并且这个继承的行为是否符合预期。

二、不能作为构造函数

箭头函数不能用作构造函数来创建新的对象实例。如果尝试使用new关键字调用箭头函数，会抛出一个TypeError错误。因此，在需要使用构造函数的情况下，请使用普通函数来确保功能的正确性。

三、不能使用arguments对象

箭头函数没有自己的arguments对象。它使用剩余参数语法（…args）来获取函数的参数。如果需要在函数体内访问所有传递给函数的参数，请使用剩余参数语法来替代arguments对象。

四、适用于简短的函数体

箭头函数适用于函数体比较简短的情况。如果函数体较长或复杂，较好使用普通函数，以提高代码的可读性和可维护性。

五、无法更改this的值

由于箭头函数没有自己的this绑定，因此无法使用call()、apply()和bind()等方法来显式地更改this的值。如果需要动态确定this的值，或者需要更改this，则应使用普通函数。