摘要：函數式編程二拖延癥了好久，第二篇終于寫出來了。如果你對熟悉的話應該還記得，是可以調用來集中處理錯誤的對于函數式編程我們也可以做同樣的操作，如果運行正確，那么就返回正確的結果如果錯誤，就返回一個用于描述錯誤的結果。

拖延癥了好久，第二篇終于寫出來了。

上一篇在這里：JavaScript函數式編程（一）

上一篇文章里我們提到了純函數的概念，所謂的純函數就是，對于相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環境的狀態（我偷懶復制過來的）。

但是實際的編程中，特別是前端的編程范疇里，“不依賴外部環境”這個條件是根本不可能的，我們總是不可避免地接觸到 DOM、AJAX 這些狀態隨時都在變化的東西。所以我們需要用更強大的技術來干這些臟活。

如果你熟悉 jQuery 的話，應該還記得，$(...) 返回的對象并不是一個原生的 DOM 對象，而是對于原生對象的一種封裝：

var foo = $("#foo"); 

foo == document.getElementById("foo"); 
//=> false

foo[0] == document.getElementById("foo"); 
//=> true

這在某種意義上就是一個“容器”（但它并不函數式）。

接下類我們會看到，容器為函數式編程里普通的變量、對象、函數提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性，就好像 Tony Stark 的鋼鐵外衣，Dva 的機甲，明日香的2號機一樣。

下面我們就來寫一個最簡單的容器吧：

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 把東西裝進容器里之后，由于這一層外殼的阻擋，普通的函數就對他們不再起作用了，所以我們需要加一個接口來讓外部的函數也能作用到容器里面的值：

Container.prototype.map = function(f){
  return Container.of(f(this.__value))
}

我們可以這樣使用它：

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）：

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(...) 很煩對吧？這個問題很好解決，還記得我們上一篇文章里介紹的柯里化嗎？

有了柯里化這個強大的工具，我們可以這樣寫：

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)

現在我們的容器能做的事情太少了，它甚至連做簡單的錯誤處理都做不到，現在我們只能類似這樣處理錯誤：

try{
    doSomething();
}catch(e){
    // 錯誤處理
}

try/catch/throw 并不是“純”的，因為它從外部接管了我們的函數，并且在這個函數出錯時拋棄了它的返回值。這不是我們期望的函數式的行為。

如果你對 Promise 熟悉的話應該還記得，Promise 是可以調用 catch 來集中處理錯誤的：

doSomething()
    .then(async1)
    .then(async2)
    .catch(e => console.log(e));

對于函數式編程我們也可以做同樣的操作，如果運行正確，那么就返回正確的結果；如果錯誤，就返回一個用于描述錯誤的結果。這個概念在 Haskell 中稱之為 Either 類，Left 和 Right 是它的兩個子類。我們用 JS 來實現一下：

// 這里是一樣的=。=
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 的區別吧：

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 可以用來傳遞一個錯誤消息。

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。但這些超出了我們的討論范圍。

下面我們的程序要走出象牙塔，去接觸外面“骯臟”的世界了，在這個世界里，很多事情都是有副作用的或者依賴于外部環境的，比如下面這樣：

function readLocalStorage(){
    return window.localStorage;
}

這個函數顯然不是純函數，因為它強依賴外部的 window.localStorage 這個對象，它的返回值會隨著環境的變化而變化。為了讓它“純”起來，我們可以把它包裹在一個函數內部，延遲執行它：

function readLocalStorage(){
    return function(){
        return window.localStorage;   
    }
}

這樣 readLocalStorage 就變成了一個真正的純函數！ OvO為機智的程序員鼓掌！

額……好吧……好像確實沒什么卵用……我們只是（像大多數拖延癥晚期患者那樣）把討厭做的事情暫時擱置了而已。為了能徹底解決這些討厭的事情，我們需要一個叫 IO 的新的 Functor：

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 包含的是被包裹的操作的返回值。

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 中解析出對應的參數。

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.首先我們先對 url 調用 params 函數，得到類似[["a", "1"], ["b", "2"]]
//   這樣的數組；
// 2.然后調用 filter(compose(eq(key), first))，這是一個過濾器，過濾的
//   條件是 compose(eq(key), first) 為真，它的意思就是只留下首項為 key
//   的數組；
// 3.最后調用 Maybe.of，把它包裝起來。
// 4.這一系列的調用是針對 IO 的，所以我們用 map 把這些調用封裝起來。
var getParam = key => map(compose(Maybe.of, filter(compose(eq(key), first)), params));

// 創建充滿了洪荒之力的 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 的原理）

但依然有問題困擾著我們：

如何處理嵌套的 functor 呢？（比如 Maybe(IO(42))）

如何處理一個由非純的或者異步的操作序列呢？

在這個充滿了容器和 functor 的世界里，我們手上的工具還不夠多，函數式編程的學習還遠遠沒有結束，在下一篇文章里會講到 Monad 這個神奇的東西（然而我也不知道啥時候寫下一篇，估計等到實習考核后吧OvO）。