普通函数与箭头函数的区别，到底在哪里？

理解普通函数和箭头函数之间的差异对任何 JavaScript 开发人员来说都至关重要。普通函数和箭头函数都是定义函数的两种方式，但在语法和行为上存在一些关键差异。

1. 函数语法

普通函数使用 function 定义，例如：

function sayHello() {
  console.log("Hello, world!");
}

箭头函数使用 => 符号定义，例如：

const sayHello = () => {
  console.log("Hello, world!");
};

如你所见，箭头函数的语法更加简洁。它们不需要使用 function 关键字，并且可以省略大括号和 return 关键字。

2. 作用域

普通函数的 this 关键字指向函数被调用的对象，而箭头函数的 this 关键字总是指向定义箭头函数的作用域。

例如，以下代码中，普通函数的 this 关键字指向 window 对象，而箭头函数的 this 关键字指向包含它的对象：

const obj = {
  name: "John Doe",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
  sayHelloArrow: () => {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

obj.sayHello(); // Output: "Hello, my name is John Doe."
obj.sayHelloArrow(); // Output: "Hello, my name is undefined."

3. 参数

普通函数和箭头函数都可以接受参数。普通函数的参数使用圆括号括起来，例如：

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

箭头函数的参数使用圆括号或小括号括起来，例如：

const sum = (a, b) => {
  return a + b;
};

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

4. 返回值

普通函数和箭头函数都可以返回一个值。普通函数使用 return 关键字返回一个值，例如：

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

箭头函数可以使用 return 关键字或隐式返回一个值。如果箭头函数只有一行代码，则可以省略 return 关键字，例如：

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

5. 应用

普通函数和箭头函数都可以用于各种场景。然而，箭头函数在某些情况下更受欢迎。例如，箭头函数经常用于回调函数和事件处理程序。

结论

普通函数和箭头函数都是定义函数的两种有效方式。然而，箭头函数在某些情况下更受欢迎，例如回调函数和事件处理程序。