Как работает несколько функций стрелок в es6? [Дубликат]

Общий совет, если вас смущает какой-либо новый синтаксис JS и как он будет компилироваться, вы можете проверить babel . Например, копирование вашего кода в Babel и выбор предварительной настройки es2015 даст такой вывод, как

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

Подумайте об этом так, каждый раз, когда вы видите стрелку, вы заменяете ее на function. function parameters определены перед стрелкой. Итак, в вашем примере:

field => // function(field){}
e => { e.preventDefault(); } // function(e){e.preventDefault();}

, а затем вместе:

function (field) { 
    return function (e) { 
        e.preventDefault(); 
    };
}

Из документов :

// Basic syntax:
(param1, param2, paramN) => { statements }
(param1, param2, paramN) => expression
   // equivalent to:  => { return expression; }

// Parentheses are optional when there's only one argument:
singleParam => { statements }
singleParam => expression

Понимание доступных синтаксисов функций стрелок даст вам представление о том, какое поведение они представляют, когда «прикован», как в приведенных вами примерах.

Когда функция стрелки записывается без блочных фигурных скобок, с или без нескольких параметров, выражение, которое составляет тело функции, является неявным возвращенным. В вашем примере это выражение является другой функцией стрелки.

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 :

Выражение функции стрелки имеет более короткий синтаксис по сравнению с функциональными выражениями и лексически связывает это значение . Функции стрелки всегда анонимные .

Это особенно уместно в вашем примере, учитывая, что оно берется из приложения reactjs . Как указано в @naomik, в React вы часто обращаетесь к функциям члена компонента , используя 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)             |  }