|
1 | 1 | --- |
2 | | -title: 您可以为新箭头函数语法提供一个用例吗？ |
3 | | -subtitle: 这个新语法与其他函数有什么不同？ |
| 2 | +title: 箭头 => 函数语法有什么用例？ |
| 3 | +subtitle: 这种新语法与其他函数有何不同？ |
4 | 4 | --- |
5 | 5 |
|
6 | | -`=>` 函数语法，也被称为 "箭头函数"，是在 ECMAScript 6（ES6）中引入的 JavaScript 功能。它提供了一种更简洁的编写函数的方式，并且在 `this` 的行为方面与传统函数表达式有一些不同。下面通过一个简单的用例来说明它的实用性： |
| 6 | +## TL;DR |
7 | 7 |
|
8 | | -## 用例：筛选数组 |
| 8 | +箭头函数为用 JavaScript 编写函数提供了一种简洁的语法。它们对于在方法和回调中维护 `this` 上下文特别有用。例如，在事件处理程序或像 `map` 这样的数组方法中，箭头函数可以简化代码并避免 `this` 绑定问题。 |
9 | 9 |
|
10 | | -假设你有一个包含数字的数组，你想筛选出所有小于 10 的数字。你可以使用传统的函数语法和新的箭头函数语法来实现这一目标，如下所示： |
| 10 | +```js live |
| 11 | +const numbers = [1, 2, 3]; |
| 12 | +const doubled = numbers.map((n) => n * 2); |
| 13 | +console.log(doubled); // [2, 4, 6] |
| 14 | +``` |
11 | 15 |
|
12 | | -### 传统函数语法 |
| 16 | +*** |
13 | 17 |
|
14 | | -```js |
15 | | -const numbers = [1, 5, 10, 15, 20]; |
16 | | -const filteredNumbers = numbers.filter(function (number) { |
17 | | - return number >= 10; |
18 | | -}); |
| 18 | +## 新箭头 => 函数语法的用例 |
| 19 | + |
| 20 | +### 简化语法 |
| 21 | + |
| 22 | +箭头函数提供了一种更简洁的编写函数的方式。这对于短函数或回调特别有用。 |
19 | 23 |
|
20 | | -console.log(filteredNumbers); // 输出: [10, 15, 20] |
| 24 | +```js live |
| 25 | +// Traditional function |
| 26 | +const add = function (a, b) { |
| 27 | + return a + b; |
| 28 | +}; |
| 29 | + |
| 30 | +// Arrow function |
| 31 | +const anotherAdd = (a, b) => a + b; |
| 32 | + |
| 33 | +console.log(add(2, 3)); // Output: 5 |
| 34 | +console.log(anotherAdd(2, 3)); // Output: 5 |
21 | 35 | ``` |
22 | 36 |
|
23 | | -### 箭头函数语法 |
| 37 | +### 词法 `this` 绑定 |
| 38 | + |
| 39 | +箭头函数没有自己的 `this` 上下文。相反，它们从周围的范围继承 `this`。这在 `this` 上下文可能很棘手的方法和回调中特别有用。 |
24 | 40 |
|
25 | | -```js |
26 | | -const numbers = [1, 5, 10, 15, 20]; |
27 | | -const filteredNumbers = numbers.filter((number) => number >= 10); |
| 41 | +```js live |
| 42 | +function Timer() { |
| 43 | + this.seconds = 0; |
| 44 | + this.increment = () => { |
| 45 | + this.seconds++; // 'this.seconds' is inherited from the outer scope |
| 46 | + console.log(this.seconds); |
| 47 | + }; |
| 48 | +} |
28 | 49 |
|
29 | | -console.log(filteredNumbers); // 输出: [10, 15, 20] |
| 50 | +const timer = new Timer(); |
| 51 | +timer.increment(); // 1 |
| 52 | +timer.increment(); // 2 |
30 | 53 | ``` |
31 | 54 |
|
32 | | -## 箭头函数的优点 |
| 55 | +在上面的例子中，在 `setInterval` 中使用传统函数需要额外的步骤来维护正确的 `this` 上下文。 |
33 | 56 |
|
34 | | -1. **简洁性**：箭头函数更加简洁，使你的代码更短且易于阅读。 |
35 | | -1. **`this` 行为**：箭头函数没有自己的 `this`。相反，它们继承自它们在定义时的父级作用域中的 `this`。这在处理回调并希望保留 `this` 上下文的情况下特别有用。 |
36 | | -1. **隐式返回**：如果函数体只包含一个表达式，箭头函数允许省略 `return` 关键字和花括号。 |
| 57 | +### 在数组方法中使用箭头函数 |
37 | 58 |
|
38 | | -## 何时使用箭头函数 |
| 59 | +箭头函数通常用于 `map`、`filter` 和 `reduce` 等数组方法中，以获得更简洁、更易读的代码。 |
39 | 60 |
|
40 | | -- 当你需要一个快速的、单行的函数时。 |
41 | | -- 在回调函数中，当你想要保留 `this` 的词法作用域时。 |
42 | | -- 在使用 `map`、`filter`、`reduce` 等高阶函数时。 |
| 61 | +```js live |
| 62 | +const numbers = [1, 2, 3, 4, 5]; |
43 | 63 |
|
44 | | -## 何时不要使用箭头函数 |
| 64 | +// Traditional function |
| 65 | +const doubledTraditional = numbers.map(function (n) { |
| 66 | + return n * 2; |
| 67 | +}); |
| 68 | + |
| 69 | +// Arrow function |
| 70 | +const doubled = numbers.map((n) => n * 2); |
| 71 | + |
| 72 | +console.log(doubled); // [2, 4, 6, 8, 10] |
| 73 | +``` |
| 74 | + |
| 75 | +### 事件处理程序 |
| 76 | + |
| 77 | +箭头函数可用于事件处理程序，以维护类或对象的 `this` 上下文。 |
| 78 | + |
| 79 | +```js live |
| 80 | +class Button { |
| 81 | + constructor() { |
| 82 | + this.count = 0; |
| 83 | + this.button = document.createElement('button'); |
| 84 | + this.button.innerText = 'Click me'; |
| 85 | + this.button.addEventListener('click', () => { |
| 86 | + this.count++; |
| 87 | + console.log('count:', this.count); |
| 88 | + }); |
| 89 | + document.body.appendChild(this.button); |
| 90 | + } |
| 91 | +} |
| 92 | + |
| 93 | +const myButton = new Button(); |
| 94 | +myButton.button.click(); // count: 1 |
| 95 | +myButton.button.click(); // count: 2 |
| 96 | +``` |
45 | 97 |
|
46 | | -- **对象方法**：箭头函数没有自己的 `this` 上下文，在对象方法中可能会导致意外行为。 |
47 | | -- **作为构造函数**：箭头函数不能作为构造函数使用，如果使用 `new` 关键字会引发错误。 |
48 | | -- **当你需要使用函数提升**：与传统的函数声明不同，箭头函数不会提升。 |
| 98 | +## 延伸阅读 |
49 | 99 |
|
50 | | -箭头函数是 JavaScript 的一个强大补充，简化了函数语法，并解决了传统函数中 `this` 关键字的一些常见问题。它们在现代 JavaScript 开发模式中特别有用。 |
| 100 | +* [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) |
| 101 | +* [JavaScript.info: Arrow functions revisited](https://javascript.info/arrow-functions) |
| 102 | +* [Eloquent JavaScript: Functions](https://eloquentjavascript.net/03_functions.html) |
0 commit comments