JavaScript 專題系列第十三篇，講解函式柯里化以及如何實現一個 curry 函式
定義
維基百科中對柯里化 (Currying) 的定義為：
In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument.
翻譯成中文：
在數學和電腦科學中，柯里化是一種將使用多個引數的一個函式轉換成一系列使用一個引數的函式的技術。
舉個例子：
function add(a, b) {
return a + b;
}
// 執行 add 函式，一次傳入兩個引數即可
add(1, 2) // 3
// 假設有一個 curry 函式可以做到柯里化
var addCurry = curry(add);
addCurry(1)(2) // 3複製程式碼用途
我們會講到如何寫出這個 curry 函式，並且會將這個 curry 函式寫的很強大，但是在編寫之前，我們需要知道柯里化到底有什麼用？
舉個例子：
// 示意而已
function ajax(type, url, data) {
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.send(data);
}
// 雖然 ajax 這個函式非常通用，但在重複呼叫的時候引數冗餘
ajax('POST', 'www.test.com', "name=kevin")
ajax('POST', 'www.test2.com', "name=kevin")
ajax('POST', 'www.test3.com', "name=kevin")
// 利用 curry
var ajaxCurry = curry(ajax);
// 以 POST 型別請求資料
var post = ajaxCurry('POST');
post('www.test.com', "name=kevin");
// 以 POST 型別請求來自於 www.test.com 的資料
var postFromTest = post('www.test.com');
postFromTest("name=kevin");複製程式碼想想 jQuery 雖然有 $.ajax 這樣通用的方法，但是也有 $.get 和 $.post 的語法糖。(當然 jQuery 底層是否是這樣做的，我就沒有研究了)。
curry 的這種用途可以理解為：引數複用。本質上是降低通用性，提高適用性。
可是即便如此，是不是依然感覺沒什麼用呢？
如果我們僅僅是把引數一個一個傳進去，意義可能不大，但是如果我們是把柯里化後的函式傳給其他函式比如 map 呢？
舉個例子：
比如我們有這樣一段資料：
var person = [{name: 'kevin'}, {name: 'daisy'}]複製程式碼如果我們要獲取所有的 name 值，我們可以這樣做：
var name = person.map(function (item) {
return item.name;
})複製程式碼不過如果我們有 curry 函式：
var prop = curry(function (key, obj) {
return obj[key]
});
var name = person.map(prop('name'))複製程式碼我們為了獲取 name 屬性還要再編寫一個 prop 函式，是不是又麻煩了些？
但是要注意，prop 函式編寫一次後，以後可以多次使用，實際上程式碼從原本的三行精簡成了一行，而且你看程式碼是不是更加易懂了？
person.map(prop('name')) 就好像直白的告訴你：person 物件遍歷(map)獲取(prop) name 屬性。
是不是感覺有點意思了呢？
第一版
未來我們會接觸到更多有關柯里化的應用，不過那是未來的事情了，現在我們該編寫這個 curry 函式了。
一個經常會看到的 curry 函式的實現為：
// 第一版
var curry = function (fn) {
var args = [].slice.call(arguments, 1);
return function() {
var newArgs = args.concat([].slice.call(arguments));
return fn.apply(this, newArgs);
};
};複製程式碼我們可以這樣使用：
function add(a, b) {
return a + b;
}
var addCurry = curry(add, 1, 2);
addCurry() // 3
//或者
var addCurry = curry(add, 1);
addCurry(2) // 3
//或者
var addCurry = curry(add);
addCurry(1, 2) // 3複製程式碼已經有柯里化的感覺了，但是還沒有達到要求，不過我們可以把這個函式用作輔助函式，幫助我們寫真正的 curry 函式。
第二版
// 第二版
function sub_curry(fn) {
var args = [].slice.call(arguments, 1);
return function() {
return fn.apply(this, args.concat([].slice.call(arguments)));
};
}
function curry(fn, length) {
length = length || fn.length;
var slice = Array.prototype.slice;
return function() {
if (arguments.length < length) {
var combined = [fn].concat(slice.call(arguments));
return curry(sub_curry.apply(this, combined), length - arguments.length);
} else {
return fn.apply(this, arguments);
}
};
}複製程式碼我們驗證下這個函式：
var fn = curry(function(a, b, c) {
return [a, b, c];
});
fn("a", "b", "c") // ["a", "b", "c"]
fn("a", "b")("c") // ["a", "b", "c"]
fn("a")("b")("c") // ["a", "b", "c"]
fn("a")("b", "c") // ["a", "b", "c"]複製程式碼效果已經達到我們的預期，然而這個 curry 函式的實現好難理解吶……
為了讓大家更好的理解這個 curry 函式，我給大家寫個極簡版的程式碼：
function sub_curry(fn){
return function(){
return fn()
}
}
function curry(fn, length){
length = length || 4;
return function(){
if (length > 1) {
return curry(sub_curry(fn), --length)
}
else {
return fn()
}
}
}
var fn0 = function(){
console.log(1)
}
var fn1 = curry(fn0)
fn1()()()() // 1複製程式碼大家先從理解這個 curry 函式開始。
當執行 fn1() 時，函式返回：
curry(sub_curry(fn0))
// 相當於
curry(function(){
return fn0()
})複製程式碼當執行 fn1()() 時，函式返回：
curry(sub_curry(function(){
return fn0()
}))
// 相當於
curry(function(){
return (function(){
return fn0()
})()
})
// 相當於
curry(function(){
return fn0()
})複製程式碼當執行 fn1()()() 時，函式返回：
// 跟 fn1()() 的分析過程一樣
curry(function(){
return fn0()
})複製程式碼當執行 fn1()()()() 時，因為此時 length > 2 為 false，所以執行 fn()：
fn()
// 相當於
(function(){
return fn0()
})()
// 相當於
fn0()
// 執行 fn0 函式，列印 1複製程式碼再回到真正的 curry 函式，我們以下面的例子為例：
var fn0 = function(a, b, c, d) {
return [a, b, c, d];
}
var fn1 = curry(fn0);
fn1("a", "b")("c")("d")複製程式碼當執行 fn1("a", "b") 時：
fn1("a", "b")
// 相當於
curry(fn0)("a", "b")
// 相當於
curry(sub_curry(fn0, "a", "b"))
// 相當於
// 注意 ... 只是一個示意，表示該函式執行時傳入的引數會作為 fn0 後面的引數傳入
curry(function(...){
return fn0("a", "b", ...)
})複製程式碼當執行 fn1("a", "b")("c") 時，函式返回：
curry(sub_curry(function(...){
return fn0("a", "b", ...)
}), "c")
// 相當於
curry(function(...){
return (function(...) {return fn0("a", "b", ...)})("c")
})
// 相當於
curry(function(...){
return fn0("a", "b", "c", ...)
})複製程式碼當執行 fn1("a", "b")("c")("d") 時，此時 arguments.length < length 為 false ，執行 fn(arguments)，相當於：
(function(...){
return fn0("a", "b", "c", ...)
})("d")
// 相當於
fn0("a", "b", "c", "d")複製程式碼函式執行結束。
所以，其實整段程式碼又很好理解：
sub_curry 的作用就是用函式包裹原函式，然後給原函式傳入之前的引數，當執行 fn0(...)(...) 的時候，執行包裹函式，返回原函式，然後再呼叫 sub_curry 再包裹原函式，然後將新的引數混合舊的引數再傳入原函式，直到函式引數的數目達到要求為止。
如果要明白 curry 函式的執行原理，大家還是要動手寫一遍，嘗試著分析執行步驟。
更易懂的實現
當然了，如果你覺得還是無法理解，你可以選擇下面這種實現方式，可以實現同樣的效果：
function curry(fn, args) {
length = fn.length;
args = args || [];
return function() {
var _args = args.slice(0),
arg, i;
for (i = 0; i < arguments.length; i++) {
arg = arguments[i];
_args.push(arg);
}
if (_args.length < length) {
return curry.call(this, fn, _args);
}
else {
return fn.apply(this, _args);
}
}
}
var fn = curry(function(a, b, c) {
console.log([a, b, c]);
});
fn("a", "b", "c") // ["a", "b", "c"]
fn("a", "b")("c") // ["a", "b", "c"]
fn("a")("b")("c") // ["a", "b", "c"]
fn("a")("b", "c") // ["a", "b", "c"]複製程式碼或許大家覺得這種方式更好理解，又能實現一樣的效果，為什麼不直接就講這種呢？
因為想給大家介紹各種實現的方法嘛，不能因為難以理解就不給大家介紹吶~
第三版
curry 函式寫到這裡其實已經很完善了，但是注意這個函式的傳參順序必須是從左到右，根據形參的順序依次傳入，如果我不想根據這個順序傳呢？
我們可以建立一個佔位符，比如這樣：
var fn = curry(function(a, b, c) {
console.log([a, b, c]);
});
fn("a", _, "c")("b") // ["a", "b", "c"]複製程式碼我們直接看第三版的程式碼：
// 第三版
function curry(fn, args, holes) {
length = fn.length;
args = args || [];
holes = holes || [];
return function() {
var _args = args.slice(0),
_holes = holes.slice(0),
argsLen = args.length,
holesLen = holes.length,
arg, i, index = 0;
for (i = 0; i < arguments.length; i++) {
arg = arguments[i];
// 處理類似 fn(1, _, _, 4)(_, 3) 這種情況，index 需要指向 holes 正確的下標
if (arg === _ && holesLen) {
index++
if (index > holesLen) {
_args.push(arg);
_holes.push(argsLen - 1 + index - holesLen)
}
}
// 處理類似 fn(1)(_) 這種情況
else if (arg === _) {
_args.push(arg);
_holes.push(argsLen + i);
}
// 處理類似 fn(_, 2)(1) 這種情況
else if (holesLen) {
// fn(_, 2)(_, 3)
if (index >= holesLen) {
_args.push(arg);
}
// fn(_, 2)(1) 用引數 1 替換佔位符
else {
_args.splice(_holes[index], 1, arg);
_holes.splice(index, 1)
}
}
else {
_args.push(arg);
}
}
if (_holes.length || _args.length < length) {
return curry.call(this, fn, _args, _holes);
}
else {
return fn.apply(this, _args);
}
}
}
var _ = {};
var fn = curry(function(a, b, c, d, e) {
console.log([a, b, c, d, e]);
});
// 驗證 輸出全部都是 [1, 2, 3, 4, 5]
fn(1, 2, 3, 4, 5);
fn(_, 2, 3, 4, 5)(1);
fn(1, _, 3, 4, 5)(2);
fn(1, _, 3)(_, 4)(2)(5);
fn(1, _, _, 4)(_, 3)(2)(5);
fn(_, 2)(_, _, 4)(1)(3)(5)複製程式碼寫在最後
至此，我們已經實現了一個強大的 curry 函式，可是這個 curry 函式符合柯里化的定義嗎？柯里化可是將一個多引數的函式轉換成多個單引數的函式，但是現在我們不僅可以傳入一個引數，還可以一次傳入兩個引數，甚至更多引數……這看起來更像一個柯里化 (curry) 和偏函式 (partial application) 的綜合應用，可是什麼又是偏函式呢？下篇文章會講到。
專題系列
JavaScript專題系列目錄地址：github.com/mqyqingfeng…。
JavaScript專題系列預計寫二十篇左右，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、型別判斷、拷貝、最值、扁平、柯里、遞迴、亂序、排序等，特點是研(chao)究(xi) underscore 和 jQuery 的實現方式。
如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。