了解JavaScript函數(shù)式編程（二）

作者：王偉嘉 2016-08-11 10:34:37

文章先后提到了 Maybe、Either、IO 這三種強(qiáng)大的 functor，在鏈?zhǔn)秸{(diào)用、惰性求值、錯(cuò)誤捕獲、輸入輸出中都發(fā)揮著巨大的作用。

上一篇文章里我們提到了純函數(shù)的概念，所謂的純函數(shù)就是，對(duì)于相同的輸入，永遠(yuǎn)會(huì)得到相同的輸出，而且沒(méi)有任何可觀察的副作用，也不依賴外部環(huán)境的狀態(tài)(我偷懶復(fù)制過(guò)來(lái)的)。

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

一、容器、Functor

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

var foo = $('#foo'); 
 
foo == document.getElementById('foo'); 
 
//=> false 
 
foo[0] == document.getElementById('foo'); 
 
//=> true

這在某種意義上就是一個(gè)“容器”(但它并不函數(shù)式)。

接下類(lèi)我們會(huì)看到，容器為函數(shù)式編程里普通的變量、對(duì)象、函數(shù)提供了一層極其強(qiáng)大的外衣，賦予了它們一些很驚艷的特性，就好像 Tony Stark 的鋼鐵外衣，Dva 的機(jī)甲，明日香的2號(hào)機(jī)一樣。

下面我們就來(lái)寫(xiě)一個(gè)最簡(jiǎn)單的容器吧：

var Container = function(x) { 
 
this.__value = x; 
 
} 
 
Container.of = x => new Container(x); 
 
//試試看 
 
Container.of(1); 
 
//=> Container(1) 
 
Container.of('abcd'); 
 
//=> Container('abcd')

我們調(diào)用 Container.of 把東西裝進(jìn)容器里之后，由于這一層外殼的阻擋，普通的函數(shù)就對(duì)他們不再起作用了，所以我們需要加一個(gè)接口來(lái)讓外部的函數(shù)也能作用到容器里面的值：

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')

沒(méi)錯(cuò)!我們僅花了 7 行代碼就實(shí)現(xiàn)了很炫的鏈?zhǔn)秸{(diào)用，這也是我們的***個(gè) Functor。

Functor(函子)是實(shí)現(xiàn)了 map 并遵守一些特定規(guī)則的容器類(lèi)型。

也就是說(shuō)，如果我們要將普通函數(shù)應(yīng)用到一個(gè)被容器包裹的值，那么我們首先需要定義一個(gè)叫 Functor 的數(shù)據(jù)類(lèi)型，在這個(gè)數(shù)據(jù)類(lèi)型中需要定義如何使用 map 來(lái)應(yīng)用這個(gè)普通函數(shù)。

把東西裝進(jìn)一個(gè)容器，只留出一個(gè)接口 map 給容器外的函數(shù)，這么做有什么好處呢?

本質(zhì)上，F(xiàn)unctor 是一個(gè)對(duì)于函數(shù)調(diào)用的抽象，我們賦予容器自己去調(diào)用函數(shù)的能力。當(dāng) map 一個(gè)函數(shù)時(shí)，我們讓容器自己來(lái)運(yùn)行這個(gè)函數(shù)，這樣容器就可以自由地選擇何時(shí)何地如何操作這個(gè)函數(shù)，以致于擁有惰性求值、錯(cuò)誤處理、異步調(diào)用等等非常牛掰的特性。

舉個(gè)例子，我們現(xiàn)在為 map 函數(shù)添加一個(gè)檢查空值的特性，這個(gè)新的容器我們稱之為 Maybe(原型來(lái)自于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)

看了這些代碼，覺(jué)得鏈?zhǔn)秸{(diào)用總是要輸入一堆 .map(...) 很煩對(duì)吧?這個(gè)問(wèn)題很好解決，還記得我們上一篇文章里介紹的柯里化嗎?

有了柯里化這個(gè)強(qiáng)大的工具，我們可以這樣寫(xiě)：

import _ from 'lodash'; 
 
var compose = _.flowRight; 
 
var add = _.curry(_.add); 
 
// 創(chuàng)造一個(gè)柯里化的 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)

二、錯(cuò)誤處理、Either

現(xiàn)在我們的容器能做的事情太少了，它甚至連做簡(jiǎn)單的錯(cuò)誤處理都做不到，現(xiàn)在我們只能類(lèi)似這樣處理錯(cuò)誤：

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

try/catch/throw 并不是“純”的，因?yàn)樗鼜耐獠拷庸芰宋覀兊暮瘮?shù)，并且在這個(gè)函數(shù)出錯(cuò)時(shí)拋棄了它的返回值。這不是我們期望的函數(shù)式的行為。

如果你對(duì) Promise 熟悉的話應(yīng)該還記得，Promise 是可以調(diào)用 catch 來(lái)集中處理錯(cuò)誤的：

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

對(duì)于函數(shù)式編程我們也可以做同樣的操作，如果運(yùn)行正確，那么就返回正確的結(jié)果;如果錯(cuò)誤，就返回一個(gè)用于描述錯(cuò)誤的結(jié)果。這個(gè)概念在 Haskell 中稱之為 Either 類(lèi)，Left 和 Right 是它的兩個(gè)子類(lèi)。我們用 JS 來(lái)實(shí)現(xiàn)一下：

// 這里是一樣的=。= 
 
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)); 
 
}

下面來(lái)看看 Left 和 Right 的區(qū)別吧：

Right.of("Hello").map(str => str + " World!"); 
 
// Right("Hello World!") 
 
Left.of("Hello").map(str => str + " World!"); 
 
// Left("Hello")

Left 和 Right 唯一的區(qū)別就在于 map 方法的實(shí)現(xiàn)，Right.map 的行為和我們之前提到的 map 函數(shù)一樣。但是 Left.map 就很不同了：它不會(huì)對(duì)容器做任何事情，只是很簡(jiǎn)單地把這個(gè)容器拿進(jìn)來(lái)又扔出去。這個(gè)特性意味著，Left 可以用來(lái)傳遞一個(gè)錯(cuò)誤消息。

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 可以讓調(diào)用鏈中任意一環(huán)的錯(cuò)誤立刻返回到調(diào)用鏈的尾部，這給我們錯(cuò)誤處理帶來(lái)了很大的方便，再也不用一層又一層的try/catch。

Left 和 Right 是 Either 類(lèi)的兩個(gè)子類(lèi)，事實(shí)上 Either 并不只是用來(lái)做錯(cuò)誤處理的，它表示了邏輯或，范疇學(xué)里的coproduct。但這些超出了我們的討論范圍。

三、IO

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

function readLocalStorage(){ 
 
  return window.localStorage; 
 
}

這個(gè)函數(shù)顯然不是純函數(shù)，因?yàn)樗鼜?qiáng)依賴外部的 window.localStorage 這個(gè)對(duì)象，它的返回值會(huì)隨著環(huán)境的變化而變化。為了讓它“純”起來(lái)，我們可以把它包裹在一個(gè)函數(shù)內(nèi)部，延遲執(zhí)行它：

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

這樣 readLocalStorage 就變成了一個(gè)真正的純函數(shù)! OvO為機(jī)智的程序員鼓掌!

額……好吧……好像確實(shí)沒(méi)什么卵用……我們只是(像大多數(shù)拖延癥晚期患者那樣)把討厭做的事情暫時(shí)擱置了而已。為了能徹底解決這些討厭的事情，我們需要一個(gè)叫 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 跟前面那幾個(gè) functor 不同的地方在于，它的 __value 是一個(gè)函數(shù)。它把不純的操作(比如 IO、網(wǎng)絡(luò)請(qǐng)求、DOM)包裹到一個(gè)函數(shù)內(nèi)，從而延遲這個(gè)操作的執(zhí)行。所以我們認(rèn)為，IO 包含的是被包裹的操作的返回值。

var io_document = new IO(_ => window.document); 
 
io_document.map(function(doc){ return doc.title }); 
 
//=> IO(document.title)

注意我們這里雖然感覺(jué)上返回了一個(gè)實(shí)際的值 IO(document.title)，但事實(shí)上只是一個(gè)對(duì)象：{ __value: [Function] }，它并沒(méi)有執(zhí)行，而是簡(jiǎn)單地把我們想要的操作存了起來(lái)，只有當(dāng)我們?cè)谡娴男枰@個(gè)值得時(shí)候，IO 才會(huì)真的開(kāi)始求值，這個(gè)特性我們稱之為惰性求值。(培提爾其烏斯：“這是怠惰啊!”)

是的，我們依然需要某種方法讓 IO 開(kāi)始求值，并且把它返回給我們。它可能因?yàn)?map 的調(diào)用鏈積累了很多很多不純的操作，一旦開(kāi)始求值，就可能會(huì)把本來(lái)很干凈的程序給“弄臟”。但是去直接執(zhí)行這些“臟”操作不同，我們把這些不純的操作帶來(lái)的復(fù)雜性和不可維護(hù)性推到了 IO 的調(diào)用者身上(嗯就是這么不負(fù)責(zé)任)。

下面我們來(lái)做稍微復(fù)雜點(diǎn)的事情，編寫(xiě)一個(gè)函數(shù)，從當(dāng)前 url 中解析出對(duì)應(yīng)的參數(shù)。

import _ from 'lodash'; 
 
// 先來(lái)幾個(gè)基礎(chǔ)函數(shù)： 
 
// 字符串 
 
var split = _.curry((char, str) => str.split(char)); 
 
// 數(shù)組 
 
var first = arr => arr[0]; 
 
var last = arr => arr[arr.length - 1]; 
 
var filter = _.curry((f, arr) => arr.filter(f)); 
 
//注意這里的 x 既可以是數(shù)組，也可以是 functor 
 
var map = _.curry((f, x) => x.map(f)); 
 
// 判斷 
 
var eq = _.curry((x, y) => x == y); 
 
// 結(jié)合 
 
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']] 
 
// 這里會(huì)有些難懂=。= 慢慢看 
 
// 1.首先我們先對(duì) url 調(diào)用 params 函數(shù)，得到類(lèi)似[['a', '1'], ['b', '2']] 
 
// 這樣的數(shù)組; 
 
// 2.然后調(diào)用 filter(compose(eq(key), first))，這是一個(gè)過(guò)濾器，過(guò)濾的 
 
// 條件是 compose(eq(key), first) 為真，它的意思就是只留下首項(xiàng)為 key 
 
// 的數(shù)組; 
 
// 3.***調(diào)用 Maybe.of，把它包裝起來(lái)。 
 
// 4.這一系列的調(diào)用是針對(duì) IO 的，所以我們用 map 把這些調(diào)用封裝起來(lái)。 
 
var getParam = key => map(compose(Maybe.of, filter(compose(eq(key), first)), params)); 
 
// 創(chuàng)建充滿了洪荒之力的 IO!!! 
 
var url = new IO(_ => window.location.href); 
 
// 最終的調(diào)用函數(shù)!!! 
 
var findParam = getParam(url); 
 
// 上面的代碼都是很干凈的純函數(shù)，下面我們來(lái)對(duì)它求值，求值的過(guò)程是非純的。 
 
// 假設(shè)現(xiàn)在的 url 是 http://xxx.com?a=1&b=2 
 
// 調(diào)用 __value() 來(lái)運(yùn)行它! 
 
findParam("a").__value(); 
 
//=> Maybe(['a', '1'])

四、總結(jié)

如果你還能堅(jiān)持看到這里的話，不管看沒(méi)看懂，已經(jīng)是勇士了。在這篇文章里，我們先后提到了 Maybe、Either、IO 這三種強(qiáng)大的 functor，在鏈?zhǔn)秸{(diào)用、惰性求值、錯(cuò)誤捕獲、輸入輸出中都發(fā)揮著巨大的作用。事實(shí)上 functor 遠(yuǎn)不止這三種，但由于篇幅的問(wèn)題就不再繼續(xù)介紹了(哼才不告訴你其實(shí)是因?yàn)槲疫€沒(méi)看懂其它 functor 的原理)

但依然有問(wèn)題困擾著我們：