JavaScript函數式編程（二）

時間 2019-12-05

原文原文鏈接

上一篇文章 JavaScript函數式編程（一）裏咱們提到了純函數的概念，所謂的純函數就是，對於相同的輸入，永遠會獲得相同的輸出，並且沒有任何可觀察的反作用，也不依賴外部環境的狀態（我偷懶複製過來的）。html

可是實際的編程中，特別是前端的編程範疇裏，「不依賴外部環境」這個條件是根本不可能的，咱們老是不可避免地接觸到 DOM、AJAX 這些狀態隨時都在變化的東西。因此咱們須要用更強大的技術來幹這些髒活。前端

1、容器、Functor

若是你熟悉 jQuery 的話，應該還記得，$(...) 返回的對象並非一個原生的 DOM 對象，而是對於原生對象的一種封裝：git

1 var foo = $('#foo');
2  
3 foo == document.getElementById('foo');
4 //=> false
5 
6 foo[0] == document.getElementById('foo');
7 //=> true

這在某種意義上就是一個「容器」（但它並不函數式）。程序員

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

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

 1 var Container = function(x) {
 2  
 3 this.__value = x;
 4  
 5 }
 6  
 7 Container.of = x => new Container(x);
 8  
 9  
10  
11 //試試看
12  
13 Container.of(1);
14  
15 //=> Container(1)
16  
17  
18  
19 Container.of('abcd');
20  
21 //=> Container('abcd')

咱們調用 Container.of 把東西裝進容器裏以後，因爲這一層外殼的阻擋，普通的函數就對他們再也不起做用了，因此咱們須要加一個接口來讓外部的函數也能做用到容器裏面的值：編程

1  
2 Container.prototype.map = function(f){
3  
4 return Container.of(f(this.__value))
5  
6 }

咱們能夠這樣使用它：數組

1 Container.of(3)
2  
3 .map(x => x + 1) //=> Container(4)
4  
5 .map(x => 'Result is ' + x); //=> Container('Result is 4')

沒錯！咱們僅花了 7 行代碼就實現了很炫的『鏈式調用』，這也是咱們的第一個 Functor。網絡

Functor（函子）是實現了 map 並遵照一些特定規則的容器類型。異步

也就是說，若是咱們要將普通函數應用到一個被容器包裹的值，那麼咱們首先須要定義一個叫 Functor 的數據類型，在這個數據類型中須要定義如何使用 map 來應用這個普通函數。

把東西裝進一個容器，只留出一個接口 map 給容器外的函數，這麼作有什麼好處呢？

本質上，Functor 是一個對於函數調用的抽象，咱們賦予容器本身去調用函數的能力。當 map 一個函數時，咱們讓容器本身來運行這個函數，這樣容器就能夠自由地選擇什麼時候何地如何操做這個函數，以至於擁有惰性求值、錯誤處理、異步調用等等很是牛掰的特性。

舉個例子，咱們如今爲 map 函數添加一個檢查空值的特性，這個新的容器咱們稱之爲 Maybe（原型來自於Haskell）：

 1  
 2 var Maybe = function(x) {
 3  
 4 this.__value = x;
 5  
 6 }
 7  
 8  
 9  
10 Maybe.of = function(x) {
11  
12 return new Maybe(x);
13  
14 }
15  
16  
17  
18 Maybe.prototype.map = function(f) {
19  
20 return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
21  
22 }
23  
24  
25  
26 Maybe.prototype.isNothing = function() {
27  
28 return (this.__value === null || this.__value === undefined);
29  
30 }
31  
32  
33  
34 //試試看
35  
36 import _ from 'lodash';
37  
38 var add = _.curry(_.add);
39  
40  
41  
42 Maybe.of({name: "Stark"})
43  
44 .map(_.prop("age"))
45  
46 .map(add(10));
47  
48 //=> Maybe(null)
49  
50  
51  
52 Maybe.of({name: "Stark", age: 21})
53  
54 .map(_.prop("age"))
55  
56 .map(add(10));
57  
58 //=> Maybe(31)

看了這些代碼，以爲鏈式調用老是要輸入一堆 .map(...) 很煩對吧？這個問題很好解決，還記得咱們上一篇文章裏介紹的柯里化嗎？

有了柯里化這個強大的工具，咱們能夠這樣寫：

 1  
 2 import _ from 'lodash';
 3  
 4 var compose = _.flowRight;
 5  
 6 var add = _.curry(_.add);
 7  
 8  
 9  
10 // 創造一個柯里化的 map
11  
12 var map = _.curry((f, functor) => functor.map(f));
13  
14  
15  
16 var doEverything = map(compose(add(10), _.property("age")));
17  
18  
19  
20 var functor = Maybe.of({name: "Stark", age: 21});
21  
22 doEverything(functor);
23  
24 //=> Maybe(31)

2、錯誤處理、Either

如今咱們的容器能作的事情太少了，它甚至連作簡單的錯誤處理都作不到，如今咱們只能相似這樣處理錯誤：

 1  
 2 try{
 3  
 4 doSomething();
 5  
 6 }catch(e){
 7  
 8 // 錯誤處理
 9  
10 }

try/catch/throw 並非「純」的，由於它從外部接管了咱們的函數，而且在這個函數出錯時拋棄了它的返回值。這不是咱們指望的函數式的行爲。

若是你對 Promise 熟悉的話應該還記得，Promise 是能夠調用 catch 來集中處理錯誤的：

1  
2 doSomething()
3  
4 .then(async1)
5  
6 .then(async2)
7  
8 .catch(e => console.log(e));

對於函數式編程咱們也能夠作一樣的操做，若是運行正確，那麼就返回正確的結果；若是錯誤，就返回一個用於描述錯誤的結果。這個概念在 Haskell 中稱之爲 Either 類，Left 和 Right 是它的兩個子類。咱們用 JS 來實現一下：

 1  
 2 // 這裏是同樣的=。=
 3  
 4 var Left = function(x) {
 5  
 6 this.__value = x;
 7  
 8 }
 9  
10 var Right = function(x) {
11  
12 this.__value = x;
13  
14 }
15  
16  
17  
18 // 這裏也是同樣的=。=
19  
20 Left.of = function(x) {
21  
22 return new Left(x);
23  
24 }
25  
26 Right.of = function(x) {
27  
28 return new Right(x);
29  
30 }
31  
32  
33  
34 // 這裏不一樣！！！
35  
36 Left.prototype.map = function(f) {
37  
38 return this;
39  
40 }
41  
42 Right.prototype.map = function(f) {
43  
44 return Right.of(f(this.__value));
45  
46 }

下面來看看 Left 和 Right 的區別吧：

 1  
 2 Right.of("Hello").map(str => str + " World!");
 3  
 4 // Right("Hello World!")
 5  
 6  
 7  
 8 Left.of("Hello").map(str => str + " World!");
 9  
10 // Left("Hello")

Left 和 Right 惟一的區別就在於 map 方法的實現，Right.map 的行爲和咱們以前提到的 map 函數同樣。可是 Left.map 就很不一樣了：它不會對容器作任何事情，只是很簡單地把這個容器拿進來又扔出去。這個特性意味着，Left 能夠用來傳遞一個錯誤消息。

 1  
 2 var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!");
 3  
 4  
 5  
 6 //試試
 7  
 8 getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age);
 9  
10 //=> Right('Age is 21')
11  
12  
13  
14 getAge({name: 'stark'}).map(age => 'Age is ' + age);
15  
16 //=> Left('ERROR!')

是的，Left 可讓調用鏈中任意一環的錯誤馬上返回到調用鏈的尾部，這給咱們錯誤處理帶來了很大的方便，不再用一層又一層的 try/catch。

Left 和 Right 是 Either 類的兩個子類，事實上 Either 並不僅是用來作錯誤處理的，它表示了邏輯或，範疇學裏的 coproduct。但這些超出了咱們的討論範圍。

3、IO

下面咱們的程序要走出象牙塔，去接觸外面「骯髒」的世界了，在這個世界裏，不少事情都是有反作用的或者依賴於外部環境的，好比下面這樣：

1  
2 function readLocalStorage(){
3  
4 return window.localStorage;
5  
6 }

這個函數顯然不是純函數，由於它強依賴外部的 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 包含的是被包裹的操做的返回值。

1  
2 var io_document = new IO(_ => window.document);
3  
4  
5  
6 io_document.map(function(doc){ return doc.title });
7  
8 //=> IO(document.title)

注意咱們這裏雖然感受上返回了一個實際的值 IO(document.title)，但事實上只是一個對象：{ __value: [Function] }，它並無執行，而是簡單地把咱們想要的操做存了起來，只有當咱們在真的須要這個值得時候，IO 纔會真的開始求值，這個特性咱們稱之爲『惰性求值』。（培提爾其烏斯：「這是怠惰啊！」）

是的，咱們依然須要某種方法讓 IO 開始求值，而且把它返回給咱們。它可能由於 map 的調用鏈積累了不少不少不純的操做，一旦開始求值，就可能會把原本很乾淨的程序給「弄髒」。可是去直接執行這些「髒」操做不一樣，咱們把這些不純的操做帶來的複雜性和不可維護性推到了 IO 的調用者身上（嗯就是這麼不負責任）。

下面咱們來作稍微複雜點的事情，編寫一個函數，從當前 url 中解析出對應的參數。

 1  
 2 import _ from 'lodash';
 3  
 4  
 5  
 6 // 先來幾個基礎函數：
 7  
 8 // 字符串
 9  
10 var split = _.curry((char, str) => str.split(char));
11  
12 // 數組
13  
14 var first = arr => arr[0];
15  
16 var last = arr => arr[arr.length - 1];
17  
18 var filter = _.curry((f, arr) => arr.filter(f));
19  
20 //注意這裏的 x 既能夠是數組，也能夠是 functor
21  
22 var map = _.curry((f, x) => x.map(f));
23  
24 // 判斷
25  
26 var eq = _.curry((x, y) => x == y);
27  
28 // 結合
29  
30 var compose = _.flowRight;
31  
32  
33  
34  
35  
36 var toPairs = compose(map(split('=')), split('&'));
37  
38 // toPairs('a=1&b=2')
39  
40 //=> [['a', '1'], ['b', '2']]
41  
42  
43  
44 var params = compose(toPairs, last, split('?'));
45  
46 // params('http://xxx.com?a=1&b=2')
47  
48 //=> [['a', '1'], ['b', '2']]
49  
50  
51  
52 // 這裏會有些難懂=。= 慢慢看
53  
54 // 1.首先，getParam是一個接受IO(url)，返回一個新的接受 key 的函數；
55  
56 // 2.咱們先對 url 調用 params 函數，獲得相似[['a', '1'], ['b', '2']]
57  
58 // 這樣的數組；
59  
60 // 3.而後調用 filter(compose(eq(key), first))，這是一個過濾器，過濾的
61  
62 // 條件是 compose(eq(key), first) 爲真，它的意思就是隻留下首項爲 key
63  
64 // 的數組；
65  
66 // 4.最後調用 Maybe.of，把它包裝起來。
67  
68 // 5.這一系列的調用是針對 IO 的，因此咱們用 map 把這些調用封裝起來。
69  
70 var getParam = url => key => map(compose(Maybe.of, filter(compose(eq(key), first)), params))(url);
71  
72  
73  
74 // 建立充滿了洪荒之力的 IO！！！
75  
76 var url = new IO(_ => window.location.href);
77  
78 // 最終的調用函數！！！
79  
80 var findParam = getParam(url);
81  
82  
83  
84 // 上面的代碼都是很乾淨的純函數，下面咱們來對它求值，求值的過程是非純的。
85  
86 // 假設如今的 url 是 http://xxx.com?a=1&b=2
87  
88 // 調用 __value() 來運行它！
89  
90 findParam("a").__value();
91  
92 //=> Maybe(['a', '1'])

4、總結

若是你還能堅持看到這裏的話，無論看沒看懂，已是勇士了。在這篇文章裏，咱們前後提到了 Maybe、Either、IO 這三種強大的 Functor，在鏈式調用、惰性求值、錯誤捕獲、輸入輸出中都發揮着巨大的做用。事實上 Functor 遠不止這三種，但因爲篇幅的問題就再也不繼續介紹了（哼纔不告訴你實際上是由於我還沒看懂其它 Functor 的原理）

但依然有問題困擾着咱們：

1. 如何處理嵌套的 Functor 呢？（好比 Maybe(IO(42))）

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

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