上一篇文章裡我們提到了純函數的概念,所謂的純函數就是,對于相同的輸入,永遠會得到相同的輸出,而且沒有任何可觀察的副作用,也不依賴外部環境的狀态(我偷懶複制過來的)。
但是實際的程式設計中,特别是前端的程式設計範疇裡,“不依賴外部環境”這個條件是根本不可能的,我們總是不可避免地接觸到 dom、ajax 這些狀态随時都在變化的東西。是以我們需要用更強大的技術來幹這些髒活。
一、容器、functor
如果你熟悉 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) {
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})
//=> maybe(31)
看了這些代碼,覺得鍊式調用總是要輸入一堆 .map(...) 很煩對吧?這個問題很好解決,還記得我們上一篇文章裡介紹的柯裡化嗎?
有了柯裡化這個強大的工具,我們可以這樣寫:
var compose = _.flowright;
// 創造一個柯裡化的 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);
二、錯誤處理、either
現在我們的容器能做的事情太少了,它甚至連做簡單的錯誤處理都做不到,現在我們隻能類似這樣處理錯誤:
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) {
var right = function(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。但這些超出了我們的讨論範圍。
三、io
下面我們的程式要走出象牙塔,去接觸外面“肮髒”的世界了,在這個世界裡,很多事情都是有副作用的或者依賴于外部環境的,比如下面這樣:
function readlocalstorage(){
return window.localstorage;
這個函數顯然不是純函數,因為它強依賴外部的 window.localstorage 這個對象,它的傳回值會随着環境的變化而變化。為了讓它“純”起來,我們可以把它包裹在一個函數内部,延遲執行它:
return function(){
return window.localstorage;
}
這樣 readlocalstorage 就變成了一個真正的純函數! ovo為機智的程式員鼓掌!
額……好吧……好像确實沒什麼卵用……我們隻是(像大多數拖延症晚期患者那樣)把讨厭做的事情暫時擱置了而已。為了能徹底解決這些讨厭的事情,我們需要一個叫 io 的新的 functor:
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 中解析出對應的參數。
// 先來幾個基礎函數:
// 字元串
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 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')
// 這裡會有些難懂=。= 慢慢看
// 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)))
如何處理一個由非純的或者異步的操作序列呢?
作者:王偉嘉
來源:51cto