Comment fonctionnent plusieurs fonctions de flèches imbriquées en JavaScript ?

Comprendre les fonctions de flèches multiples en JavaScript

En JavaScript, vous pouvez rencontrer du code comme celui-ci :

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

Fonctions curry

Ce code démontre une fonction curry. Une fonction curry est une fonction qui renvoie une fonction, vous permettant d'appliquer partiellement des arguments.

Considérez l'exemple suivant (sans fonctions fléchées) :

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

Sous forme curry :

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

Sans fonctions flèches :

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

Focus sur le Retour Valeur

Les fonctions fléchées se comportent comme suit (en faisant attention à la valeur de retour) :

const f = someParam => returnValue

Ainsi, dans notre fonction d'ajout, un nombre renvoie une fonction :

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

Cela signifie que l'ajout d'un nombre renvoie une fonction :

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

Appeler Curried Fonctions

Pour utiliser une fonction curry, appelez-la différemment :

add(2)(3)  // returns 5

En effet, le premier appel de fonction renvoie une deuxième fonction. Seul le deuxième appel de fonction donne le résultat réel.

Application à votre code

Dans votre code :

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

Sans fonctions fléchées :

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

Puisque les fonctions fléchées lient cela lexicalement, cela ressemble plus à this :

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

Cela signifie que handleChange crée une fonction pour un champ spécifié. Il s'agit d'une technique React permettant de configurer des écouteurs d'événements pour chaque entrée sans duplication.

Encore plus de flèches

Plus de deux fonctions de flèche peuvent être séquencées :

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

Curry et Arity

Le curry peut surprendre toi. Ici, $ est défini comme une fonction curry avec deux paramètres, mais vous pouvez fournir n'importe quel nombre d'arguments :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!