Wie funktioniert Currying mit mehreren Pfeilfunktionen in JavaScript?

Currying mit mehreren Pfeilfunktionen in JavaScript

In React-Anwendungen kann es sein, dass Sie auf Code wie diesen stoßen:

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

Diese rätselhafte Syntax stellt das sogenannte Curry dar Funktion.

Was ist Currying?

Currying ist eine Technik, die es ermöglicht, eine Funktion in Teilen zu definieren. Zum Beispiel:

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

Dies entspricht der herkömmlichen Funktion:

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

Fokus auf den Rückgabewert

In Pfeilfunktionen Der Rückgabewert wird wie folgt dargestellt:

const f = someParam => returnValue

Daher gibt unsere Add-Funktion a zurück Funktion:

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

Aufrufen der Funktion:

add(2)(3)  // returns 5

Dies geschieht, weil der äußere Funktionsaufruf die innere Funktion zurückgibt.

Den handleChange-Code verstehen

Anwenden auf die handleChange Code:

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

Da Pfeilfunktionen den Kontext bewahren, sieht es effektiv so aus:

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

Dieser Code erstellt eine Funktion für ein bestimmtes Feld. In React wird es verwendet, um Listener für verschiedene Eingabefelder einzurichten, ohne Code zu duplizieren.

Mehrere Pfeilfunktionen

Mehrere Pfeilfunktionen können sequenziert werden, was überraschende Funktionen ermöglicht, z dies:

const $ = x => k =>
  $ (k(x))

Diese Curry-Funktion namens $ (als Wortspiel mit der Lisp-Syntax) scheint eine beliebige Funktion zu akzeptieren Anzahl der Argumente, die das Konzept der Arität abstrahieren.

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