了解JavaScript中的箭头函数

不念不忘少年蓝@ 2022-11-28 15:23 307阅读 0赞

*The author selected the [COVID-19 Relief Fund][] to receive a donation as part of the [Write for DOnations][] program.*

*作者选择了[COVID-19救济基金][COVID-19 Relief Fund]来接受捐赠，这是[Write for DOnations][]计划的一部分。*

### 介绍 **(**Introduction**)** ###

The [2015 edition of the ECMAScript specification (ES6)][2015 edition of the ECMAScript specification _ES6] added *arrow function expressions* to the [JavaScript][] language. Arrow functions are a new way to write anonymous function expressions, and are similar to [lambda functions][] in some other programming languages, such as [Python][].

[2015年版ECMAScript规范(ES6)][2015 edition of the ECMAScript specification _ES6]向[JavaScript][]语言添加了*箭头函数表达式* 。 箭头函数是一种编写匿名函数表达式的新方法，类似于某些其他编程语言(例如[Python)中的][Python] [lambda函数][lambda functions] 。

Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed. Because of this, arrow functions are particularly useful when passing a function as a parameter to a higher-order function, such as when you are looping over an [array][] with [built-in iterator methods][]. Their syntactic abbreviation can also allow you to improve the readability of your code.

箭头函数在许多方面与传统函数不同，包括确定其范围的方式以及如何表达其语法。 因此，在将函数作为参数传递给高阶函数时(例如，使用[内置迭代器方法][built-in iterator methods]遍历[数组][array]时)，箭头函数特别有用。 它们的语法缩写也可以使您提高代码的可读性。

In this article, you will review function declarations and expressions, learn about the differences between traditional function expressions and arrow function expressions, learn about lexical scope as it pertains to arrow functions, and explore some of the syntactic shorthand permitted with arrow functions.

在本文中，您将复习函数声明和表达式，了解传统函数表达式和箭头函数表达式之间的区别，了解与箭头函数有关的词法范围，并探索一些箭头函数允许的语法速记。

## 定义功能 **(**Defining Functions**)** ##

Before delving into the specifics of arrow function expressions, this tutorial will briefly review traditional JavaScript functions in order to better show the unique aspects of arrow functions later on.

在深入研究箭头函数表达式的细节之前，本教程将简要回顾传统JavaScript函数，以便在以后更好地显示箭头函数的独特方面。

The [How To Define Functions in JavaScript][] tutorial earlier in this series introduced the concept of *function declarations* and *function expressions*. A function declaration is a named function written with the `function` keyword. Function declarations load into the execution context before any code runs. This is known as *hoisting*, meaning you can use the function before you declare it.

本系列前面的“ [如何在JavaScript中定义函数”][How To Define Functions in JavaScript]教程介绍了*函数声明*和*函数表达式*的概念。 函数声明是使用`function`关键字编写的命名函数。 在任何代码运行之前，函数声明会加载到执行上下文中。 这称为*提升* ，意味着可以在声明函数之前使用它。

Here is an example of a `sum` function that returns the sum of two parameters:

这是一个`sum`函数的示例，该函数返回两个参数的和：

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

You can execute the `sum` function before declaring the function due to hoisting:

由于吊起，可以在声明函数之前执行`sum`函数：

sum(1, 2)
    
    function sum(a, b) {
      return a + b
    }

Running this code would give the following output:

运行此代码将给出以下输出：

Output 3

You can find the name of the function by logging the function itself:

您可以通过记录函数本身来找到函数的名称：

console.log(sum)

This will return the function, along with its name:

这将返回函数及其名称：

Output ƒ sum(a, b) {
      return a + b
    }

A function expression is a function that is not pre-loaded into the execution context, and only runs when the code encounters it. Function expressions are usually assigned to a variable, and can be *anonymous*, meaning the function has no name.

函数表达式是未预加载到执行上下文中的函数，仅在代码遇到该函数时才运行。 函数表达式通常分配给变量，并且可以是*匿名的* ，这意味着函数没有名称。

In this example, write the same `sum` function as an anonymous function expression:

在此示例中，编写与匿名函数表达式相同的`sum`函数：

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

You’ve now assigned the anonymous function to the `sum` constant. Attempting to execute the function before it is declared will result in an error:

现在，您已将匿名函数分配给`sum`常量。 尝试在声明函数之前执行该函数将导致错误：

sum(1, 2)
    
    const sum = function (a, b) {
      return a + b
    }

Running this will give:

运行此命令将得到：

Output Uncaught ReferenceError: Cannot access 'sum' before initialization

Also, note that the function does not have a named identifier. To illustrate this, write the same anonymous function assigned to `sum`, then log `sum` to the console:

另外，请注意，该函数没有命名标识符。 为了说明这一点，写分配到同一个匿名函数`sum` ，然后登录`sum`控制台：

const sum = function (a, b) {
      return a + b
    }
    
    console.log(sum)

This will show you the following:

这将显示以下内容：

Output ƒ (a, b) {
      return a + b
    }

The value of `sum` is an anonymous function, not a named function.

`sum`的值是一个匿名函数，而不是一个命名函数。

You can name function expressions written with the `function` keyword, but this is not popular in practice. One reason you might want to name a function expression is to make error stack traces easier to debug.

您可以命名用`function`关键字编写的函数表达式，但这在实践中并不流行。 您可能要命名函数表达式的一个原因是使错误堆栈跟踪更易于调试。

Consider the following function, which uses an [`if` statement][if_ statement] to throw an error if the function parameters are missing:

考虑以下函数， [`if`][if_ statement]缺少函数参数，该函数将使用[`if`语句][if_ statement]引发错误：

const sum = function namedSumFunction(a, b) {
      if (!a || !b) throw new Error('Parameters are required.')
    
      return a + b
    }
    
    sum();

The highlighted section gives the function a name, and then the function uses the **or** `||` operator to throw an error [object][] if either of the parameters is missing.

突出显示的部分为函数命名，然后函数使用**或** `||` 如果缺少任何一个参数，运算符将引发错误[对象][object] 。

Running this code will give you the following:

运行此代码将为您提供以下内容：

Output Uncaught Error: Parameters are required.
        at namedSumFunction (<anonymous>:3:23)
        at <anonymous>:1:1

In this case, naming the function gives you a quick idea of where the error is.

在这种情况下，命名功能可以使您快速了解错误的位置。

An [*arrow function expression*][arrow function expression] is an anonymous function expression written with the “fat arrow” syntax (`=>`).

[*箭头函数表达式*][arrow function expression]是使用“胖箭头”语法( `=>` )编写的匿名函数表达式。

Rewrite the `sum` function with arrow function syntax:

用箭头函数语法重写`sum`函数：

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

Like traditional function expressions, arrow functions are not hoisted, and so you cannot call them before you declare them. They are also always anonymous—there is no way to name an arrow function. In the next section, you will explore more of the syntactical and practical differences between arrow functions and traditional functions.

像传统的函数表达式一样，箭头函数不会被吊起，因此在声明它们之前不能调用它们。 它们也始终是匿名的-无法命名箭头函数。 在下一节中，您将探索箭头功能与传统功能之间在语法和实践上的更多差异。

## 箭头功能行为和语法 **(**Arrow Function Behavior and Syntax**)** ##

Arrow functions have a few important distinctions in how they work that distinguish them from traditional functions, as well as a few syntactic enhancements. The biggest functional differences are that arrow functions do not have their own `this` binding or prototype and cannot be used as a constructor. Arrow functions can also be written as a more compact alternative to traditional functions, as they grant the ability to omit parentheses around parameters and add the concept of a concise function body with implicit return.

箭头功能在工作方式上有一些重要区别，这些区别使其与传统功能有所不同，并且在语法上进行了一些增强。 最大的功能性区别是箭头的功能没有自己的`this`结合或原型，不能用作构造函数。 箭头函数也可以写为传统函数的更紧凑的替代方案，因为它们可以省略参数周围的括号并添加具有隐式返回的简洁函数体的概念。

In this section, you will go through examples that illustrate each of these cases.

在本节中，您将通过示例说明每种情况。

### 词汇`this` **(**Lexical `this`**)** ###

The keyword `this` is often considered a tricky topic in JavaScript. The article [Understanding This, Bind, Call, and Apply in JavaScript][Understanding This_ Bind_ Call_ and Apply in JavaScript] explains how `this` works, and how `this` can be implicitly inferred based on whether the program uses it in the global context, as a method within an object, as a constructor on a function or class, or as a [DOM][] event handler.

关键字`this`在JavaScript中通常被认为是一个棘手的话题。 文章[了解这一点，绑定，呼叫，并在JavaScript应用][Understanding This_ Bind_ Call_ and Apply in JavaScript]解释如何`this`工作，以及如何`this`可以隐式推断基于程序是否使用它在全球范围内，作为一个对象中的方法，作为一个功能的构造或类，或作为[DOM][]事件处理程序。

Arrow functions have *lexical `this`*, meaning the value of `this` is determined by the surrounding scope (the lexical environment).

箭头函数具有*词法`this`* ，意的值`this`是通过周边范围(词法环境)测定。

The next example will demonstrate the difference between how traditional and arrow functions handle `this`. In the following `printNumbers` object, there are two properties: `phrase` and `numbers`. There is also a method on the object, `loop`, which should print the `phrase` string and the current value in `numbers`:

下一个示例将演示传统函数和箭头函数处理`this`的区别。 在以下`printNumbers`对象中，有两个属性： `phrase`和`numbers` 。 在对象`loop`上还有一个方法，该方法应该以`numbers`打印`phrase`字符串和当前值：

const printNumbers = {
      phrase: 'The current value is:',
      numbers: [1, 2, 3, 4],
    
      loop() {
        this.numbers.forEach(function (number) {
          console.log(this.phrase, number)
        })
      },
    }

One might expect the `loop` function to print the string and current number in the loop on each iteraton. However, in the result of running the function the `phrase` is actually `undefined`:

可能希望`loop`函数在每个iteraton上的`loop`中打印字符串和当前数字。 但是，在运行函数的结果中，该`phrase`实际上是`undefined` ：

printNumbers.loop()

This will give the following:

这将给出以下内容：

Output undefined 1
    undefined 2
    undefined 3
    undefined 4

As this shows, `this.phrase` is undefined, indicating that `this` within the anonymous function passed into the [`forEach` method][forEach_ method] does not refer to the `printNumbers` object. This is because a traditional function will not determine its `this` value from the scope of the environment, which is the `printNumbers` object.

作为该显示， `this.phrase`是未定义的，表明`this`传递到匿名函数内[`forEach`方法][forEach_ method]并不指`printNumbers`对象。 这是因为传统函数不会从环境范围(即`printNumbers`对象)确定`this`值。

In older versions of JavaScript, you would have had to use the `bind` method, which explicitly sets `this`. This pattern can be found often in some earlier versions of frameworks, like [React][], before the advent of ES6.

在旧版JavaScript中，您将不得不使用`bind`方法，该方法显式设置`this` 。 这种模式通常可以在ES6出现之前的一些早期版本的框架中找到，例如[React][] 。

Use `bind` to fix the function:

使用`bind`修复功能：

const printNumbers = {
      phrase: 'The current value is:',
      numbers: [1, 2, 3, 4],
    
      loop() {
        // Bind the `this` from printNumbers to the inner forEach function
        this.numbers.forEach(
          function (number) {
            console.log(this.phrase, number)
          }.bind(this),
        )
      },
    }
    
    printNumbers.loop()

This will give the expected result:

这将得到预期的结果：

Output The current value is: 1
    The current value is: 2
    The current value is: 3
    The current value is: 4

Arrow functions provide a more direct way of dealing with this. Since their `this` value is determined based on the lexical scope, the inner function called in `forEach` can now access the properties of the outer `printNumbers` object, as demonstrated:

箭头函数提供了一种更直接的方式来处理此问题。 由于`this`值是根据词法范围确定的，因此在`forEach`调用的内部函数现在可以访问外部`printNumbers`对象的属性，如所示：

const printNumbers = {
      phrase: 'The current value is:',
      numbers: [1, 2, 3, 4],
    
      loop() {
        this.numbers.forEach((number) => {
          console.log(this.phrase, number)
        })
      },
    }
    
    printNumbers.loop()

This will give the expected result:

这将得到预期的结果：

Output The current value is: 1
    The current value is: 2
    The current value is: 3
    The current value is: 4

These examples establish that using arrow functions in built-in array methods like [`forEach`][forEach_ method], [`map`][map], [`filter`][filter], and [`reduce`][reduce] can be more intuitive and easier to read, making this strategy more likely to fulfill expectations.

这些示例证明，在内置数组方法(例如[`forEach`][forEach_ method] ， [`map`][map] ， [`filter`][filter]和[`reduce`][reduce]中使用箭头函数可以更直观，更易于阅读，从而使该策略更有可能满足期望。

### 箭头功能用作对象方法 **(**Arrow Functions as Object Methods**)** ###

While arrow functions are excellent as parameter functions passed into array methods, they are not effective as object methods because of the way they use lexical scoping for `this`. Using the same example as before, take the `loop` method and turn it into an arrow function to discover how it will execute:

尽管箭头函数非常适合作为传递给数组方法的参数函数使用，但由于它们`this`使用词法作用域的方式，因此它们不能有效地用作对象方法。 使用与之前相同的示例，采用`loop`方法并将其转换为箭头函数以发现其执行方式：

const printNumbers = {
      phrase: 'The current value is:',
      numbers: [1, 2, 3, 4],
    
      loop: () => {
        this.numbers.forEach((number) => {
          console.log(this.phrase, number)
        })
      },
    }

In this case of an object method, `this` should refer to properties and methods of the `printNumbers` object. However, since an object does not create a new lexical scope, an arrow function will look beyond the object for the value of `this`.

在这种情况下物体的方法的， `this`应该是指性质和方法`printNumbers`对象。 但是，由于对象不会创建新的词法作用域，因此箭头函数将在对象之外寻找`this`的值。

Call the `loop()` method:

调用`loop()`方法：

printNumbers.loop()

This will give the following:

这将给出以下内容：

Output Uncaught TypeError: Cannot read property 'forEach' of undefined

Since the object does not create a lexical scope, the arrow function method looks for `this` in the outer scope–[`Window`][Window] in this example. Since the `numbers` property does not exist on the `Window` object, it throws an error. As a general rule, it is safer to use traditional functions as object methods by default.

由于对象不创建词法作用域，箭头函数方法查找`this`外scope- [`Window`][Window]在这个例子。 由于`numbers`属性在`Window`对象上不存在，因此会引发错误。 通常，默认情况下将传统函数用作对象方法会更安全。

### 箭头函数没有`constructor`或`prototype` **(**Arrow Functions Have No `constructor` or `prototype`**)** ###

The [Understanding Prototypes and Inheritance in JavaScript][] tutorial earlier in this series explained that functions and classes have a `prototype` property, which is what JavaScript uses as a blueprint for cloning and inheritance.

本系列前面的[理解JavaScript中的原型和继承][Understanding Prototypes and Inheritance in JavaScript]教程介绍了函数和类具有`prototype`属性，JavaScript将其用作克隆和继承的蓝图。

To illustrate this, create a function and log the the automatically assigned `prototype` property:

为了说明这一点，创建一个函数并记录自动分配的`prototype`属性：

function myFunction() {
      this.value = 5
    }
    
    // Log the prototype property of myFunction
    console.log(myFunction.prototype)

This will print the following to the console:

这会将以下内容打印到控制台：

Output {constructor: ƒ}

This shows that in the `prototype` property there is an object with a `constructor`. This allows you to use the `new` keyword to create an instance of the function:

这表明在`prototype`属性中存在一个带有`constructor`的对象。 这使您可以使用`new`关键字创建该函数的实例：

const instance = new myFunction()
    
    console.log(instance.value)

This will yield the value of the `value` property that you defined when you first declared the function:

这将产生您在首次声明该函数时定义的`value`属性的`value` ：

Output 5

In contrast, arrow functions do not have a `prototype` property. Create a new arrow function and try to log its prototype:

相反，箭头函数没有`prototype`属性。 创建一个新的箭头函数，并尝试记录其原型：

const myArrowFunction = () => {}
    
    // Attempt to log the prototype property of myArrowFunction
    console.log(myArrowFunction.prototype)

This will give the following:

这将给出以下内容：

Output undefined

As a result of the missing `prototype` property, the `new` keyword is not available and you cannot construct an instance from the arrow function:

由于缺少`prototype`属性，因此`new`关键字不可用，并且无法通过arrow函数构造实例：

const arrowInstance = new myArrowFunction()
    
    console.log(arrowInstance)

This will give the following error:

这将产生以下错误：

Output Uncaught TypeError: myArrowFunction is not a constructor

This is consistent with our earlier example: Since arrow functions do not have their own `this` value, it follows that you would be unable to use an arrow function as a constructor.

这与我们之前的示例一致：由于箭头函数没有自己的`this`值，因此您将无法使用箭头函数作为构造函数。

As shown here, arrow functions have a lot of subtle changes that make them operate differently from traditional functions in ES5 and earlier. There have also been a few optional syntactical changes that make writing arrow functions quicker and less verbose. The next section will show examples of these syntax changes.

如此处所示，箭头功能有许多细微的变化，使其与ES5及更早版本中的传统功能有所不同。 还进行了一些可选的语法更改，这些更改使编写箭头功能更快，更省力。 下一节将显示这些语法更改的示例。

### 隐式回报 **(**Implicit Return**)** ###

The body of a traditional function is contained within a block using curly brackets `{}` and ends when the code encounters a `return` keyword. The following is what this implementation looks like as an arrow function:

传统函数的主体包含在使用大括号`{}`的块中，并在代码遇到`return`关键字时结束。 以下是此实现的箭头函数形式：

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

Arrow functions introduce *concise body syntax*, or *implicit return*. This allows the omission of the curly brackets and the `return` keyword.

箭头函数引入*简洁的主体语法*或*隐式返回* 。 这样可以省略大括号和`return`关键字。

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

Implicit return is useful for creating succinct one-line operations in `map`, `filter`, and other common array methods. Note that both the brackets and the `return` keyword must be omitted. If you cannot write the body as a one-line return statement, then you will have to use the normal block body syntax.

隐式返回对于在`map` ， `filter`和其他常见数组方法中创建简洁的单行操作很有用。 请注意，方括号和`return`关键字都必须省略。 如果您不能将主体编写为单行return语句，则必须使用常规的块主体语法。

In the case of returning an object, syntax requires that you wrap the object literal in parentheses. Otherwise, the brackets will be treated as a function body and will not compute a `return` value.

在返回对象的情况下，语法要求您将对象文字用括号括起来。 否则，方括号将被视为函数体，并且不会计算`return`值。

To illustrate this, find the following example:

为了说明这一点，请找到以下示例：

const sum = (a, b) => ({result: a + b})
    
    sum(1, 2)

This will give the following output:

这将给出以下输出：

Output {result: 3}

### 省略单个参数的括号 **(**Omitting Parentheses Around a Single Parameter**)** ###

Another useful syntactic enhancement is the ability to remove parentheses from around a single parameter in a function. In the following example, the `square` function only operates on one parameter, `x`:

另一个有用的语法增强功能是能够从函数中的单个参数周围删除括号。 在以下示例中， `square`函数仅对一个参数`x`起作用：

const square = (x) => x * x

As a result, you can omit the parentheses around the parameter, and it will work just the same:

结果，您可以省略参数周围的括号，它的作用将相同：

const square = x => x * x
    
    square(10)

This will give the following:

这将给出以下内容：

Output 100

Note that if a function takes no parameters, parentheses will be required:

请注意，如果函数不带参数，则需要括号：

const greet = () => 'Hello!'
    
    greet()

Calling `greet()` will work as follows:

调用`greet()`工作方式如下：

Output 'Hello!'

Some codebases choose to omit parentheses wherever possible, and others choose to always keep parentheses around parameters no matter what, particularly in codebases that use [TypeScript][] and require more information about each variable and parameter. When deciding how to write your arrow functions, check the style guide of the project to which you are contributing.

一些代码库选择在任何可能的地方省略括号，而其他代码库则无论如何都始终在参数周围加上括号，尤其是在使用[TypeScript][]且需要有关每个变量和参数的更多信息的代码库中。 在决定如何编写箭头功能时，请检查您正在贡献的项目的样式指南。

## 结论 **(**Conclusion**)** ##

In this article, you reviewed traditional functions and the difference between function declarations and function expressions. You learned that arrow functions are always anonymous, do not have a `prototype` or `constructor`, cannot be used with the `new` keyword, and determine the value of `this` through lexical scope. Finally, you explored the new syntactic enhancements available to arrow functions, such as implicit return and parentheses omission for single parameter functions.

在本文中，您回顾了传统函数以及函数声明和函数表达式之间的区别。 你了解到，箭头函数总是匿名的，没有一个`prototype`或`constructor` ，不能与使用`new`关键字，并确定价值`this`通过词法范围。 最后，您探索了箭头函数可用的新语法增强功能，例如单参数函数的隐式返回和括号省略。

For a review of basic functions, read [How To Define Functions in JavaScript][]. To read more about the concept of scope and hoisting in JavaScript, read [Understanding Variables, Scope, and Hoisting in JavaScript][Understanding Variables_ Scope_ and Hoisting in JavaScript].

要了解基本功能，请阅读[如何在JavaScript中定义功能][How To Define Functions in JavaScript] 。 要阅读有关JavaScript中作用域和提升的概念的更多信息，请阅读[了解][Understanding Variables_ Scope_ and Hoisting in JavaScript] JavaScript中的[变量，作用域和提升][Understanding Variables_ Scope_ and Hoisting in JavaScript] 。

> 翻译自: [https://www.digitalocean.com/community/tutorials/understanding-arrow-functions-in-javascript][https_www.digitalocean.com_community_tutorials_understanding-arrow-functions-in-javascript]

[COVID-19 Relief Fund]: https://www.brightfunds.org/funds/write-for-donations-covid-19-relief-fund
[Write for DOnations]: https://do.co/w4do-cta
[2015 edition of the ECMAScript specification _ES6]: http://www.ecma-international.org/ecma-262/6.0/
[JavaScript]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript
[lambda functions]: https://en.wikipedia.org/wiki/Anonymous_function
[Python]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-python-3
[array]: https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript
[built-in iterator methods]: https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods
[How To Define Functions in JavaScript]: https://www.digitalocean.com/community/tutorials/how-to-define-functions-in-javascript
[if_ statement]: https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript
[object]: https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript
[arrow function expression]: https://www.digitalocean.com/community/tutorials/how-to-define-functions-in-javascript#arrow-functions
[Understanding This_ Bind_ Call_ and Apply in JavaScript]: https://www.digitalocean.com/community/conceptual_articles/understanding-this-bind-call-and-apply-in-javascript
[DOM]: https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model
[forEach_ method]: https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods#foreach%28%29
[React]: https://reactjs.org/
[map]: https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods#map%28%29
[filter]: https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods#filter%28%29
[reduce]: https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods#reduce%28%29
[Window]: https://developer.mozilla.org/en-US/docs/Web/API/Window
[Understanding Prototypes and Inheritance in JavaScript]: https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript
[TypeScript]: https://www.typescriptlang.org/
[Understanding Variables_ Scope_ and Hoisting in JavaScript]: https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript
[https_www.digitalocean.com_community_tutorials_understanding-arrow-functions-in-javascript]: https://www.digitalocean.com/community/tutorials/understanding-arrow-functions-in-javascript