Heim >Web-Frontend >js-Tutorial >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!