深入剖析JavaScript中的函數(shù)currying柯里化

字號(hào):


    下面小編就為大家?guī)?lái)一篇深入剖析JavaScript中的函數(shù)currying柯里化。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧
    curry化來(lái)源與數(shù)學(xué)家 Haskell Curry的名字 (編程語(yǔ)言 Haskell也是以他的名字命名)。 
    柯里化通常也稱部分求值,其含義是給函數(shù)分步傳遞參數(shù),每次傳遞參數(shù)后部分應(yīng)用參數(shù),并返回一個(gè)更具體的函數(shù)接受剩下的參數(shù),這中間可嵌套多層這樣的接受部分參數(shù)函數(shù),直至返回最后結(jié)果。
    因此柯里化的過(guò)程是逐步傳參,逐步縮小函數(shù)的適用范圍,逐步求解的過(guò)程。 
    柯里化一個(gè)求和函數(shù) 
    按照分步求值,我們看一個(gè)簡(jiǎn)單的例子
    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
    可以看到, concat3WordsCurrying("foo ") 是一個(gè) Function,每次調(diào)用都返回一個(gè)新的函數(shù),該函數(shù)接受另一個(gè)調(diào)用,然后又返回一個(gè)新的函數(shù),直至最后返回結(jié)果,分布求解,層層遞進(jìn)。(PS:這里利用了閉包的特點(diǎn)) 
    那么現(xiàn)在我們更進(jìn)一步,如果要求可傳遞的參數(shù)不止3個(gè),可以傳任意多個(gè)參數(shù),當(dāng)不傳參數(shù)時(shí)輸出結(jié)果? 
    首先來(lái)個(gè)普通的實(shí)現(xiàn):
    var add = function(items){ 
      return items.reduce(function(a,b){ 
        return a+b 
      }); 
    }; 
    console.log(add([1,2,3,4]));
    但如果要求把每個(gè)數(shù)乘以10之后再相加,那么: 
    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));
    好在有 map 和 reduce 函數(shù),假如按照這個(gè)模式,現(xiàn)在要把每項(xiàng)加1,再匯總,那么我們需要更換map中的函數(shù)。 
    下面看一下柯里化實(shí)現(xiàn): 
    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);  // 調(diào)用形式靈活,一次調(diào)用可輸入一個(gè)或者多個(gè)參數(shù),并且支持鏈?zhǔn)秸{(diào)用 
    sum(400); 
    console.log(sum());  // 1000 (加總計(jì)算) 
    上面 adder是柯里化了的函數(shù),它返回一個(gè)新的函數(shù),新的函數(shù)接收可分批次接受新的參數(shù),延遲到最后一次計(jì)算。 
    通用的柯里化函數(shù)
    更典型的柯里化會(huì)把最后一次的計(jì)算封裝進(jìn)一個(gè)函數(shù)中,再把這個(gè)函數(shù)作為參數(shù)傳入柯里化函數(shù),這樣即清晰,又靈活。
    例如 每項(xiàng)乘以10, 我們可以把處理函數(shù)作為參數(shù)傳入:
    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 (空白調(diào)用時(shí)才真正計(jì)算)
    這樣 sum = currying(multi),調(diào)用非常清晰,使用效果也堪稱絢麗,例如要累加多個(gè)值,可以把多個(gè)值作為做個(gè)參數(shù) sum(1,2,3),也可以支持鏈?zhǔn)降恼{(diào)用,sum(1)(2)(3) 
    柯里化的基礎(chǔ)
    上面的代碼其實(shí)是一個(gè)高階函數(shù)(high-order function), 高階函數(shù)是指操作函數(shù)的函數(shù),它接收一個(gè)或者多個(gè)函數(shù)作為參數(shù),并返回一個(gè)新函數(shù)。此外,還依賴與閉包的特性,來(lái)保存中間過(guò)程中輸入的參數(shù)。即: 
    函數(shù)可以作為參數(shù)傳遞 
    函數(shù)能夠作為函數(shù)的返回值 
    閉包 
    柯里化的作用 
    延遲計(jì)算。上面的例子已經(jīng)比較好低說(shuō)明了。
    參數(shù)復(fù)用。當(dāng)在多次調(diào)用同一個(gè)函數(shù),并且傳遞的參數(shù)絕大多數(shù)是相同的,那么該函數(shù)可能是一個(gè)很好的柯里化候選。
    動(dòng)態(tài)創(chuàng)建函數(shù)。這可以是在部分計(jì)算出結(jié)果后,在此基礎(chǔ)上動(dòng)態(tài)生成新的函數(shù)處理后面的業(yè)務(wù),這樣省略了重復(fù)計(jì)算?;蛘呖梢酝ㄟ^(guò)將要傳入調(diào)用函數(shù)的參數(shù)子集,部分應(yīng)用到函數(shù)中,從而動(dòng)態(tài)創(chuàng)造出一個(gè)新函數(shù),這個(gè)新函數(shù)保存了重復(fù)傳入的參數(shù)(以后不必每次都傳)。例如,事件瀏覽器添加事件的輔助方法: 
    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); 
        }); 
      } 
    };
    每次添加事件處理都要執(zhí)行一遍 if...else...,其實(shí)在一個(gè)瀏覽器中只要一次判定就可以了,把根據(jù)一次判定之后的結(jié)果動(dòng)態(tài)生成新的函數(shù),以后就不必重新計(jì)算。 
    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); 
          }); 
        }; 
      } 
    })();
    這個(gè)例子,第一次 if...else... 判斷之后,完成了部分計(jì)算,動(dòng)態(tài)創(chuàng)建新的函數(shù)來(lái)處理后面?zhèn)魅氲膮?shù),這是一個(gè)典型的柯里化。 
    Function.prototype.bind 方法也是柯里化應(yīng)用
    與 call/apply 方法直接執(zhí)行不同,bind 方法 將第一個(gè)參數(shù)設(shè)置為函數(shù)執(zhí)行的上下文,其他參數(shù)依次傳遞給調(diào)用方法(函數(shù)的主體本身不執(zhí)行,可以看成是延遲執(zhí)行),并動(dòng)態(tài)創(chuàng)建返回一個(gè)新的函數(shù), 這符合柯里化特點(diǎn)。 
    var foo = {x: 888}; 
    var bar = function () { 
      console.log(this.x); 
    }.bind(foo);        // 綁定 
    bar();           // 888 
    下面是一個(gè) bind 函數(shù)的模擬,testBind 創(chuàng)建并返回新的函數(shù),在新的函數(shù)中將真正要執(zhí)行業(yè)務(wù)的函數(shù)綁定到實(shí)參傳入的上下文,延遲執(zhí)行了。 
    Function.prototype.testBind = function (scope) { 
      var fn = this;          //// this 指向的是調(diào)用 testBind 方法的一個(gè)函數(shù), 
      return function () { 
        return fn.apply(scope); 
      } 
    }; 
    var testBindBar = bar.testBind(foo); // 綁定 foo,延遲執(zhí)行 
    console.log(testBindBar);       // Function (可見(jiàn),bind之后返回的是一個(gè)延遲執(zhí)行的新函數(shù)) 
    testBindBar();            // 888 
    這里要注意 prototype 中 this 的理解。
    以上這篇深入剖析JavaScript中的函數(shù)currying 柯里化就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考