Curry de fonction JavaScript

Qu'est-ce que le curry ?

En informatique, Currying (anglais : Currying), également traduit par Currying ou Currying, consiste à transformer une fonction qui accepte plusieurs paramètres en une fonction qui accepte un seul paramètre (le. premier paramètre de la fonction d'origine) et renvoie une nouvelle fonction qui accepte les paramètres restants et renvoie le résultat. Cette technique a été nommée par Christopher Strachey d'après le logicien Haskell Gary, bien qu'elle ait été inventée par Moses Schönfinkel et Gottlob Frege.

Intuitivement, Curry affirme que si vous corrigez certains paramètres, vous obtiendrez une fonction qui accepte les paramètres restants.
En informatique théorique, le currying fournit un moyen d'étudier des fonctions avec plusieurs paramètres dans des modèles théoriques simples, tels que le calcul lambda qui n'accepte qu'un seul paramètre.
Le dual du currying de fonctions est Uncurrying, une méthode d'utilisation de fonctions anonymes à paramètre unique pour implémenter des fonctions multi-paramètres.

Facile à comprendre

Le concept du Currying est en fait très simple Vous ne transmettez qu'une partie des paramètres à la fonction. pour l'appeler et le laisser renvoyer une fonction pour gérer les paramètres restants.

Si nous devons implémenter une fonction qui trouve la somme de trois nombres :

<span style="font-size: 16px;">function add(x, y, z) {<br>  return x + y + z;<br>}<br>console.log(add(1, 2, 3)); // 6<br></span>

<span style="font-size: 16px;">var add = function(x) {<br>  return function(y) {<br>    return function(z) {<br>      return x + y + z;<br>    }<br>  }<br>}<br><br>var addOne = add(1);<br>var addOneAndTwo = addOne(2);<br>var addOneAndTwoAndThree = addOneAndTwo(3);<br><br>console.log(addOneAndTwoAndThree);<br></span>

Ici, nous définir Une fonction d'ajout, qui accepte un paramètre et renvoie une nouvelle fonction. Après avoir appelé add, la fonction renvoyée mémorise le premier paramètre de add via une fermeture. L'appeler en même temps est un peu fastidieux, mais heureusement, nous pouvons utiliser une fonction spéciale d'assistance au curry pour faciliter la définition et l'appel de ces fonctions.

En utilisant les fonctions fléchées d'ES6, nous pouvons implémenter l'ajout ci-dessus comme ceci :

<span style="font-size: 16px;">const add = x => y => z => x + y + z;<br></span>

Cela semble être plus clair en utilisant de nombreuses fonctions fléchées .

Fonction partielle ?

Regardez cette fonction :

<span style="font-size: 16px;">function ajax(url, data, callback) {<br>  // ..<br>}<br></span>

Il existe un scénario : nous devons lancer des requêtes HTTP vers plusieurs interfaces différentes, il existe deux façons de procéder :

• Lors de l'appel de la fonction ajax(), transmettez la constante URL globale.

• Créez une référence de fonction avec des paramètres d'URL prédéfinis.

Ci-dessous, nous créons une nouvelle fonction, qui initie toujours une requête ajax() en interne. De plus, en attendant de recevoir les deux autres paramètres réels, nous le faisons manuellement. add ajax ()Le premier paramètre réel est défini sur l'adresse API qui vous intéresse.

Pour la première approche, nous pouvons générer la méthode d'appel suivante :

<span style="font-size: 16px;">function ajaxTest1(data, callback) {<br>  ajax('http://www.test.com/test1', data, callback);<br>}<br><br>function ajaxTest2(data, callback) {<br>  ajax('http://www.test.com/test2', data, callback);<br>}<br></span>

Pour ces deux fonctions similaires, nous avons également ce qui suit Le modèle peut être extrait :

<span style="font-size: 16px;">function beginTest(callback) {<br>  ajaxTest1({<br>    data: GLOBAL_TEST_1,<br>  }, callback);<br>}<br></span>

Je crois que vous avez vu ce modèle : nous appliquons les paramètres réels au site d'appel de fonction (function call-site) dans les paramètres formels. Comme vous pouvez le constater, nous n'appliquons initialement que certains arguments (en particulier les paramètres d'URL) et appliquons le reste ultérieurement.

Le concept ci-dessus est la définition de la fonction partielle. La fonction partielle est un processus de réduction du nombre de paramètres de fonction ; le nombre de paramètres fait ici référence au nombre de paramètres formels attendus. être transmis. Nous avons réduit le nombre de paramètres de la fonction originale ajax() de 3 à 2 via ajaxTest1().

Nous définissons une fonction partial() comme ceci :

<span style="font-size: 16px;">function partial(fn, ...presetArgs) {<br>  return function partiallyApplied(...laterArgs) {<br>    return fn(...presetArgs, ...laterArgs);<br>  }<br>}<br></span>

La fonction partial() reçoit le paramètre fn pour représenter notre partiel Fonctions d'application avec paramètres réels (applicables partiellement). Ensuite, après le paramètre formel fn, le tableau presetArgs collecte les paramètres réels transmis ultérieurement et les enregistre pour une utilisation ultérieure.

Nous créons et renvoyons une nouvelle fonction interne (pour plus de clarté, nous la nommons partiellementApplied(..)). Dans cette fonction, le tableau laterArgs collecte tous les paramètres réels .

L'utilisation des fonctions fléchées est plus concise :

<span style="font-size: 16px;">var partial =<br>  (fn, ...presetArgs) =><br>    (...laterArgs) =><br>      fn(...presetArgs, ...laterArgs);<br></span>

En utilisant ce mode de fonctions partielles, on reconstruit le code précédent :

<span style="font-size: 16px;">function ajax(url, data, callback) {<br>  // ..<br>}<br><br>var ajaxTest1 = partial(ajax, 'http://www.test.com/test1');<br>var ajaxTest2 = partial(ajax, 'http://www.test.com/test1');<br></span>

Repensez à la fonction startTest(). Que devons-nous faire si nous utilisons partial() pour la reconstruire ?

<span style="font-size: 16px;">function ajax(url, data, callback) {<br>  // ..<br>}<br><br>// 版本1<br>var beginTest = partial(ajax, 'http://www.test.com/test1', {<br>  data: GLOBAL_TEST_1,<br>});<br><br>// 版本2<br>var ajaxTest1 = partial(ajax, 'http://www.test.com/test1');<br>var beginTest = partial(ajaxTest1, {<br>  data: GLOBAL_TEST_1,<br>});<br></span>

Passez un à la fois

Je pense que vous avez vu les avantages de la version 2 par rapport à la version 1 dans l'exemple ci-dessus. C'est vrai, le currying est : le processus de conversion d'une fonction avec plusieurs paramètres en une fonction une à la fois. Chaque fois qu'une fonction est appelée, elle n'accepte qu'un seul argument et renvoie une fonction jusqu'à ce que tous les arguments soient passés.

The process of converting a function that takes multiple arguments into a function that takes them one at a time.

Each time the function is called it only accepts one argument and returns a function that takes one argument until all arguments are passed.

假设我们已经创建了一个柯里化版本的ajax()函数curriedAjax()：

<span style="font-size: 16px;">curriedAjax('http://www.test.com/test1')<br>  ({<br>    data: GLOBAL_TEST_1,<br>  })<br>  (function callback(data) {<br>    // dosomething<br>  });<br></span>

我们将三次调用分别拆解开来，这也许有助于我们理解整个过程：

<span style="font-size: 16px;">var ajaxTest1 = curriedAjax('http://www.test.com/test1');<br><br>var beginTest = ajaxTest1({<br>  data: GLOBAL_TEST_1,<br>});<br><br>var ajaxCallback = beginTest(function callback(data) {<br>  // dosomething<br>});<br></span>

实现柯里化

那么，我们如何来实现一个自动的柯里化的函数呢？

<span style="font-size: 16px;">var currying = function(fn) {<br>  var args = [];<br><br>  return function() {<br>    if (arguments.length === 0) {<br>      return fn.apply(this, args); // 没传参数时，调用这个函数<br>    } else {<br>      [].push.apply(args, arguments); // 传入了参数，把参数保存下来<br>      return arguments.callee; // 返回这个函数的引用<br>    }<br>  }<br>}<br></span>

调用上述currying()函数：

<span style="font-size: 16px;">var cost = (function() {<br>  var money = 0;<br>  return function() {<br>    for (var i = 0; i < arguments.length; i++) {<br>      money += arguments[i];<br>    }<br>    return money;<br>  }<br>})();<br><br>var cost = currying(cost);<br><br>cost(100); // 传入了参数，不真正求值<br>cost(200); // 传入了参数，不真正求值<br>cost(300); // 传入了参数，不真正求值<br><br>console.log(cost()); // 求值并且输出600<br></span>

上述函数是我之前的JavaScript设计模式与开发实践读书笔记之闭包与高阶函数所写的currying版本，现在仔细思考后发现仍旧有一些问题。

我们在使用柯里化时，要注意同时为函数预传的参数的情况。

因此把上述柯里化函数更改如下：

<span style="font-size: 16px;">var currying = function(fn) {<br>  var args = Array.prototype.slice.call(arguments, 1);<br><br>  return function() {<br>    if (arguments.length === 0) {<br>      return fn.apply(this, args); // 没传参数时，调用这个函数<br>    } else {<br>      [].push.apply(args, arguments); // 传入了参数，把参数保存下来<br>      return arguments.callee; // 返回这个函数的引用<br>    }<br>  }<br>}<br></span>

使用实例：

<span style="font-size: 16px;">var cost = (function() {<br>  var money = 0;<br>  return function() {<br>    for (var i = 0; i < arguments.length; i++) {<br>      money += arguments[i];<br>    }<br>    return money;<br>  }<br>})();<br><br>var cost = currying(cost, 100);<br>cost(200); // 传入了参数，不真正求值<br>cost(300); // 传入了参数，不真正求值<br><br>console.log(cost()); // 求值并且输出600<br></span>

你可能会觉得每次都要在最后调用一下不带参数的cost()函数比较麻烦，并且在cost()函数都要使用arguments参数不符合你的预期。我们知道函数都有一个length属性，表明函数期望接受的参数个数。因此我们可以充分利用预传参数的这个特点。

借鉴自mqyqingfeng：

<span style="font-size: 16px;">function sub_curry(fn) {<br>  var args = [].slice.call(arguments, 1);<br>  return function() {<br>    return fn.apply(this, args.concat([].slice.call(arguments)));<br>  };<br>}<br><br>function curry(fn, length) {<br><br>  length = length || fn.length;<br><br>  var slice = Array.prototype.slice;<br><br>  return function() {<br>    if (arguments.length < length) {<br>      var combined = [fn].concat(slice.call(arguments));<br>      return curry(sub_curry.apply(this, combined), length - arguments.length);<br>    } else {<br>      return fn.apply(this, arguments);<br>    }<br>  };<br>}<br></span>

在上述函数中，我们在currying的返回函数中，每次把arguments.length和fn.length作比较，一旦arguments.length达到了fn.length的数量，我们就去调用fn(return fn.apply(this, arguments);)

验证：

<span style="font-size: 16px;">var fn = curry(function(a, b, c) {<br>  return [a, b, c];<br>});<br><br>fn("a", "b", "c") // ["a", "b", "c"]<br>fn("a", "b")("c") // ["a", "b", "c"]<br>fn("a")("b")("c") // ["a", "b", "c"]<br>fn("a")("b", "c") // ["a", "b", "c"]<br></span>

bind方法的实现

使用柯里化，能够很方便地借用call()或者apply()实现bind()方法的polyfill。

<span style="font-size: 16px;">Function.prototype.bind = Function.prototype.bind || function(context) {<br>  var me = this;<br>  var args = Array.prototype.slice.call(arguments, 1);<br>  return function() {<br>    var innerArgs = Array.prototype.slice.call(arguments);<br>    var finalArgs = args.concat(innerArgs);<br>    return me.apply(contenxt, finalArgs);<br>  }<br>}<br></span>

上述函数有的问题在于不能兼容构造函数。我们通过判断this指向的对象的原型属性，来判断这个函数是否通过new作为构造函数调用，来使得上述bind方法兼容构造函数。

Function.prototype.bind() by MDN如下说到：

绑定函数适用于用new操作符 new 去构造一个由目标函数创建的新的实例。当一个绑定函数是用来构建一个值的，原来提供的 this 就会被忽略。然而, 原先提供的那些参数仍然会被前置到构造函数调用的前面。

这是基于MVC的JavaScript Web富应用开发的bind()方法实现：

<span style="font-size: 16px;">Function.prototype.bind = function(oThis) {<br>  if (typeof this !== "function") {<br>    throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");<br>  }<br><br>  var aArgs = Array.prototype.slice.call(arguments, 1),<br>    fToBind = this,<br>    fNOP = function() {},<br>    fBound = function() {<br>      return fToBind.apply(<br>        this instanceof fNOP && oThis ? this : oThis || window,<br>        aArgs.concat(Array.prototype.slice.call(arguments))<br>      );<br>    };<br><br>  fNOP.prototype = this.prototype;<br>  fBound.prototype = new fNOP();<br><br>  return fBound;<br>};<br></span>

反柯里化（uncurrying）

可能遇到这种情况：拿到一个柯里化后的函数，却想要它柯里化之前的版本，这本质上就是想将类似f(1)(2)(3)的函数变回类似g(1,2,3)的函数。

下面是简单的uncurrying的实现方式：

<span style="font-size: 16px;">function uncurrying(fn) {<br>  return function(...args) {<br>    var ret = fn;<br><br>    for (let i = 0; i < args.length; i++) {<br>      ret = ret(args[i]); // 反复调用currying版本的函数<br>    }<br><br>    return ret; // 返回结果<br>  };<br>}<br></span>

注意，不要以为uncurrying后的函数和currying之前的函数一模一样，它们只是行为类似！

<span style="font-size: 16px;">var currying = function(fn) {<br>  var args = Array.prototype.slice.call(arguments, 1);<br><br>  return function() {<br>    if (arguments.length === 0) {<br>      return fn.apply(this, args); // 没传参数时，调用这个函数<br>    } else {<br>      [].push.apply(args, arguments); // 传入了参数，把参数保存下来<br>      return arguments.callee; // 返回这个函数的引用<br>    }<br>  }<br>}<br><br>function uncurrying(fn) {<br>  return function(...args) {<br>    var ret = fn;<br><br>    for (let i = 0; i < args.length; i++) {<br>      ret = ret(args[i]); // 反复调用currying版本的函数<br>    }<br><br>    return ret; // 返回结果<br>  };<br>}<br><br>var cost = (function() {<br>  var money = 0;<br>  return function() {<br>    for (var i = 0; i < arguments.length; i++) {<br>      money += arguments[i];<br>    }<br>    return money;<br>  }<br>})();<br><br>var curryingCost = currying(cost);<br>var uncurryingCost = uncurrying(curryingCost);<br>console.log(uncurryingCost(100, 200, 300)()); // 600<br></span>

柯里化或偏函数有什么用？

无论是柯里化还是偏应用，我们都能进行部分传值，而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

另一个最能体现柯里化应用的的是，当函数只有一个形参时，我们能够比较容易地组合它们（单一职责原则（Single responsibility principle））。因此，如果一个函数最终需要三个实参，那么它被柯里化以后会变成需要三次调用，每次调用需要一个实参的函数。当我们组合函数时，这种单元函数的形式会让我们处理起来更简单。

归纳下来，主要为以下常见的三个用途：

• 延迟计算

• 参数复用

• Fonction de génération dynamique

Ce qui précède est le JavaScript fonction Explication du currying, j'espère que cela sera utile à tout le monde.

Recommandations associées :

Explication détaillée des exemples de curry js

Dé-currying en JS

Explication détaillée du currying de la fonction JavaScript

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!