普通函数和箭头函数在JavaScript中都是用来定义函数的方法，但它们在语法简洁性、this绑定机制、构造函数能力、使用arguments对象、适用场景等方面存在不同。普通函数是传统的JavaScript函数定义方式，也称为函数声明或函数表达式。它使用关键字function，可以具有一个名称（也可以是匿名的），并允许在函数体内部访问this关键字、使用arguments对象、被new操作符调用以构造对象。箭头函数则是在ES6中新增的，使用箭头（=>）的简洁语法来写。箭头函数不创建自己的this值，而是捕获其所在上下文的this值，因此它在回调函数和方法链中尤其有用。它不能作为构造函数，也不提供arguments对象。
接下来我们会详细解析这些区别，并讨论它们在日常编程中的具体应用场景。
一、语法简洁性
箭头函数提供了更简洁的语法来定义函数。它不使用function关键字，而是将参数和函数体通过箭头（=>）连接起来。如果只有一个参数且不需要编写函数体（即直接返回一个表达式的结果时），甚至可以省略参数周围的括号以及函数体周围的花括号和return语句。
普通函数例子:
function add(a, b) {
return a + b;
}
箭头函数例子:
const add = (a, b) => a + b;
二、this绑定机制
箭头函数不绑定自己的this，它会捕获其所在（定义时的）上下文的this值作为自己的this值。这与普通函数不同，普通函数的this值通常取决于函数的调用方式。
在对象方法中，如果一个方法是用普通函数定义的，那么当这个方法被调用时，this通常指向调用该方法的对象。然而，如果在方法内部有一个内嵌的函数（例如一个回调函数），这个内嵌的普通函数不会自动继承方法的this绑定，除非使用.bind(this)、一个闭包，或者一个变量来手动绑定。
相比之下，如果使用箭头函数来定义一个内嵌函数，this会自然继承，因为箭头函数在这方面没有自己的绑定。
三、构造函数能力
普通函数可以用作构造函数，可以与new一起使用创建新的实例。然而，箭头函数不能用作构造函数。如果尝试通过new调用箭头函数，将会抛出一个错误。
当需要创建一个具有属性和方法的对象，并希望建立一个新的原型链时，应当使用普通函数。箭头函数由于缺乏构造函数的能力，在这种场景下不适宜使用。
四、使用arguments对象
在普通函数中，可以使用arguments对象来访问传递给函数的所有参数。这在参数数量不确定或者要操作参数列表时非常有用。然而，在箭头函数中，没有arguments绑定。想要在箭头函数中以类似方式访问参数，可以使用剩余参数语法（…args）来完成。
深入探讨arguments对象的应用，我们可以处理各种参数相关的需求，比如编写一个函数，它可以接收任意数量的输入值，并返回它们的总和。使用普通函数，我们可能会这样写：
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
对应的箭头函数使用剩余参数语法可以这样写：
const sum = (...args) => args.reduce((total, current) => total + current, 0);
五、适用场景
箭头函数由于this的绑定特性，使得它非常适合用作回调函数，尤其是在高阶函数中，比如map、filter和reduce。在这些已经定义了执行上下文的场合下，箭头函数无需担心this的指向问题。它们也非常适合在事件处理器和异步代码（比如Promises或async/awAIt）中使用。
总结一句，箭头函数是对传统普通函数的补充，提供更灵活的语法和更直观的this行为，为JavaScript开发者带来极大的便利。
相关问答FAQs：
1. 普通函数和箭头函数在语法上有何区别？
普通函数使用 function 关键字声明，箭头函数使用 => 符号声明。
2. 普通函数和箭头函数对 this 关键字的处理方式有何不同？
普通函数中的 this 关键字指向函数被调用时的上下文，而箭头函数中的 this 关键字指向函数定义时的上下文。
3. 普通函数和箭头函数适用的场景有哪些差异？
普通函数更适用于作为构造函数、方法或事件处理函数，因为它们具有自己的 this 值。而箭头函数则适用于简短的回调函数或者需要继承父级作用域的场景，因为它们不绑定自己的 this 值。
