拖延症了好久，第二篇終於寫出來了。
上一篇在這裡：
上一篇文章裡我們提到了純函式的概念，所謂的純函式就是，對於相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環境的狀態（我偷懶複製過來的）。
但是實際的程式設計中，特別是前端的程式設計範疇裡，“不依賴外部環境”這個條件是根本不可能的，我們總是不可避免地接觸到 DOM、AJAX 這些狀態隨時都在變化的東西。所以我們需要用更強大的技術來幹這些髒活。
一、容器、Functor
如果你熟悉 jQuery 的話，應該還記得，$(…) 返回的物件並不是一個原生的 DOM 物件，而是對於原生物件的一種封裝：
|
1 2 3 4 5 6 |
var foo = $('#foo'); foo == document.getElementById('foo'); //=> false foo[0] == document.getElementById('foo'); //=> true |
這在某種意義上就是一個“容器”（但它並不函式式）。
接下類我們會看到，容器為函數語言程式設計裡普通的變數、物件、函式提供了一層極其強大的外衣，賦予了它們一些很驚豔的特性，就好像 Tony Stark 的鋼鐵外衣，Dva 的機甲，明日香的2號機一樣。
下面我們就來寫一個最簡單的容器吧：
|
1 2 3 4 5 6 7 8 9 10 11 |
var Container = function(x) { this.__value = x; } Container.of = x => new Container(x); //試試看 Container.of(1); //=> Container(1) Container.of('abcd'); //=> Container('abcd') |
我們呼叫 Container.of 把東西裝進容器裡之後，由於這一層外殼的阻擋，普通的函式就對他們不再起作用了，所以我們需要加一個介面來讓外部的函式也能作用到容器裡面的值：
|
1 2 3 |
Container.prototype.map = function(f){ return Container.of(f(this.__value)) } |
我們可以這樣使用它：
|
1 2 3 |
Container.of(3) .map(x => x + 1) //=> Container(4) .map(x => 'Result is ' + x); //=> Container('Result is 4') |
沒錯！我們僅花了 7 行程式碼就實現了很炫的『鏈式呼叫』，這也是我們的第一個 Functor。
Functor（函子）是實現了 map 並遵守一些特定規則的容器型別。
也就是說，如果我們要將普通函式應用到一個被容器包裹的值，那麼我們首先需要定義一個叫 Functor 的資料型別，在這個資料型別中需要定義如何使用 map 來應用這個普通函式。
把東西裝進一個容器，只留出一個介面 map 給容器外的函式，這麼做有什麼好處呢？
本質上，Functor 是一個對於函式呼叫的抽象，我們賦予容器自己去呼叫函式的能力。當 map 一個函式時，我們讓容器自己來執行這個函式，這樣容器就可以自由地選擇何時何地如何操作這個函式，以致於擁有惰性求值、錯誤處理、非同步呼叫等等非常牛掰的特性。
舉個例子，我們現在為 map 函式新增一個檢查空值的特性，這個新的容器我們稱之為 Maybe（原型來自於Haskell）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var Maybe = function(x) { this.__value = x; } Maybe.of = function(x) { return new Maybe(x); } Maybe.prototype.map = function(f) { return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value)); } Maybe.prototype.isNothing = function() { return (this.__value === null || this.__value === undefined); } //試試看 import _ from 'lodash'; var add = _.curry(_.add); Maybe.of({name: "Stark"}) .map(_.prop("age")) .map(add(10)); //=> Maybe(null) Maybe.of({name: "Stark", age: 21}) .map(_.prop("age")) .map(add(10)); //=> Maybe(31) |
看了這些程式碼，覺得鏈式呼叫總是要輸入一堆 .map(…) 很煩對吧？這個問題很好解決，還記得我們上一篇文章裡介紹的柯里化嗎？
有了柯里化這個強大的工具，我們可以這樣寫：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import _ from 'lodash'; var compose = _.flowRight; var add = _.curry(_.add); // 創造一個柯里化的 map var map = _.curry((f, functor) => functor.map(f)); var doEverything = map(compose(add(10), _.property("age"))); var functor = Maybe.of({name: "Stark", age: 21}); doEverything(functor); //=> Maybe(31) |
二、錯誤處理、Either
現在我們的容器能做的事情太少了，它甚至連做簡單的錯誤處理都做不到，現在我們只能類似這樣處理錯誤：
|
1 2 3 4 5 |
try{ doSomething(); }catch(e){ // 錯誤處理 } |
try/catch/throw 並不是“純”的，因為它從外部接管了我們的函式，並且在這個函式出錯時拋棄了它的返回值。這不是我們期望的函式式的行為。
如果你對 Promise 熟悉的話應該還記得，Promise 是可以呼叫 catch 來集中處理錯誤的：
|
1 2 3 4 |
doSomething() .then(async1) .then(async2) .catch(e => console.log(e)); |
對於函數語言程式設計我們也可以做同樣的操作，如果執行正確，那麼就返回正確的結果；如果錯誤，就返回一個用於描述錯誤的結果。這個概念在 Haskell 中稱之為 Either 類，Left 和 Right 是它的兩個子類。我們用 JS 來實現一下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 這裡是一樣的=。= var Left = function(x) { this.__value = x; } var Right = function(x) { this.__value = x; } // 這裡也是一樣的=。= Left.of = function(x) { return new Left(x); } Right.of = function(x) { return new Right(x); } // 這裡不同！！！ Left.prototype.map = function(f) { return this; } Right.prototype.map = function(f) { return Right.of(f(this.__value)); } |
下面來看看 Left 和 Right 的區別吧：
|
1 2 3 4 5 |
Right.of("Hello").map(str => str + " World!"); // Right("Hello World!") Left.of("Hello").map(str => str + " World!"); // Left("Hello") |
Left 和 Right 唯一的區別就在於 map 方法的實現，Right.map 的行為和我們之前提到的 map 函式一樣。但是 Left.map 就很不同了：它不會對容器做任何事情，只是很簡單地把這個容器拿進來又扔出去。這個特性意味著，Left 可以用來傳遞一個錯誤訊息。
|
1 2 3 4 5 6 7 8 |
var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!"); //試試 getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age); //=> Right('Age is 21') getAge({name: 'stark'}).map(age => 'Age is ' + age); //=> Left('ERROR!') |
是的，Left 可以讓呼叫鏈中任意一環的錯誤立刻返回到呼叫鏈的尾部，這給我們錯誤處理帶來了很大的方便，再也不用一層又一層的 try/catch。
Left 和 Right 是 Either 類的兩個子類，事實上 Either 並不只是用來做錯誤處理的，它表示了邏輯或，範疇學裡的 coproduct。但這些超出了我們的討論範圍。
三、IO
下面我們的程式要走出象牙塔，去接觸外面“骯髒”的世界了，在這個世界裡，很多事情都是有副作用的或者依賴於外部環境的，比如下面這樣：
|
1 2 3 |
function readLocalStorage(){ return window.localStorage; } |
這個函式顯然不是純函式，因為它強依賴外部的 window.localStorage 這個物件，它的返回值會隨著環境的變化而變化。為了讓它“純”起來，我們可以把它包裹在一個函式內部，延遲執行它：
|
1 2 3 4 5 |
function readLocalStorage(){ return function(){ return window.localStorage; } } |
這樣 readLocalStorage 就變成了一個真正的純函式！ OvO為機智的程式設計師鼓掌！
額……好吧……好像確實沒什麼卵用……我們只是（像大多數拖延症晚期患者那樣）把討厭做的事情暫時擱置了而已。為了能徹底解決這些討厭的事情，我們需要一個叫 IO 的新的 Functor：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import _ from 'lodash'; var compose = _.flowRight; var IO = function(f) { this.__value = f; } IO.of = x => new IO(_ => x); IO.prototype.map = function(f) { return new IO(compose(f, this.__value)) }; |
IO 跟前面那幾個 Functor 不同的地方在於，它的 __value 是一個函式。它把不純的操作（比如 IO、網路請求、DOM）包裹到一個函式內，從而延遲這個操作的執行。所以我們認為，IO 包含的是被包裹的操作的返回值。
|
1 2 3 4 |
var io_document = new IO(_ => window.document); io_document.map(function(doc){ return doc.title }); //=> IO(document.title) |
注意我們這裡雖然感覺上返回了一個實際的值 IO(document.title)，但事實上只是一個物件：{ __value: [Function] }，它並沒有執行，而是簡單地把我們想要的操作存了起來，只有當我們在真的需要這個值得時候，IO 才會真的開始求值，這個特性我們稱之為『惰性求值』。（培提爾其烏斯：“這是怠惰啊！”）
是的，我們依然需要某種方法讓 IO 開始求值，並且把它返回給我們。它可能因為 map 的呼叫鏈積累了很多很多不純的操作，一旦開始求值，就可能會把本來很乾淨的程式給“弄髒”。但是去直接執行這些“髒”操作不同，我們把這些不純的操作帶來的複雜性和不可維護性推到了 IO 的呼叫者身上（嗯就是這麼不負責任）。
下面我們來做稍微複雜點的事情，編寫一個函式，從當前 url 中解析出對應的引數。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import _ from 'lodash'; // 先來幾個基礎函式： // 字串 var split = _.curry((char, str) => str.split(char)); // 陣列 var first = arr => arr[0]; var last = arr => arr[arr.length - 1]; var filter = _.curry((f, arr) => arr.filter(f)); //注意這裡的 x 既可以是陣列，也可以是 functor var map = _.curry((f, x) => x.map(f)); // 判斷 var eq = _.curry((x, y) => x == y); // 結合 var compose = _.flowRight; var toPairs = compose(map(split('=')), split('&')); // toPairs('a=1&b=2') //=> [['a', '1'], ['b', '2']] var params = compose(toPairs, last, split('?')); // params('http://xxx.com?a=1&b=2') //=> [['a', '1'], ['b', '2']] // 這裡會有些難懂=。= 慢慢看 // 1.首先，getParam是一個接受IO(url)，返回一個新的接受 key 的函式； // 2.我們先對 url 呼叫 params 函式，得到類似[['a', '1'], ['b', '2']] // 這樣的陣列； // 3.然後呼叫 filter(compose(eq(key), first))，這是一個過濾器，過濾的 // 條件是 compose(eq(key), first) 為真，它的意思就是隻留下首項為 key // 的陣列； // 4.最後呼叫 Maybe.of，把它包裝起來。 // 5.這一系列的呼叫是針對 IO 的，所以我們用 map 把這些呼叫封裝起來。 var getParam = url => key => map(compose(Maybe.of, filter(compose(eq(key), first)), params))(url); // 建立充滿了洪荒之力的 IO！！！ var url = new IO(_ => window.location.href); // 最終的呼叫函式！！！ var findParam = getParam(url); // 上面的程式碼都是很乾淨的純函式，下面我們來對它求值，求值的過程是非純的。 // 假設現在的 url 是 http://xxx.com?a=1&b=2 // 呼叫 __value() 來執行它！ findParam("a").__value(); //=> Maybe(['a', '1']) |
四、總結
如果你還能堅持看到這裡的話，不管看沒看懂，已經是勇士了。在這篇文章裡，我們先後提到了 Maybe、Either、IO 這三種強大的 Functor，在鏈式呼叫、惰性求值、錯誤捕獲、輸入輸出中都發揮著巨大的作用。事實上 Functor 遠不止這三種，但由於篇幅的問題就不再繼續介紹了（哼才不告訴你其實是因為我還沒看懂其它 Functor 的原理）
但依然有問題困擾著我們：
1. 如何處理巢狀的 Functor 呢？（比如 Maybe(IO(42))）
2. 如何處理一個由非純的或者非同步的操作序列呢？
在這個充滿了容器和 Functor 的世界裡，我們手上的工具還不夠多，函數語言程式設計的學習還遠遠沒有結束，在下一篇文章裡會講到 Monad 這個神奇的東西（然而我也不知道啥時候寫下一篇，估計等到實習考核後吧OvO）。
五、參考
1、https://github.com/MostlyAdequate/mostly-adequate-guide
2、http://www.ibm.com/developerworks/cn/web/1006_qiujt_jsfunctional/
3、《JavaScript函數語言程式設計》【美】邁克爾·佛格斯