箭头函数与普通函数有何异同？

箭头函数与普通函数的异同

箭头函数和普通函数是 JavaScript 中两种常见的函数定义方式。它们在语法上有一些差异，并且在使用场景和行为方面也存在一些不同之处。下面我们来一起探讨一下箭头函数与普通函数的异同。

1. 语法差异

箭头函数使用 "=>" 符号来定义，并且省略了 function 关键字。它的基本形式是：(参数) => { 函数体 }

而普通函数则使用 function 关键字来定义，并且需要写出具体的函数名。它的基本形式是：function 函数名(参数) { 函数体 }

2. 函数体

在箭头函数中，如果函数体只有一条语句，可以省略花括号及 return 关键字，直接返回该语句的结果。例如：

let square = (num) => num * num;
console.log(square(5)); // 输出：25

而在普通函数中，即使只有一条语句，也需要将它写在花括号内，并且使用 return 关键字显式地返回结果。例如：

function square(num) {
  return num * num;
}
console.log(square(5)); // 输出：25

3. 作用域

箭头函数没有自己的 this，它会继承外层作用域的 this 值。这使得箭头函数更适合在事件处理、回调函数等场景中使用。例如：

let obj = {
  value: 10,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value);
    }, 1000);
  }
};
obj.getValue(); // 输出：10

在上面的例子中，箭头函数继承了 obj 对象的 this 值，所以 this.value 输出了正确的结果。

而普通函数中的 this 值在每次调用时都会被重新绑定，它的具体取值由调用时的上下文确定。

4. arguments 对象

箭头函数没有自己的 arguments 对象，不能直接使用 arguments 来获取函数的参数列表。可以使用 rest 参数的形式来替代。例如：

let sum = (...nums) => {
  let result = 0;
  for (let num of nums) {
    result += num;
  }
  return result;
};
console.log(sum(1, 2, 3)); // 输出：6

而普通函数可以直接使用 arguments 对象来访问参数列表。例如：

function sum() {
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}
console.log(sum(1, 2, 3)); // 输出：6

5. 用途

由于箭头函数具有更简洁的语法和自动绑定 this 的特性，它在某些场景下更加方便和可读。例如：

• 单行函数或表达式的情况下，可以使用箭头函数来简化代码。
• 无需绑定 this 值的函数（如事件处理函数）可以使用箭头函数来避免 this 指向错误。

而普通函数则更加灵活，可以根据需要随时创建、命名和调用。

总之，箭头函数是 ES6 引入的新特性，在某些场景下可以替代普通函数，提供更简洁和直观的写法，同时也需要注意它的一些限制和适用条件。