在javascript中，多个箭头函数意味着什么？

Question

在javascript中，多个箭头函数意味着什么？我读了一堆react代码和我看到这样的东西，我不明白：handleChange = field => e => {   e.preventDefault();   /// Do something here}

Answer 1

理解箭头函数的可用语法将给你一个了解什么行为，他们是介绍什么时候‘链子’，就像你提供的例子。

当一个箭头函数没有块大括号、有多个参数或没有多个参数时，构成函数体的表达式是隐式回来了。在您的示例中，该表达式是另一个箭头函数。

No arrow funcs              Implicitly return `e=>{…}`    Explicitly return `e=>{…}` 

---------------------------------------------------------------------------------

function (field) {         |  field => e => {            |  field => {

  return function (e) {    |                             |    return e => {

      e.preventDefault()   |    e.preventDefault()       |      e.preventDefault()

  }                        |                             |    }

}                          |  }                          |  }

使用箭头语法编写匿名函数的另一个优点是，它们在词汇上绑定到定义它们的作用域。从…MDN上的“箭函数”:

阿箭头函数表达式的语法比函数表达式并在词汇上绑定这，这个价值。箭头函数总是匿名.

这在您的示例中特别相关，因为它是从反应Js申请。正如@naomik所指出的，在反应中，您经常访问构件成员函数使用this..例如：

Unbound                     Explicitly bound            Implicitly bound 

------------------------------------------------------------------------------

function (field) {         |  function (field) {       |  field => e => {

  return function (e) {    |    return function (e) {  |    

      this.setState(...)   |      this.setState(...)   |    this.setState(...)

  }                        |    }.bind(this)           |    

}                          |  }.bind(this)             |  }

Answer 2

一般提示，如果您对任何新的JS语法及其编译方式感到困惑，您可以检查巴贝尔..例如，在Babel中复制代码并选择es 2015预设将提供如下输出

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