在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    };  };