深入解析JavaScript中函數的Currying柯裡化，currying柯裡化

深入解析JavaScript中函數的Currying柯裡化，currying柯裡化

引子
先來看一道小問題：
有人在群裡出了到一道題目：
var s = sum(1)(2)(3) ....... 最後 alert(s) 出來是6 
var s = sum(1)(2)(3)(4) ....... 最後 alert(s) 出來是10 
問sum怎麼實現？
剛看到題目，我第一反應是sum返回的是一個function，但是沒有最終實現，印象中看到過類似的原理，但是記不清了。
 
後來同事說，這個是叫柯裡化，
實現方法比較巧妙：
 

function sum(x){  var y = function(x){   return sum(x+y)  }  y.toString = y.valueOf = function(){   return x;  }  return y; } 

下面我們就深入來看一下currying柯裡化~

什麼是柯裡化？

柯裡化是這樣的一個轉換過程，把接受多個參數的函數變換成接受一個單一參數(註：最初函數的第一個參數)的函數，如果其他的參數是必要的，返回接受餘下的參數且返回結果的新函數。

當我們這麼說的時候，我想柯裡化聽起來相當簡單。JavaScript中是怎麼實現的呢？
假設我們要寫一個函數，接受3個參數。

var sendMsg = function (from, to, msg) { alert(["Hello " + to + ",", msg, "Sincerely,", "- " + from].join("\n"));};

現在，假定我們有柯裡化函數，能夠把傳統的JavaScript函數轉換成柯裡化後的函數：

var sendMsgCurried = curry(sendMsg); // returns function(a,b,c) var sendMsgFromJohnToBob = sendMsgCurried("John")("Bob"); // returns function(c) sendMsgFromJohnToBob("Come join the curry party!"); //=> "Hello Bob, Come join the curry party! Sincerely, - John"

手動柯裡化

在上面的例子中，我們假定擁有神秘的curry函數。我會實現這樣的函數，但是現在，我們首先看看為什麼這樣的函數是如此必要。
舉個例子，手動柯裡化一個函數並不困難，但是確實有點囉嗦:

// uncurriedvar example1 = function (a, b, c) { // do something with a, b, and c}; // curriedvar example2 = function(a) { return function (b) {  return function (c) {   // do something with a, b, and c  }; };};

在JavaScript，即使你不指定一個函數所有的參數，函數仍將被調用。這是個非常實用JavaScript的功能，但是卻給柯裡化製造了麻煩。

思路是每一個函數都是有且只有一個參數的函數。如果你想擁有多個參數，你必須定義一系列相互嵌套的函數。討厭！這樣做一次兩次還可以，可是需要以這種方式定義需要很多參數的函數的時候，就會變得相當囉嗦和難於閱讀。（但是別擔心，我會馬上告訴你一個辦法）

一些函數程式設計語言，像Haskell和OCaml，文法中內建了函數柯裡化。在這些語言中，舉個例子，每個函數是擁有一個參數的函數，並且只有一個參數。你可能會認為這種限制麻煩勝過好處，但是語言的文法就是這樣，這種限制幾乎無法察覺。

舉個例子，在OCaml,你可以用兩種方式定義上面example：

let example1 = fun a b c -> // (* do something with a, b, c *) let example2 = fun a -> fun b ->  fun c ->   // (* do something with a, b, c *)

很容易看出這兩個例子和上面的那兩個例子是如何的相似。

區別，然而，是否在OCaml也是做了同樣的事情。OCaml，沒有擁有多個參數的函數。但是，在一行中聲明多個參數就是嵌套定義單參函數“捷徑”。

類似的 ，我們期待調用柯裡化函數句法上和OCaml中調用多參函數類似。我們期望這樣調用上面的函數：

example1 foo bar bazexample2 foo bar baz

而在JavaScript，我們採用明顯不同的方式：

example1(foo, bar, baz);example2(foo)(bar)(baz);

在OCaml這類語言中，柯裡化是內建的。在JavaScript，柯裡化雖然可行（高階函數），但是文法上是不方便的。這也是為什麼我們決定編寫一個柯裡化函數來幫我們做這些繁瑣的事情，並使得我們的代碼簡潔。

建立一個curry輔助函數

理論上我們期望可以有一個方便的方式轉換普通老式的JavaScript函數（多個參數）到完全柯裡化的函數。

這個想法不是我專屬的，其他的人已經實現過了，例如在wu.js 庫中的.autoCurry()函數（儘管你關心的是我們自己的實現方式）。

首先，讓我們建立一個簡單的輔助函數 .sub_curry:

function sub_curry(fn /*, variable number of args */) { var args = [].slice.call(arguments, 1); return function () {  return fn.apply(this, args.concat(toArray(arguments))); };}

讓我們花點時間看看這個函數的功能。相當簡單。sub_curry接受一個函數fn作為它的第一個參數，後面跟著任何數目的輸入參數。返回的是一個函數，這個函數返回fn.apply執行結果，參數序列合并了該函數最初傳入參數的，加上fn調用的時候傳入參數的。

看例子：

var fn = function(a, b, c) { return [a, b, c]; }; // these are all equivalentfn("a", "b", "c");sub_curry(fn, "a")("b", "c");sub_curry(fn, "a", "b")("c");sub_curry(fn, "a", "b", "c")();//=> ["a", "b", "c"]

很明顯，這並不是我門想要的，但是看起來有點柯裡化的意思了。現在我們將定義柯裡化函數curry：

function curry(fn, length) { // capture fn's # of parameters length = length || fn.length; return function () {  if (arguments.length < length) {   // not all arguments have been specified. Curry once more.   var combined = [fn].concat(toArray(arguments));   return length - arguments.length > 0     ? curry(sub_curry.apply(this, combined), length - arguments.length)    : sub_curry.call(this, combined );  } else {   // all arguments have been specified, actually call function   return fn.apply(this, arguments);  } };}

這個函數接受兩個參數，一個函數和要“柯裡化”的參數數目。第二個參數是可選的，如果省略，預設使用Function.prototype.length 屬性，就是為了告訴你這個函數定義了幾個參數。

最終，我們能夠論證下面的行為：

var fn = curry(function(a, b, c) { return [a, b, c]; }); // these are all equivalentfn("a", "b", "c");fn("a", "b", "c");fn("a", "b")("c");fn("a")("b", "c");fn("a")("b")("c");//=> ["a", "b", "c"]

我知道你在想什麼…

等等…什嗎？！

難道你瘋了？應該是這樣！我們現在能夠在JavaScript中編寫柯裡化函數，表現就如同OCaml或者Haskell中的那些函數。甚至，如果我想要一次傳遞多個參數，我可以向我從前做的那樣，用逗號分隔下參數就可以了。不需要參數間那些醜陋的括弧，即使是它是柯裡化後的。

這個相當有用，我會立即馬上談論這個，可是首先我要讓這個Curry函數前進一小步。

柯裡化和“洞”(“holes”)

儘管柯裡化函數已經很牛了，但是它也讓你必須花費點小心思在你所定義函數的參數順序上。終究，柯裡化的背後思路就是建立函數，更具體的功能，分離其他更多的通用功能，通過分步應用它們。

當然這個只能工作在當最左參數就是你想要分步應用的參數！

為瞭解決這個，在一些函數式程式設計語言中，會定義一個特殊的“佔位變數”。通常會指定底線來幹這事，如過作為一個函數的參數被傳入，就表明這個是可以“跳過的”。是尚待指定的。

這是非常有用的，當你想要分步應用（partially apply）一個特定函數，但是你想要分布應用（partially apply）的參數並不是最左參數。

舉個例子，我們有這樣的一個函數：

var sendAjax = function (url, data, options) { /* ... */ }

也許我們想要定義一個新的函數，我們部分提供SendAjax函數特定的Options,但是允許url和data可以被指定。

當然了，我們能夠相當簡單的這樣定義函數：

var sendPost = function (url, data) { return sendAjax(url, data, { type: "POST", contentType: "application/json" });};

或者，使用使用約定的底線方式，就像下面這樣：

var sendPost = sendAjax( _ , _ , { type: "POST", contentType: "application/json" });

注意兩個參數以底線的方式傳入。顯然，JavaScript並不具備這樣的原生支援，於是我們怎樣才能這樣做呢？

回過頭讓我們把curry函數變得智能一點…

首先我們把我們的“預留位置”定義成一個全域變數。

var _ = {};

我們把它定義成對象字面量{},便於我們可以通過===操作符來判等。

不管你喜不喜歡，為了簡單一點我們就使用_來做“預留位置”。現在我們就可以定義新的curry函數，就像下面這樣：

function curry (fn, length, args, holes) { length = length || fn.length; args = args || []; holes = holes || []; return function(){  var _args = args.slice(0),   _holes = holes.slice(0),   argStart = _args.length,   holeStart = _holes.length,   arg, i;  for(i = 0; i < arguments.length; i++) {   arg = arguments[i];   if(arg === _ && holeStart) {    holeStart--;    _holes.push(_holes.shift()); // move hole from beginning to end   } else if (arg === _) {    _holes.push(argStart + i); // the position of the hole.   } else if (holeStart) {    holeStart--;    _args.splice(_holes.shift(), 0, arg); // insert arg at index of hole   } else {    _args.push(arg);   }  }  if(_args.length < length) {   return curry.call(this, fn, length, _args, _holes);  } else {   return fn.apply(this, _args);  } }}

實際代碼還是有著巨大不同的。 我們這裡做了一些關於這些“洞”(holes)參數是什麼的記錄。概括而言，啟動並執行職責是相同的。

展示下我們的新幫手，下面的語句都是等價的：

var f = curry(function(a, b, c) { return [a, b, c]; });var g = curry(function(a, b, c, d, e) { return [a, b, c, d, e]; }); // all of these are equivalentf("a","b","c");f("a")("b")("c");f("a", "b", "c");f("a", _, "c")("b");f( _, "b")("a", "c");//=> ["a", "b", "c"] // all of these are equivalentg(1, 2, 3, 4, 5);g(_, 2, 3, 4, 5)(1);g(1, _, 3)(_, 4)(2)(5);//=> [1, 2, 3, 4, 5]

瘋狂吧？！

我為什麼要關心？柯裡化能夠怎麼協助我？

你可能會停在這兒思考…

這看起來挺酷而且…但是這真的能協助我編寫更好的代碼？

這裡有很多原因關於為什麼函數柯裡化是有用的。

函數柯裡化允許和鼓勵你分隔複雜功能變成更小更容易分析的部分。這些小的邏輯單元顯然是更容易理解和測試的，然後你的應用就會變成乾淨而整潔的組合，由一些小單元組成的組合。

為了給一個簡單的例子，讓我們分別使用Vanilla.js, Underscore.js, and “函數化方式” (極端利用函數化特性)來編寫CSV解析器。

Vanilla.js (Imperative)

//+ String -> [String]var processLine = function (line){ var row, columns, j; columns = line.split(","); row = []; for(j = 0; j < columns.length; j++) {  row.push(columns[j].trim()); }}; //+ String -> [[String]]var parseCSV = function (csv){ var table, lines, i;  lines = csv.split("\n"); table = []; for(i = 0; i < lines.length; i++) {  table.push(processLine(lines[i])); } return table;};Underscore.js//+ String -> [String]var processLine = function (row) { return _.map(row.split(","), function (c) {  return c.trim(); });}; //+ String -> [[String]]var parseCSV = function (csv){ return _.map(csv.split("\n"), processLine);};

函數化方式

//+ String -> [String]var processLine = compose( map(trim) , split(",") ); //+ String -> [[String]]var parseCSV = compose( map(processLine) , split("\n") );

所有這些例子功能上是等價的。我有意的儘可能的簡單的編寫這些。

想要達到某種效果是很難的，但是主觀上這些例子，我真的認為最後一個例子，函數式方式的，體現了函數式編程背後的威力。

關於curry效能的備忘

一些極度關注效能的人可以看看這裡，我的意思是，關注下所有這些額外的事情？

通常，是這樣，使用柯裡化會有一些開銷。取決於你正在做的是什麼，可能會或不會，以明顯的方式影響你。也就是說，我敢說幾乎大多數情況，你的代碼的擁有效能瓶頸首先來自其他原因，而不是這個。

有關效能，這裡有一些事情必須牢記於心：

• 存取arguments對象通常要比存取具名引數要慢一點
• 一些老版本的瀏覽器在arguments.length的實現上是相當慢的
• 使用fn.apply( … ) 和 fn.call( … )通常比直接調用fn( … ) 稍微慢點
• 建立大量嵌套範圍和閉包函數會帶來花銷，無論是在記憶體還是速度上
• 在大多是web應用中，“瓶頸”會發生在操控DOM上。這是非常不可能的，你在所有方面關注效能。顯然，用不用上面的代碼自行考慮。

您可能感興趣的文章:

• javascript中有趣的反柯裡化深入分析
• javascript的currying函數介紹
• javascript currying返回函數的函數