在 JavaScript 中，有两种主要的函数编写方式。您可以使用常规函数语法创建函数。或者，您可以使用箭头函数语法。
在本文中，您将学习如何使用这两个选项。您还将了解两者之间的区别以及何时适合使用它们。
要了解这两个选项之间的区别，让我们从查看它们的语法开始。
常规函数语法
在 JavaScript 中声明函数的常用方法是使用关键字。下面是一个示例：function
function sayHello(name) {
return 'Hello ' + name}
若要从常规函数返回值，必须显式使用关键字。否则，该函数将返回 .returnundefined
箭头函数语法
箭头函数是在 ECMAScript 6 （ES6） 中引入的。它们为您提供了一种在 JavaScript 中定义函数的更简洁的方法。
使用上一个示例中的相同函数，让我们看看如何使用箭头函数语法创建它。sayHello
const sayHello = (name) => {
return 'Hello ' + name}
与常规函数不同，如果只有一个语句，如上面的例子，则不必使用显式返回。您可以像这样将函数写在一行上。
const sayHello = (name) => 'Hello ' + name
请注意，大括号也会被移除，以隐式返回表达式的结果。如果只有一个参数，您甚至可以删除括号。请参阅以下示例：
const sayHello = name => 'Hello ' + name
是函数采用的唯一参数。这意味着您可以从参数中删除括号，它仍然可以正常工作。name
如何访问传递给函数的参数
JavaScript 提供了一种访问传递给函数的所有参数的方法。但是，你处理这些参数的方式取决于你正在使用的函数类型。
如何使用常规函数访问参数
您可以使用该对象访问传递给常规函数的所有参数。该对象是一个类似数组的对象，它保存传递给函数的所有参数。argumentsarguments
例：
function logNumbers(num1, num2) {
console.log(arguments)}logNumbers(8, 24)
屏幕截图-2024-01-11-at-5.01.51-PMarguments 对象的日志结果
从日志结果中可以看出，该对象包含作为参数传递给函数的两个数字。argumentslogNumbers
如何使用箭头函数访问参数
该对象在箭头函数中不可用。如果您尝试在箭头函数中访问它，JavaScript 将抛出引用错误。arguments
const logNumbers = (num1, num2) => {
console.log(arguments)}logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined
若要访问传递给箭头函数的参数，可以使用 rest 参数语法 （）。...
例：
const logNumbers = (...args) => {
console.log(args)}logNumbers(8, 24)
屏幕截图-2024-01-11-at-11.13.39-PM记录箭头函数参数的结果
使用 rest 参数语法 （），您可以访问传递给函数的所有参数。...logNumbers
重复的命名参数
常规函数和箭头函数之间的另一个区别是它们如何处理命名参数中的重复项。
常规函数中的重复命名参数
当常规函数的参数中具有重复的名称时，具有重复名称的最后一个参数将优先。让我们看一个例子：
function exampleFunction(a, b, a) {
console.log(a, b)}exampleFunction("first", "second", "third")
屏幕截图-2024-01-12-at-9.50.00-AM记录命名重复参数的结果
在上面的示例中，参数会覆盖参数的值，因为最后一个重复参数是优先的参数。thirdfirst
但在“严格模式”下，使用重复的命名参数将导致语法错误。
"use strict"function exampleFunction(a, b, a) {
console.log(a, b)}exampleFunction("first", "second", "third")
屏幕截图-2024-01-12-at-10.29.11-AM严格模式不允许多次使用参数名称
箭头函数中的命名参数重复
箭头函数不允许在参数列表中多次使用相同的参数名称。这样做将导致语法错误。
例：
const exampleFunction = (a, b, a) => {
console.log(a, b)}exampleFunction("first", "second", "third")
屏幕截图-2024-01-12-at-10.29.11-AM-1箭头函数不允许重复的参数名称
功能吊装
在 JavaScript 中，提升是一种行为，在编译期间，在执行代码之前，变量和函数被移动到其包含范围的顶部。
在常规函数中托管
常规功能被吊到顶部。您甚至可以在它们被声明之前访问和调用它们。
regularFunction()function regularFunction() {
console.log("This is a regular function.")}
屏幕截图-2024-01-12-at-11.50.43-AM在声明常规函数之前记录调用常规函数的结果
以上是在声明常规函数之前调用该函数的示例。而且它工作正常，不会因为功能提升而抛出任何错误。
在箭头功能中提升
另一方面，箭头函数在初始化之前无法访问。
arrowFunction()const arrowFunction = () => {
console.log("This is an arrow function.")}
屏幕截图-2024-01-12-at-12.07.39-PM在声明箭头函数之前记录调用该函数的结果
与常规函数不同，尝试在声明箭头函数之前调用箭头函数将导致引用错误，如上面的输出所示。
如何处理函数中的绑定this
常规函数有自己的上下文。这是根据您调用或执行函数的方式动态确定的。this
另一方面，箭头函数没有自己的此上下文。相反，它们从创建箭头函数的周围词法上下文中捕获值。this
以下是使用常规函数和箭头函数的两种不同方案。您将看到上下文是如何确定的。this
1. 在简单函数调用期间设置值this
对于常规函数，一个简单的函数调用将值设置为对象（如果使用“严格模式”，则设置为）：thiswindowundefined
function myRegularFunction() {
console.log(this)}
myRegularFunction()
屏幕截图-2024-01-12-at-4.15.11-PM对窗口对象的常规函数集的简单调用this
"use strict"function myFunction() {
console.log(this)}
myFunction() // udefined
使用箭头函数时，无论您是否使用严格模式，简单的函数调用都会将值设置为周围的上下文。在下面的示例中，周围的上下文是全局窗口对象。this
const myArrowFunction = () => {
console.log(this);};myArrowFunction()
屏幕截图-2024-01-12-at-4.15.11-PM-1对窗口对象的箭头函数集的简单调用this
2. 在对象上调用或调用方法时
调用值为正则函数的方法时，该值将设置为调用该方法的对象。但是，当方法的值是箭头函数时，该值将设置为全局窗口对象。thisthis
const myObject = {
regularExample: function() {
console.log("REGULAR: ", this)
},
arrowExample: () => {
console.log("ARROW: ", this)
}}
myObject.regularExample()myObject.arrowExample()
屏幕截图-2024-01-12-at-5.46.04-PM具有常规函数的方法和具有箭头函数的方法的日志结果
虽然具有常规函数的方法将对象记录到控制台，但具有箭头函数的方法则记录全局窗口对象。
如何使用函数作为构造函数
对于常规函数，您可以使用关键字创建新实例。这会将值设置为您创建的新实例。newthis
对于箭头函数，不能将它们用作构造函数。这是因为箭头函数的值是词法范围的，即由周围的执行上下文确定。这种行为使它们不适合用作构造函数。this
下面是一个示例：
function RegularFuncBird(name, color) {
this.name = name this.species = color
console.log(this)}const ArrowFuncBird = (name, color) => {
this.name = name this.color = color
console.log(this)}new RegularFuncBird("Parrot", "blue") new ArrowFuncBird("Parrot", "blue")
屏幕截图-2024-01-12-at-5.53.17-PM尝试使用常规函数和箭头函数作为构造函数的日志结果
构造函数可以很好地处理关键字，但会导致类型错误。RegularFuncBirdnewArrowFuncBird
那么你应该使用哪一个呢？
对此没有直接的答案。您使用常规函数还是箭头函数取决于具体的用例。
建议在以下任何一种情况下使用常规函数：
当您需要使用带有关键字的构造函数时new
当需要动态作用域绑定时this
当您想要使用对象时arguments
您可以在以下任何情况下使用箭头函数：
当您想要更简洁的函数语法时
当您需要维护this
对于非方法函数（在大多数情况下）
正如您从本文中了解到的，两者都是在 JavaScript 中定义函数的有效方法。请记住，在它们之间进行选择并不总是个人喜好的问题。相反，它取决于您期望从函数中获得的行为类型。