淺析 JavaScript 中的 函數 currying 柯裡化

何為Curry化/柯裡化？

curry化來源與數學家 Haskell Curry的名字 （程式設計語言 Haskell也是以他的名字命名）。

柯裡化通常也稱部分求值，其含義是給函數分步傳遞參數，每次傳遞參數後部分應用參數，并傳回一個更具體的函數接受剩下的參數，這中間可嵌套多層這樣的接受部分參數函數，直至傳回最後結果。

是以柯裡化的過程是逐漸傳參，逐漸縮小函數的适用範圍，逐漸求解的過程。

柯裡化一個求和函數

按照分步求值，我們看一個簡單的例子

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 ")

是一個

Function

，每次調用都傳回一個新的函數，該函數接受另一個調用，然後又傳回一個新的函數，直至最後傳回結果，分布求解，層層遞進。（PS：這裡利用了閉包的特點）

那麼現在我們更進一步，如果要求可傳遞的參數不止3個，可以傳任意多個參數，當不傳參數時輸出結果？

首先來個普通的實作：

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

但如果要求把每個數乘以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

函數，假如按照這個模式，現在要把每項加1,再彙總，那麼我們需要更換map中的函數。

下面看一下柯裡化實作：

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 （加總計算） 
           

上面 adder是柯裡化了的函數，它傳回一個新的函數，新的函數接收可分批次接受新的參數，延遲到最後一次計算。

通用的柯裡化函數

更典型的柯裡化會把最後一次的計算封裝進一個函數中，再把這個函數作為參數傳入柯裡化函數，這樣即清晰，又靈活。

例如 每項乘以10, 我們可以把處理函數作為參數傳入：

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  （空白調用時才真正計算）
           

這樣

sum = currying(multi)

，調用非常清晰，使用效果也堪稱絢麗，例如要累加多個值，可以把多個值作為做個參數

sum(1,2,3)

，也可以支援鍊式的調用，

sum(1)(2)(3)

柯裡化的基礎

上面的代碼其實是一個高階函數（high-order function）, 高階函數是指操作函數的函數，它接收一個或者多個函數作為參數，并傳回一個新函數。此外，還依賴與閉包的特性，來儲存中間過程中輸入的參數。即：

• 函數可以作為參數傳遞
• 函數能夠作為函數的傳回值
• 閉包

柯裡化的作用

• 延遲計算。上面的例子已經比較好低說明了。
• 參數複用。當在多次調用同一個函數，并且傳遞的參數絕大多數是相同的，那麼該函數可能是一個很好的柯裡化候選。
• 動态建立函數。這可以是在部分計算出結果後，在此基礎上動态生成新的函數處理後面的業務，這樣省略了重複計算。或者可以通過将要傳入調用函數的參數子集，部分應用到函數中，進而動态創造出一個新函數，這個新函數儲存了重複傳入的參數（以後不必每次都傳）。例如，事件浏覽器添加事件的輔助方法：

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

每次添加事件處理都要執行一遍 if...else...，其實在一個浏覽器中隻要一次判定就可以了，把根據一次判定之後的結果動态生成新的函數，以後就不必重新計算。

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

這個例子，第一次 if...else... 判斷之後，完成了部分計算，動态建立新的函數來處理後面傳入的參數，這是一個典型的柯裡化。

Function.prototype.bind 方法也是柯裡化應用

與 call/apply 方法直接執行不同，bind 方法 将第一個參數設定為函數執行的上下文，其他參數依次傳遞給調用方法（函數的主體本身不執行，可以看成是延遲執行），并動态建立傳回一個新的函數， 這符合柯裡化特點。

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

下面是一個

bind

函數的模拟，

testBind

建立并傳回新的函數，在新的函數中将真正要執行業務的函數綁定到實參傳入的上下文，延遲執行了。

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
           

這裡要注意

prototype

中

this

的了解。

關于

bind

方法的更多内容請見我的另一篇部落格：淺析 JavaScript 中的 Function.prototype.bind() 方法

相關的理念還有反柯裡化

uncurrying

，請見我的另一篇部落格：淺析 JavaScript 中的 函數 uncurrying 反柯裡化

參考資料：

JS中的柯裡化(currying)

JavaScript Patterns, by stoyan stefanov

為什麼要柯裡化（curry）

淺析 JavaScript 中的 函數 uncurrying 反柯裡化