天天看點

了解JavaScript函數式程式設計(二)

了解JavaScript函數式程式設計(二)

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

但是實際的程式設計中,特别是前端的程式設計範疇裡,“不依賴外部環境”這個條件是根本不可能的,我們總是不可避免地接觸到 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

繼續閱讀