Wie funktionieren mehrere verschachtelte Pfeilfunktionen in JavaScript?

Mehrere Pfeilfunktionen in JavaScript verstehen

In JavaScript stoßen Sie möglicherweise auf Code wie diesen:

  e.preventDefault();
  /// Do something here
}

Curry-Funktionen

Dieser Code demonstriert eine Curry-Funktion. Eine Curry-Funktion ist eine Funktion, die eine Funktion zurückgibt, sodass Sie Argumente teilweise anwenden können.

Betrachten Sie das folgende Beispiel (ohne Pfeilfunktionen):

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

In Curry-Form:

const add = x => y => x + y

Ohne Pfeilfunktionen:

const add = function (x) {
  return function (y) {
    return x + y
  }
}

Fokus auf die Rückkehr Wert

Pfeilfunktionen verhalten sich wie folgt (achten Sie auf den Rückgabewert):

const f = someParam => returnValue

In unserer Additionsfunktion gibt eine Zahl also eine Funktion zurück:

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

Das bedeutet, dass das Addieren einer Zahl eine Funktion zurückgibt:

add(2) // returns (y => 2 + y)

Curried anrufen Funktionen

Um eine Curry-Funktion zu verwenden, rufen Sie sie anders auf:

add(2)(3)  // returns 5

Das liegt daran, dass der erste Funktionsaufruf eine zweite Funktion zurückgibt. Erst der zweite Funktionsaufruf liefert das tatsächliche Ergebnis.

Anwendung auf Ihren Code

In Ihrem Code:

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

Ohne Pfeilfunktionen:

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

Da Pfeilfunktionen dies lexikalisch binden, sieht es eher so aus Dies:

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

Das bedeutet, dass handleChange eine Funktion für ein angegebenes Feld erstellt. Es handelt sich um eine React-Technik zum Einrichten von Ereignis-Listenern für jede Eingabe ohne Duplizierung.

Noch mehr Pfeile

Mehr als zwei Pfeilfunktionen können sequenziert werden:

const three = a => b => c =>
  a + b + c

const four = a => b => c => d =>
  a + b + c + d

three (1) (2) (3) // 6

four (1) (2) (3) (4) // 10

Currying und Arity

Currying-Dose Überrasche dich. Hier ist $ als Curry-Funktion mit zwei Parametern definiert, Sie können jedoch beliebig viele Argumente angeben:

const $ = x => k =>
  $ (k (x))
  
const add = x => y =>
  x + y

const mult = x => y =>
  x * y
  
$ (1)           // 1
  (add (2))     // + 2 = 3
  (mult (6))    // * 6 = 18
  (console.log) // 18
  
$ (7)            // 7
  (add (1))      // + 1 = 8
  (mult (8))     // * 8 = 64
  (mult (2))     // * 2 = 128
  (mult (2))     // * 2 = 256
  (console.log)  // 256

Das obige ist der detaillierte Inhalt vonWie funktionieren mehrere verschachtelte Pfeilfunktionen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!