Vous amener à comprendre et maîtriser le currying des fonctions JavaScript

Haskell et Scala prennent en charge le currying des fonctions. Le currying des fonctions JavaScript est également étroitement lié à la programmation fonctionnelle JavaScript. Si vous êtes intéressé, vous pouvez travailler davantage sur ces aspects pour comprendre. .

Quelques points de connaissances à connaître pour lire cet article

• La partie fonctioncall/apply/arguments
• Fermeture
• Fonction d'ordre supérieur
• Fonction incomplète

Il y a une explication simple de cette connaissance à la fin de l'article, vous pouvez y jeter un oeil.

Qu'est-ce que le currying ?

Voyons d'abord comment il est défini dans Wikipédia : En informatique, le curry (anglais : Currying), également traduit par curry Galification ou garnisonation est une technique qui transforme 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 un résultat.

Nous pouvons donner un exemple simple. La fonction suivante add est une fonction générale, qui consiste à ajouter les paramètres passés a et b est la fonction ; curryingAdd est une fonction de curry ; add De cette façon, nous devions à l'origine transmettre directement deux paramètres à la fonction pour effectuer des opérations. Nous devons maintenant transmettre les paramètres
et a respectivement. La fonction est la suivante : b

function add(a, b) {
    return a + b;
}

function curryingAdd(a) {
    return function(b) {
        return a + b;
    }
}

add(1, 2); // 3
curryingAdd(1)(2); // 3

Quand vous voyez cela, vous vous demandez peut-être à quoi sert cela ? Quels avantages cela peut-il apporter à notre application ? continuons à lire.

Pourquoi avez-vous besoin de curry la fonction ?

Vous pouvez utiliser quelques astuces (voir ci-dessous)
• Lier certains paramètres dans la fonction dans avance. Il obtient l'effet de réutilisation des paramètres et améliore l'applicabilité.
• Facteurs variables fixes
• Calcul retardé

En bref, le currying des fonctions vous permet de re- Combinez votre application et divisez vos fonctions complexes en petites parties. Chaque petite partie est simple, facile à comprendre et facile à tester

Comment coder les fonctions Currying ?

Dans cette partie, nous vous expliquera étape par étape comment curry une fonction multi-paramètres. Les connaissances utilisées incluent

,闭包, 高阶函数Attendez.不完全函数

• I Apéritif<.>Si nous voulons implémenter une fonction, il s'agit de sortir l'instruction

  Like

  , où name et song sont tous deux des paramètres variables alors généralement nous écrirons comme ceci ; : name

  function printInfo(name, song) {
      console.log(name + '喜欢的歌曲是: ' + song);
  }
  printInfo('Tom', '七里香');
  printInfo('Jerry', '雅俗共赏');

  song Après avoir curry la fonction ci-dessus, on peut écrire comme ceci :

  function curryingPrintInfo(name) {
      return function(song) {
          console.log(name + '喜欢的歌曲是: ' + song);
      }
  }
  var tomLike = curryingPrintInfo('Tom');
  tomLike('七里香');
  var jerryLike = curryingPrintInfo('Jerry');
  jerryLike('雅俗共赏');

• II Poulet mijoté aux champignons

  Bien que nous ayons curry la fonction

  ci-dessus, nous ne voulons plus avoir besoin de la curry, c'est simplement un cauchemar de continuer à imbriquer des fonctions comme ci-dessus

  Nous devons donc créer des fonctions qui aident d'autres fonctions à ; soyons curry. Appelons-le printInfo pour le moment. Une simple La fonction
  est la suivante : curryingHelper

  function curryingHelper(fn) {
      var _args = Array.prototype.slice.call(arguments, 1);
      return function() {
          var _newArgs = Array.prototype.slice.call(arguments);
          var _totalArgs = _args.concat(_newArgs);
          return fn.apply(this, _totalArgs);
      }
  }

  curryingHelper Voici une petite explication Tout d'abord, le de la fonction représente. l'objet paramètre passé à la fonction. Ce n'est pas un tableau, c'est un objet de type tableau

  Nous pouvons donc utiliser la méthode arguments de la fonction, puis utiliser la méthode
  pour obtenir le contenu à l'intérieur de Array.prototype.slice. 🎜>..callNous utilisons arguments pour transmettre les paramètres corrects à la fonction
  .fn.apply(this, _totalArgs)fnEnsuite, écrivons une fonction simple pour vérifier l'exactitude de la fonction de curry auxiliaire ci-dessus. est la suivante :

  function showMsg(name, age, fruit) {
      console.log('My name is ' + name + ', I\'m ' + age + ' years old, ' + ' and I like eat ' + fruit);
  }
  
  var curryingShowMsg1 = curryingHelper(showMsg, 'dreamapple');
  curryingShowMsg1(22, 'apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  
  var curryingShowMsg2 = curryingHelper(showMsg, 'dreamapple', 20);
  curryingShowMsg2('watermelon'); // My name is dreamapple, I'm 20 years old,  and I like eat watermelon

  Le résultat ci-dessus montre que notre fonction de curry est correcte. Ce

  est une

  fonction d'ordre supérieurcurryingHelper Pour l'explication des fonctions d'ordre supérieur, veuillez. reportez-vous à ce qui suit.

• III Hot Pot au bœuf

  La fonction d'aide au curry ci-dessus peut en effet répondre à nos besoins généraux, mais elle n'est pas bonne assez. Nous espérons que ces fonctions curry ne peuvent transmettre qu'un seul paramètre à la fois

  Ensuite, les paramètres peuvent être transmis plusieurs fois, alors que devons-nous faire ? réaliser les

  fonctions que nous avons mentionnées ci-dessus. Le code est le suivant :
  

  function betterCurryingHelper(fn, len) {
      var length = len || fn.length;
      return function () {
          var allArgsFulfilled = (arguments.length >= length);
  
          // 如果参数全部满足,就可以终止递归调用
          if (allArgsFulfilled) {
              return fn.apply(this, arguments);
          }
          else {
              var argsNeedFulfilled = [fn].concat(Array.prototype.slice.call(arguments));
              return betterCurryingHelper(curryingHelper.apply(this, argsNeedFulfilled), length - arguments.length);
          }
      };
  }

  betterCurryingHelperoù
  est la fonction mentionnée dans le II Poulet mijoté aux champignons

  Il est à noter. que curryingHelper représente la longueur du paramètre de cette fonction. Ensuite, vérifions l'exactitude de cette fonction :

  var betterShowMsg = betterCurryingHelper(showMsg);
  betterShowMsg('dreamapple', 22, 'apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  betterShowMsg('dreamapple', 22)('apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  betterShowMsg('dreamapple')(22, 'apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  betterShowMsg('dreamapple')(22)('apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple

  fn.length où
  est la fonction mentionnée dans la partie de II Poulet Ragoût. avec des champignons

  showMsg Nous pouvons voir que cela Il réalise la fonction que nous voulons et nous pouvons également utiliser la fonction curry comme celle d'origine.
  betterCurryingHelper

  Pieds de poulet aux poivrons marinés IV

• 我们已经能够写出很好的柯里化辅助函数了,但是这还不算是最刺激的,如果我们在传递参数的时候可以不按照顺来那一定很酷;当然我们也可以写出这样的函数来,
  这个crazyCurryingHelper函数如下所示:

  var _ = {};
  function crazyCurryingHelper(fn, length, args, holes) {
      length = length || fn.length;
      args   = args   || [];
      holes  = holes  || [];
  
      return function() {
          var _args       = args.slice(),
              _holes      = holes.slice();
  
          // 存储接收到的args和holes的长度
          var argLength   = _args.length,
              holeLength  = _holes.length;
  
          var allArgumentsSpecified = false;
  
          // 循环
          var arg     = null,
              i       = 0,
              aLength = arguments.length;
  
          for(; i < aLength; i++) {
              arg = arguments[i];
  
              if(arg === _ && holeLength) {
                  // 循环holes的位置
                  holeLength--;
                  _holes.push(_holes.shift());
              } else if (arg === _) {
                  // 存储hole就是_的位置
                  _holes.push(argLength + i);
              } else if (holeLength) {
                  // 是否还有没有填补的hole
                  // 在参数列表指定hole的地方插入当前参数
                  holeLength--;
                  _args.splice(_holes.shift(), 0, arg);
              } else {
                  // 不需要填补hole,直接添加到参数列表里面
                  _args.push(arg);
              }
          }
  
          // 判断是否所有的参数都已满足
          allArgumentsSpecified = (_args.length >= length);
          if(allArgumentsSpecified) {
              return fn.apply(this, _args);
          }
  
          // 递归的进行柯里化
          return crazyCurryingHelper.call(this, fn, length, _args, _holes);
      };
  }

  一些解释,我们使用_来表示参数中的那些缺失的参数,如果你使用了lodash的话,会有冲突的;那么你可以使用别的符号替代.
  按照一贯的尿性,我们还是要验证一下这个crazyCurryingHelper是不是实现了我们所说的哪些功能,代码如下:

  var crazyShowMsg = crazyCurryingHelper(showMsg);
  crazyShowMsg(_, 22)('dreamapple')('apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  crazyShowMsg( _, 22, 'apple')('dreamapple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  crazyShowMsg( _, 22, _)('dreamapple', _, 'apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  crazyShowMsg( 'dreamapple', _, _)(22)('apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple
  crazyShowMsg('dreamapple')(22)('apple'); // My name is dreamapple, I'm 22 years old,  and I like eat apple

  结果显示,我们这个函数也实现了我们所说的那些功能.

柯里化的一些应用场景

说了那么多,其实这部分才是最重要的部分;学习某个知识要一定可以用得到,不然学习它干嘛.

• 关于函数柯里化的一些小技巧

  • 给setTimeout传递地进来的函数添加参数

    一般情况下,我们如果想给一个setTimeout传递进来的函数添加参数的话,一般会使用之种方法:

    function hello(name) {
        console.log('Hello, ' + name);
    }
    setTimeout(hello('dreamapple'), 3600); //立即执行,不会在3.6s后执行
    setTimeout(function() {
        hello('dreamapple');
    }, 3600); // 3.6s 后执行

    我们使用了一个新的匿名函数包裹我们要执行的函数,然后在函数体里面给那个函数传递参数值.

    当然,在ES5里面,我们也可以使用函数的bind方法,如下所示:

    setTimeout(hello.bind(this, 'dreamapple'), 3600); // 3.6s 之后执行函数

    这样也是非常的方便快捷,并且可以绑定函数执行的上下文.

    我们本篇文章是讨论函数的柯里化,当然我们这里也可以使用函数的柯里化来达到这个效果:

    setTimeout(curryingHelper(hello, 'dreamapple'), 3600); // 其中curryingHelper是上面已经提及过的

    这样也是可以的,是不是很酷.其实函数的bind方法也是使用函数的柯里化来完成的,详情可以看这里Function.prototype.bind().

  • 写出这样一个函数multiply(1)(2)(3) == 6结果为true,multiply(1)(2)(3)(...)(n) == (1)*(2)*(3)*(...)*(n)结果为true

    这个题目不知道大家碰到过没有,不过通过函数的柯里化,也是有办法解决的,看下面的代码:

    function multiply(x) {
        var y = function(x) {
            return multiply(x * y);
        };
        y.toString = y.valueOf = function() {
            return x;
        };
        return y;
    }
    
    console.log(multiply(1)(2)(3) == 6); // true
    console.log(multiply(1)(2)(3)(4)(5) == 120); // true

    因为multiply(1)(2)(3)的直接结果并不是6,而是一个函数对象{ [Number: 6] valueOf: [Function], toString: [Function] },我们
    之后使用了==会将左边这个函数对象转换成为一个数字,所以就达到了我们想要的结果.还有关于为什么使用toString和valueOf方法
    可以看看这里的解释Number.prototype.valueOf(),Function.prototype.toString().

  • 上面的那个函数不够纯粹,我们也可以实现一个更纯粹的函数,但是可以会不太符合题目的要求.
    我们可以这样做,先把函数的参数存储,然后再对这些参数做处理,一旦有了这个思路,我们就不难写出些面的代码:

    function add() {
        var args = Array.prototype.slice.call(arguments);
        var _that = this;
        return function() {
            var newArgs = Array.prototype.slice.call(arguments);
            var total = args.concat(newArgs);
            if(!arguments.length) {
                var result = 1;
                for(var i = 0; i < total.length; i++) {
                    result *= total[i];
                }
                return result;
            }
            else {
                return add.apply(_that, total);
            }
        }
    }
    add(1)(2)(3)(); // 6
    add(1, 2, 3)(); // 6

  • 当我们的需要兼容IE9之前版本的IE浏览器的话,我们可能需要写出一些兼容的方案 ,比如事件监听;一般情况下我们应该会这样写:

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

    这也写也是可以的,但是性能上会差一点,因为如果是在低版本的IE浏览器上每一次都会运行if()语句,产生了不必要的性能开销.
    我们也可以这样写:

    var addEvent = (function () {
            if (window.addEventListener) {
                return function (el, type, fn, capture) {
                    el.addEventListener(type, fn, capture);
                }
            }
            else {
                return function (el, type, fn) {
                    var IEtype = 'on' + type;
                    el.attachEvent(IEtype, fn);
                }
            }
        })();

    这样就减少了不必要的开支,整个函数运行一次就可以了.

• 延迟计算

  上面的那两个函数multiply()和add()实际上就是延迟计算的例子.

• 提前绑定好函数里面的某些参数,达到参数复用的效果,提高了适用性.

  我们的I 开胃菜部分的tomLike和jerryLike其实就是属于这种的,绑定好函数里面的第一个参数,然后后面根据情况分别使用不同的函数.

• 固定易变因素

  我们经常使用的函数的bind方法就是一个固定易变因素的很好的例子.

关于柯里化的性能

当然,使用柯里化意味着有一些额外的开销;这些开销一般涉及到这些方面,首先是关于函数参数的调用,操作arguments对象通常会比操作命名的参数要慢一点;
还有,在一些老的版本的浏览器中arguments.length的实现是很慢的;直接调用函数fn要比使用fn.apply()或者fn.call()要快一点;产生大量的嵌套
作用域还有闭包会带来一些性能还有速度的降低.但是,大多数的web应用的性能瓶颈时发生在操作DOM上的,所以上面的那些开销比起DOM操作的开销还是比较小的.

关于本章一些知识点的解释

• 琐碎的知识点

  fn.length: 表示的是这个函数中参数的个数.

  arguments.callee: 指向的是当前运行的函数.callee是arguments对象的属性。
  在该函数的函数体内,它可以指向当前正在执行的函数.当函数是匿名函数时,这是很有用的,比如没有名字的函数表达式(也被叫做"匿名函数").
  详细解释可以看这里arguments.callee.我们可以看一下下面的例子:

  function hello() {
      return function() {
          console.log('hello');
          if(!arguments.length) {
              console.log('from a anonymous function.');
              return arguments.callee;
          }
      }
  }
  
  hello()(1); // hello
  
  /*
   * hello
   * from a anonymous function.
   * hello
   * from a anonymous function.
   */
  hello()()();

  fn.caller: 返回调用指定函数的函数.详细的解释可以看这里Function.caller,下面是示例代码:

  function hello() {
      console.log('hello');
      console.log(hello.caller);
  }
  
  function callHello(fn) {
      return fn();
  }
  
  callHello(hello); // hello [Function: callHello]

• 高阶函数(high-order function)

  高阶函数就是操作函数的函数,它接受一个或多个函数作为参数,并返回一个新的函数.
  我们来看一个例子,来帮助我们理解这个概念.就举一个我们高中经常遇到的场景,如下:

  f1(x, y) = x + y;
  f2(x) = x * x;
  f3 = f2(f3(x, y));

  我们来实现f3函数,看看应该如何实现,具体的代码如下所示:

  function f1(x, y) {
      return x + y;
  }
  
  function f2(x) {
      return x * x;
  }
  
  function func3(func1, func2) {
      return function() {
          return func2.call(this, func1.apply(this, arguments));
      }
  }
  
  var f3 = func3(f1, f2);
  console.log(f3(2, 3)); // 25

  我们通过函数func3将函数f1,f2结合到了一起,然后返回了一个新的函数f3;这个函数就是我们期望的那个函数.

• 不完全函数(partial function)

  什么是不完全函数呢?所谓的不完全函数和我们上面所说的柯里化基本差不多;所谓的不完全函数,就是给你想要运行的那个函数绑定一个固定的参数值;
  然后后面的运行或者说传递参数都是在前面的基础上进行运行的.看下面的例子:

  // 一个将函数的arguments对象变成一个数组的方法
  function array(a, n) {
      return Array.prototype.slice.call(a, n || 0);
  }
  // 我们要运行的函数
  function showMsg(a, b, c){
      return a * (b - c);
  }
  function partialLeft(f) {
      var args = arguments;
      return function() {
          var a = array(args, 1);
          a = a.concat(array(arguments));
          console.log(a); // 打印实际传递到函数中的参数列表
          return f.apply(this, a);
      }
  }
  function partialRight(f) {
      var args = arguments;
      return function() {
          var a = array(arguments);
          a = a.concat(array(args, 1));
          console.log(a); // 打印实际传递到函数中的参数列表
          return f.apply(this, a);
      }
  }
  function partial(f) {
      var args = arguments;
      return function() {
          var a = array(args, 1);
          var i = 0; j = 0;
          for(; i < a.length; i++) {
              if(a[i] === undefined) {
                  a[i] = arguments[j++];
              }
          }
          a = a.concat(array(arguments, j));
          console.log(a); // 打印实际传递到函数中的参数列表
          return f.apply(this, a);
      }
  }
  partialLeft(showMsg, 1)(2, 3); // 实际参数列表: [1, 2, 3] 所以结果是 1 * (2 - 3) = -1
  partialRight(showMsg, 1)(2, 3); // 实际参数列表: [2, 3, 1] 所以结果是 2 * (3 - 1) = 4
  partial(showMsg, undefined, 1)(2, 3); // 实际参数列表: [2, 1, 3] 所以结果是 2 * (1 - 3) = -4

一些你可能会喜欢的JS库

JavaScript的柯里化与JavaScript的函数式编程密不可分,下面列举了一些关于JavaScript函数式编程的库,大家可以看一下:

• underscore
• lodash
• ramda
• bacon.js
• fn.js
• functional-js

推荐教程：《JS教程》

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!