箭头函数和普通函数在JavaScript中有一些重要的区别。下面我们将详细讨论这些区别，并提供代码示例。
1、语法差异：箭头函数的语法更简洁。它们不需要使用function关键字，也不需要指定参数列表的圆括号，如果函数体只有一条语句，甚至不需要大括号。
普通函数：
function add(a, b) { return a + b; }
箭头函数：
const add = (a, b) => a + b;
2、this关键字的绑定：普通函数中的this值是在函数被调用时决定的，而箭头函数不会创建自己的this上下文，它会捕获其所在上下文的this值。
function Person() { this.age = 21; this.showAge = function() { console.log(this.age); } this.showAgeInArrow = () => { console.log(this.age); } } const person = new Person(); const { showAge, showAgeInArrow } = person; showAge(); // 输出 21 showAgeInArrow(); // 输出 21
在上述代码中，尽管showAge和showAgeInArrow都是在全局作用域中被调用的，但是showAgeInArrow仍然能够正确地访问person对象的age属性，因为它是在Person构造函数的作用域中定义的，所以它捕获了那个作用域的this值。
3、不能用作构造函数：箭头函数不能用作构造函数，也就是说，它们不能通过new关键字来调用。
const MyArrowFunc = () => {}; const instance = new MyArrowFunc(); // TypeError: MyArrowFunc is not a constructor
4、没有prototype属性：箭头函数没有prototype属性。
const MyArrowFunc = () => {}; console.log(MyArrowFunc.prototype); // undefined
5、没有arguments对象：箭头函数没有自己的arguments对象。如果需要访问arguments对象，它必须是从包围的函数中捕获的。
function regularFunc() { console.log(arguments); } const arrowFunc = () => { console.log(arguments); // ReferenceError: arguments is not defined } regularFunc(1, 2, 3); // 输出 [1, 2, 3] arrowFunc(1, 2, 3); // 报错
6、不能使用yield关键字：箭头函数不能使用yield关键字，因此不能用作生成器函数。
const MyArrowGenerator = () => { yield 1; // SyntaxError: Generator function must be defined with function* };
这些是箭头函数和普通函数之间的一些主要区别。在编写代码时，选择使用哪种类型的函数通常取决于你的具体需求和你希望如何处理this上下文、错误处理、代码可读性等问题。
