Bringen Sie dazu, das Currying von JavaScript-Funktionen zu verstehen und zu beherrschen

Sowohl Haskell als auch Scala unterstützen das Currying von JavaScript-Funktionen. Wenn Sie interessiert sind, können Sie diese Aspekte besser verstehen .

Einige Wissenspunkte, die Sie kennen müssen, um diesen Artikel zu lesen

• Der Funktionsteilcall/apply/arguments
• Schließung
• Funktion höherer Ordnung
• Unvollständige Funktion

Eine einfache Erklärung dieses Wissens finden Sie am Ende des Artikels, Sie können einen Blick darauf werfen.

Was ist Currying?

Schauen wir uns zunächst an, wie es in Wikipedia definiert ist: In der Informatik wird Currying (englisch: Currying), auch übersetzt als Curry-Galifizierung oder Garnisonierung, verwendet Eine Technik, die eine Funktion, die mehrere Parameter akzeptiert, in eine Funktion umwandelt, die einen einzelnen Parameter akzeptiert (den ersten Parameter der ursprünglichen Funktion), und eine neue Funktion zurückgibt, die die verbleibenden Parameter akzeptiert und ein Ergebnis zurückgibt.

Wir können ein einfaches Beispiel geben: add ist eine allgemeine Funktion, die darin besteht, die übergebenen Parameter a hinzuzufügen, und b ist die Funktion curryingAdd ist eine Funktion zum Currying. Auf diese Weise mussten wir ursprünglich zwei Parameter direkt an die Funktion übergeben, um Operationen auszuführen Funktion ist wie folgt: addrrree
Wenn Sie das sehen, fragen Sie sich vielleicht: Warum tun wir das? Welche Vorteile kann das für unsere Anwendung bringen? lasst uns weiterlesen. abWarum müssen Sie die Funktion currieren?

Sie können einige Tipps verwenden (siehe unten)

Einige Parameter in die Funktion einbinden Fortschritt. Es erzielt den Effekt der Parameterwiederverwendung und verbessert die Anwendbarkeit.

• Feste variable Faktoren
• Verzögerte Berechnung
• Kurz gesagt, das Currying von Funktionen ermöglicht es Ihnen, Kombinieren Sie Ihre Anwendung und teilen Sie Ihre komplexen Funktionen in kleine Teile auf.
• Wie codiere ich Funktionen?

In diesem Teil wird Ihnen Schritt für Schritt erklären, wie Sie eine Multiparameter-Funktion erstellen können:

,

,

Warten.

闭包高阶函数不完全函数

I Appetizer

• Wenn wir eine Funktion implementieren möchten, müssen wir die Anweisung Like ausgeben, wobei

  und

  beide variable Parameter sind. Dann schreiben wir im Allgemeinen so : name

  function add(a, b) {
      return a + b;
  }
  
  function curryingAdd(a) {
      return function(b) {
          return a + b;
      }
  }
  
  add(1, 2); // 3
  curryingAdd(1)(2); // 3

  song Nachdem wir die obige Funktion bearbeitet haben, können wir so schreiben: name

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

  song
  II Hähnchen geschmort mit Pilzen

• Obwohl wir die Funktion oben beschrieben haben, möchten wir sie nicht mehr bearbeiten. Es ist einfach ein Albtraum, weiterhin Funktionen wie die oben genannten zu verschachteln. Daher müssen wir einige Funktionen erstellen, die andere Funktionen unterstützen Nennen wir es vorerst

  . Die

  -Funktion lautet wie folgt: printInfo

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

  
  Hier ist eine kleine Erklärung stellt das an die Funktion übergebene Parameterobjekt dar. Es ist kein Array, sondern ein Array-ähnliches Objekt. Wir können also die curryingHelper-Methode der Funktion verwenden und dann die curryingHelper-Methode verwenden, um den Inhalt abzurufen .

  Wir verwenden arguments, um die richtigen Parameter an die Funktion
  zu übergeben.Array.prototype.slice.callAls nächstes schreiben wir eine einfache Funktion, um die Richtigkeit der oben genannten Hilfs-Currying-Funktion zu überprüfen Teil ist wie folgt:arguments

  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);
      }
  }

  
  Das obige Ergebnis zeigt, dass unsere Currying-Funktion korrekt ist. Die obige fn.apply(this, _totalArgs) ist eine fnFunktion höherer Ordnung. Bitte beachten Sie Folgendes.

  curryingHelperIII Beef Hot Pot

Die oben genannte Curry-Hilfsfunktion kann zwar unsere allgemeinen Bedürfnisse erfüllen, ist es aber nicht Gut genug. Wir hoffen, dass diese Curry-Funktionen jeweils nur einen Parameter übergeben können. Dann können wir die Parameter mehrmals übergeben. Was sollten wir also tun? Um die oben erwähnten
• -Funktionen zu realisieren, lautet der Code wie folgt:

  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

  wobei die oben erwähnte Funktion ist II Hühnchen geschmort mit Pilzen

  Beachten Sie, dass
  die Parameterlänge dieser Funktion darstellt. betterCurryingHelper Als nächstes überprüfen wir die Richtigkeit dieser Funktion:
  

  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);
          }
      };
  }

  wobei

  die im Teil von curryingHelperII Chicken erwähnte Funktion ist Mit Pilzen gedünstet Wir können sehen, dass dies fn.length die gewünschte Funktion erfüllt. Und wir können die Curry-Funktion genauso verwenden wie das Original.
  

  showMsgIV eingelegte Paprika-Hühnerfüße
  

  我们已经能够写出很好的柯里化辅助函数了,但是这还不算是最刺激的,如果我们在传递参数的时候可以不按照顺来那一定很酷;当然我们也可以写出这样的函数来,
  这个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教程》

Das obige ist der detaillierte Inhalt vonBringen Sie dazu, das Currying von JavaScript-Funktionen zu verstehen und zu beherrschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!