多个箭头函数在JavaScript中有什么意义？ [英] What do multiple arrow functions mean in javascript?

问题描述

我一直在阅读一堆反应代码，我看到这样的东西，我不明白：

I have been reading a bunch of react code and I see stuff like this that I don't understand:

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

推荐答案

这是一个咖喱功能

That is a curried function

首先，使用两个参数&hellip检查此函数;

First, examine this function with two parameters …

let add = (x,y) => x + y;
add(2,3); //=> 5

这里再次是咖喱形式…

Here it is again in curried form …

let add = x => y => x + y;

这里是相同的代码 ¹ without arrow functions…

Here is the same code¹ without arrow functions …

let add = function (x) {
  return function (y) {
    return x + y;
  };
};

---

专注于 return

---

Focus on return

它可能有助于以另一种方式可视化。我们知道箭头功能像这样工作 - 我们特别注意返回值。

It might help to visualize it another way. We know that arrow functions work like this – let's pay particular attention to the return value.

let f = someParam => returnValue

所以我们的添加函数返回一个函数 - 我们可以使用括号来增加清晰度。 粗体文本是我们的函数的返回值 add

So our add function returns a function – we can use parentheses for added clarity. The bolded text is the return value of our function add

let add = x => (y => x + y)

<换句话说，添加一些数字 x 返回函数

let x = 2;
add (2) // returns (y => 2 + y)

---

调用curried函数

所以为了使用我们的咖喱功能，我们必须称之为不一样…

So in order to use our curried function, we have to call it a bit differently …

add(2)(3); // returns 5

这是因为第一个（外部）函数调用返回第二个（内部）函数。只有在我们调用第二个函数之后，我们才能得到结果。如果我们将两行的呼叫和hellip分开，这一点更为明显;

This is because the first (outer) function call returns a second (inner) function. Only after we call the second function do we actually get the result. This is more evident if we separate the calls on two lines …

let add2 = add(2); // returns function(y) { return 2 + y }
add2(3);           // returns 5

---

应用我们的新了解您的代码

确定，现在我们了解了如何工作，让我们看看你的代码

OK, now that we understand how that works, let's look at your code

handleChange = field => e => {
  e.preventDefault();
  /// Do something here
}

它不使用箭头函数…

We'll start by representing it without using arrow functions …

handleChange = function(field) {
  return function(e) {
    e.preventDefault();
    // Do something here
    // return ...
  };
};

但是，由于箭头函数在词汇上绑定这个 ，实际上看起来更像这样…

However, because arrow functions lexically bind this, it would actually look more like this …

handleChange = function(field) {
  return function(e) {
    e.preventDefault();
    // Do something here
    // return ...
  }.bind(this);
}.bind(this);

也许现在我们可以看到这更清楚了。 handleChange 函数正在为指定的字段创建一个函数。这是一个方便的React技术，因为您需要在每个输入上设置自己的监听器才能更新应用程序状态。通过使用 handleChange 函数，我们可以消除所有重复的代码，导致为每个字段设置更改监听器

Maybe now we can see what this is doing more clearly. The handleChange function is creating a function for a specified field. This is a handy React technique because you're required to setup your own listeners on each input in order to update your applications state. By using the handleChange function, we can eliminate all the duplicated code that would result in setting up change listeners for each field.

很酷！

^{1 < sup>在这里，我没有必要将这个的词法绑定，因为原来的 add 函数不使用任何上下文，所以它在这种情况下保存它并不重要。}

¹ Here I did not have to lexically bind this because the original add function does not use any context, so it is not important to preserve it in this case.

这篇关于多个箭头函数在JavaScript中有什么意义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！