Heim >Web-Frontend >js-Tutorial >Wie funktionieren mehrere verschachtelte Pfeilfunktionen in JavaScript?

Wie funktionieren mehrere verschachtelte Pfeilfunktionen in JavaScript?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-27 13:45:10289Durchsuche

How Do Multiple Nested Arrow Functions Work 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn