Une analyse approfondie du currying de fonctions dans les compétences JavaScript_javascript

L'origine du curry est le nom du mathématicien Haskell Curry (le langage de programmation Haskell porte également son nom).

Le curry est généralement également appelé évaluation partielle. Sa signification est de transmettre les paramètres à une fonction étape par étape, une fois chaque paramètre transmis, les paramètres sont partiellement appliqués et une fonction plus spécifique est renvoyée pour accepter les paramètres restants. niveaux au milieu. La fonction accepte certains paramètres jusqu'à ce que le résultat final soit renvoyé.

Par conséquent, le processus de curry est un processus consistant à transmettre progressivement des paramètres, à réduire progressivement la portée applicable de la fonction et à résoudre progressivement le problème.

Curryer une fonction de sommation
D’après l’évaluation étape par étape, regardons un exemple simple

var concat3Words = function (a, b, c) { 
  return a+b+c; 
}; 
 
var concat3WordsCurrying = function(a) { 
  return function (b) { 
    return function (c) { 
      return a+b+c; 
    }; 
  }; 
}; 
console.log(concat3Words("foo ","bar ","baza"));      // foo bar baza 
console.log(concat3WordsCurrying("foo "));         // [Function] 
console.log(concat3WordsCurrying("foo ")("bar ")("baza")); // foo bar baza 

Comme vous pouvez le voir, concat3WordsCurrying("foo ") est une fonction. Chaque appel renvoie une nouvelle fonction, qui accepte un autre appel puis renvoie une nouvelle fonction jusqu'à ce que la solution de distribution soit renvoyée, progression étape par étape. (PS : Les caractéristiques de fermeture sont utilisées ici)

Alors maintenant, nous allons encore plus loin. Si nous exigeons que plus de 3 paramètres soient transmis, nous pouvons transmettre autant de paramètres que nous le souhaitons. Lorsqu'aucun paramètre n'est transmis, le résultat est affiché ?

Faisons d’abord une implémentation commune :

var add = function(items){ 
  return items.reduce(function(a,b){ 
    return a+b 
  }); 
}; 
console.log(add([1,2,3,4])); 

Mais s'il faut multiplier chaque nombre par 10 puis l'additionner, alors :

var add = function (items,multi) { 
  return items.map(function (item) { 
    return item*multi; 
  }).reduce(function (a, b) { 
    return a + b 
  }); 
}; 
console.log(add([1, 2, 3, 4],10)); 

Heureusement, il existe des fonctions de mappage et de réduction. Si nous suivons ce modèle et ajoutons maintenant 1 à chaque élément, puis le résumons, nous devons alors remplacer la fonction dans map.

Jetons un coup d'œil à l'implémentation du curry :

var adder = function () { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return _args.reduce(function (a, b) { 
        return a + b; 
      }); 
    } 
    [].push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
};   
var sum = adder(); 
 
console.log(sum);   // Function 
 
sum(100,200)(300);  // 调用形式灵活，一次调用可输入一个或者多个参数，并且支持链式调用 
sum(400); 
console.log(sum());  // 1000 （加总计算） 

L'additionneur ci-dessus est une fonction curry. Il renvoie une nouvelle fonction. La nouvelle fonction peut accepter de nouveaux paramètres par lots et retarder le calcul jusqu'à la dernière fois.

Fonction universelle de curry

Le currying le plus typique encapsulera le dernier calcul dans une fonction, puis transmettra cette fonction comme paramètre à la fonction de currying, qui est claire et flexible.

Par exemple, si chaque élément est multiplié par 10, on peut passer la fonction de traitement en paramètre :

var currying = function (fn) { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return fn.apply(this, _args); 
    } 
    Array.prototype.push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
}; 
 
var multi=function () { 
  var total = 0; 
  for (var i = 0, c; c = arguments[i++];) { 
    total += c; 
  } 
  return total; 
}; 
 
var sum = currying(multi);  
  
sum(100,200)(300); 
sum(400); 
console.log(sum());   // 1000 （空白调用时才真正计算）

De cette façon, sum = currying(multi), l'appel est très clair et l'effet d'utilisation est également brillant. Par exemple, si vous souhaitez accumuler plusieurs valeurs, vous pouvez utiliser plusieurs valeurs comme paramètres sum(. 1,2,3), qui peuvent également être pris en charge Appels chaînés, sum(1)(2)(3)

Les bases du curry

Le code ci-dessus est en fait une fonction d'ordre supérieur. Une fonction d'ordre supérieur fait référence à une fonction qui opère sur des fonctions. Elle reçoit une ou plusieurs fonctions en tant que paramètres et renvoie une nouvelle fonction. De plus, il s'appuie également sur les caractéristiques des fermetures pour sauvegarder les paramètres saisis lors du processus intermédiaire. C'est à dire :

Les fonctions peuvent être passées en paramètres
Les fonctions peuvent être utilisées comme valeurs de retour de fonction
Fermeture
Le rôle du curry
Calcul retardé. L’exemple ci-dessus est relativement facile à expliquer.

Réutilisation des paramètres. Lorsque la même fonction est appelée plusieurs fois et que les paramètres transmis sont pour la plupart les mêmes, la fonction peut alors être un bon candidat pour le curry.

Créez dynamiquement des fonctions. Cela peut être fait en générant dynamiquement une nouvelle fonction pour gérer les activités ultérieures après avoir calculé partiellement les résultats, éliminant ainsi les calculs répétés. Ou vous pouvez créer dynamiquement une nouvelle fonction en appliquant partiellement à la fonction un sous-ensemble des paramètres à transmettre à la fonction appelante. Cette nouvelle fonction enregistre les paramètres transmis à plusieurs reprises (vous n'êtes pas obligé de les transmettre à chaque fois. à l'avenir). Par exemple, le navigateur d'événements ajoute une méthode d'assistance pour les événements :

 var addEvent = function(el, type, fn, capture) { 
   if (window.addEventListener) { 
     el.addEventListener(type, function(e) { 
       fn.call(el, e); 
     }, capture); 
   } else if (window.attachEvent) { 
     el.attachEvent("on" + type, function(e) { 
       fn.call(el, e); 
     }); 
   } 
 }; 

Chaque fois que vous ajoutez un traitement d'événement, vous devez exécuter if...else.... En fait, un seul jugement est nécessaire dans un navigateur. Une nouvelle fonction est générée dynamiquement en fonction du résultat d'un jugement, donc. il n'est pas nécessaire de le faire à l'avenir.

var addEvent = (function(){ 
  if (window.addEventListener) { 
    return function(el, sType, fn, capture) { 
      el.addEventListener(sType, function(e) { 
        fn.call(el, e); 
      }, (capture)); 
    }; 
  } else if (window.attachEvent) { 
    return function(el, sType, fn, capture) { 
      el.attachEvent("on" + sType, function(e) { 
        fn.call(el, e); 
      }); 
    }; 
  } 
})(); 

Dans cet exemple, après le premier jugement if...else..., une partie du calcul est terminée et une nouvelle fonction est créée dynamiquement pour traiter les paramètres transmis ultérieurement. Il s'agit d'un curry typique.

La méthode Function.prototype.bind est également une application au curry

Différente de l'exécution directe de la méthode call/apply, la méthode bind définit le premier paramètre comme contexte d'exécution de la fonction, et les autres paramètres sont transmis à leur tour à la méthode appelante (le corps de la fonction elle-même n'est pas exécuté et peut être considéré comme une exécution retardée), et la création dynamique renvoie une nouvelle fonction, qui est conforme aux caractéristiques du curry.

var foo = {x: 888}; 
var bar = function () { 
  console.log(this.x); 
}.bind(foo);        // 绑定 
bar();           // 888 

Ce qui suit est une simulation de la fonction bind. testBind crée et renvoie une nouvelle fonction, la fonction qui exécute réellement l'activité est liée au contexte transmis en tant que paramètre réel, et l'exécution est retardée. .

Function.prototype.testBind = function (scope) { 
  var fn = this;          //// this 指向的是调用 testBind 方法的一个函数， 
  return function () { 
    return fn.apply(scope); 
  } 
}; 
var testBindBar = bar.testBind(foo); // 绑定 foo，延迟执行 
console.log(testBindBar);       // Function (可见，bind之后返回的是一个延迟执行的新函数) 
testBindBar();            // 888 

Ici, nous devons faire attention à la compréhension de cela dans le prototype.

L'article ci-dessus est une analyse approfondie du currying de fonctions en JavaScript. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.