箭头函数和普通函数的区别

箭头函数和普通函数的主要区别在于它们的语法和作用域。

1. 语法：箭头函数使用 `=>` 符号来定义函数，而普通函数使用 `function` 关键字来定义函数。

例如，箭头函数可以这样定义：

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

而普通函数可以这样定义：

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

2. 作用域：箭头函数没有自己的作用域，它会继承它所在上下文的作用域。而普通函数有自己的作用域。

例如，下面的代码中，箭头函数 `printPersonArrow` 继承了它所在上下文的 `person` 变量：

const person = { 
  name: "Alice",
  age: 25,
  printPersonArrow: () => { 
    console.log(this.name, this.age); 
  },
  printPerson: function() { 
    console.log(this.name, this.age); 
  }
};

person.printPersonArrow(); // 输出 undefined undefined
person.printPerson(); // 输出 Alice 25

在箭头函数中，`this` 指向的是它所在上下文的 `this`，而不是函数自身的 `this`。所以，`printPersonArrow` 输出了 `undefined undefined`，因为它所在上下文的 `this` 是全局对象。

总之，箭头函数和普通函数都可以完成相同的任务，但是在语法和作用域上有所不同。在使用时需要根据实际情况进行选择。