前端面试必读：24个JavaScript箭头函数与普通函数的区别

1. 语法形式不同

箭头函数的语法形式更加简洁明了，它省略了function和return关键字。例如：

普通函数：

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

箭头函数：

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

2. 作用域不同

普通函数的this指向由调用它的上下文决定，而箭头函数的this指向由其定义时的上下文决定。例如：

普通函数：

const obj = {
  name: 'John',
  getName: function() {
    return this.name;
  }
};

console.log(obj.getName()); // "John"

箭头函数：

const obj = {
  name: 'John',
  getName: () => {
    return this.name;
  }
};

console.log(obj.getName()); // undefined

3. 参数处理方式不同

箭头函数的参数处理方式与普通函数相同，支持默认参数、扩展运算符和解构赋值等。例如：

普通函数：

function 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, 5)); // 15

箭头函数：

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, 5)); // 15

4. 适用场景不同

普通函数和箭头函数都有各自适用的场景，一般来说，当需要定义一个简单的函数时，可以使用箭头函数，因为它语法更加简洁，更易阅读。而当需要定义一个复杂函数时，可以使用普通函数，因为它可以更好地控制this指向和参数处理。

以下是一些箭头函数的典型适用场景：

• 作为回调函数：箭头函数可以作为回调函数使用，因为它们的this指向不会被改变，这使得它们非常适合用于事件处理和异步编程。
• 作为高阶函数的参数：箭头函数可以作为高阶函数的参数使用，因为它们可以简化代码并提高可读性。
• 作为对象的属性：箭头函数可以作为对象的属性使用，因为它们的this指向与对象本身一致，这使得它们非常适合用于创建方法和getter/setter。

以下是一些普通函数的典型适用场景：

• 定义构造函数：普通函数可以作为构造函数使用，因为它们可以控制this指向，这使得它们非常适合用于创建类和对象。
• 定义原型方法：普通函数可以作为原型方法使用，因为它们的this指向指向该实例，这使得它们非常适合用于创建实例方法。
• 定义带命名的函数：普通函数可以定义带命名的函数，这使得它们更容易被调用和调试。

5. 箭头函数的注意事项

在使用箭头函数时，需要注意以下几点：

• 箭头函数不能使用arguments对象：箭头函数没有arguments对象，因此无法访问函数的参数列表。
• 箭头函数不能使用yield箭头函数不能使用yield关键字，因此无法用于生成器函数。
• 箭头函数不能使用new关键字：箭头函数不能使用new关键字，因此无法用于创建对象。

结论

箭头函数和普通函数都是JavaScript中常用的函数类型，它们各有优缺点，适用于不同的场景。在开发中，应根据具体的需求选择合适的函数类型，以编写出更简洁、更易维护的代码。