javascript基礎(chǔ)修煉（8）——指向FP世界的箭頭函數(shù)

如果你也曾以為【函數(shù)式編程】就是“用箭頭函數(shù)把函數(shù)寫(xiě)的精簡(jiǎn)一些”，如果你也被各種復(fù)雜的this綁定弄的暈頭轉(zhuǎn)向，那么就一起來(lái)看看這個(gè)胖箭頭指向的新世界——Functional Programming吧!

二. 更貼近本能的思維方式

假如有這樣一個(gè)題目：

在傳統(tǒng)編程中，你的編碼過(guò)程大約是這樣：

let resolveYX = (x) => 3*x*x + 2*x + 1;
let resolveZY = (y) => 4*y*y*y + 5*y*y + 6;
let resolveRZ = (z) => (2*z*z - 4)/3;
let y = resolveYX（2）；
let z = resolveZY(y);
let result = resolveRZ(z);

我們大多時(shí)候采用的方式是把程序的執(zhí)行細(xì)節(jié)用程序語(yǔ)言描述出來(lái)。但是如果你把這道題拿給一個(gè)不懂編程的學(xué)生來(lái)做，就會(huì)發(fā)現(xiàn)大多數(shù)時(shí)候他們的做法會(huì)是下面的樣子：

先對(duì)方程進(jìn)行合并和簡(jiǎn)化，最后再代入數(shù)值進(jìn)行計(jì)算得到結(jié)果就可以了。有沒(méi)有發(fā)現(xiàn)事實(shí)上你自己在不寫(xiě)代碼的時(shí)候也是這樣做的，因?yàn)槟愫芮宄切┲虚g變量對(duì)于得到正確的結(jié)果來(lái)說(shuō)沒(méi)有什么意義，而這樣解題效率更高，尤其是當(dāng)前面的環(huán)節(jié)和后面的環(huán)節(jié)可以抵消掉某些互逆的運(yùn)算時(shí)，這樣合并的好處可想而知。

而今天的主角【函數(shù)式編程】，可以看做是這種思維方式在程序設(shè)計(jì)中的應(yīng)用，我并不建議非數(shù)學(xué)專業(yè)的作者從范疇論的角度去解釋函數(shù)式編程，因?yàn)樾g(shù)語(yǔ)運(yùn)用的準(zhǔn)確性會(huì)造成難以評(píng)估的影響，很可能達(dá)不到技術(shù)交流的目的，反而最終誤人子弟。

三. 函數(shù)式編程

假如對(duì)某個(gè)需求的實(shí)現(xiàn)，需要傳入x，然后經(jīng)歷3個(gè)步驟后得到一個(gè)答案y，你會(huì)怎樣來(lái)實(shí)現(xiàn)呢？

3.1 傳統(tǒng)代碼的實(shí)現(xiàn)

這樣一個(gè)需求在傳統(tǒng)編程中最容易想到的就是鏈?zhǔn)秸{(diào)用：

function Task(value){
    this.value = value;
}

Task.prototype.step = function(fn){
    let _newValue = fn(this.value);
    return new Task(_newValue);
}

y = (new Task(x)).step(fn1).step(fn2).step(fn3);

你或許在jQuery中經(jīng)常見(jiàn)到這樣的用法，或者你已經(jīng)意識(shí)到上面的函數(shù)實(shí)際上就是Promise的簡(jiǎn)化原型（關(guān)于Promise相關(guān)的知識(shí)可以看《javascript基礎(chǔ)修煉（7）——Promise，異步，可靠性》這篇文章），只不過(guò)我們把每一步驟包裹在了Task這個(gè)容器里，每個(gè)動(dòng)作執(zhí)行完以后返回一個(gè)新的Task容器，里面裝著上一個(gè)步驟返回的結(jié)果。

3.2 函數(shù)式代碼推演

在【函數(shù)式編程】，我們不再采用程序語(yǔ)言按照步驟來(lái)復(fù)現(xiàn)一個(gè)業(yè)務(wù)邏輯，而是換一個(gè)更為抽象的角度，用數(shù)學(xué)的眼光看待所發(fā)生的事情。那么上面的代碼實(shí)際上所做的事情就是：

通過(guò)一系列變換操作，講一個(gè)數(shù)據(jù)集x變成了數(shù)據(jù)集y。

有沒(méi)有一點(diǎn)似曾相識(shí)的感覺(jué)？沒(méi)錯(cuò)，這就是我們熟知的【方程】,或者【映射】:
$$
y=f(x)
$$
我們將原來(lái)的代碼換個(gè)樣子，就更容易看出來(lái)了：

function prepare(){
    return function (x){
        return (new Task(x)).step(fn1).step(fn2).step(fn3);
    }    
}

let f = prepare();
let y = f(x);

上面的例子中，通過(guò)高階函數(shù)prepare( )將原來(lái)的函數(shù)改變?yōu)橐粋€(gè)延遲執(zhí)行的，等待接收一個(gè)參數(shù)x并啟動(dòng)一系列處理流程的新函數(shù)。再繼續(xù)進(jìn)行代碼轉(zhuǎn)換，再來(lái)看一下f(x)執(zhí)行到即將結(jié)束時(shí)的暫態(tài)狀況：

//fn2Result是XX.step(fn2)執(zhí)行完后返回的結(jié)果(值和方法都包含在Task容器中)
fn2Result.step(fn3);

上面的語(yǔ)句中，實(shí)際上變量只有fn2Result，step()方法和fn10都是提前定義好的，那么用函數(shù)化的思想來(lái)進(jìn)行類(lèi)比，這里也是實(shí)現(xiàn)了一個(gè)數(shù)據(jù)集x1到數(shù)據(jù)集y1的映射，所以它也可以被抽象為y = f ( x )的模式：

//先生成一個(gè)用于生成新函數(shù)的高階函數(shù)，來(lái)實(shí)現(xiàn)局部調(diào)用
let goStep = function(fn){
    return function(params){
        let value = fn(params.value);
        return new Task(value);
    }
}
//fn2Result.step(fn3)這一句將被轉(zhuǎn)換為如下形式
let requireFn2Result = goStep(fn3);

此處的requireFn2Result( )方法，只接受一個(gè)由前置步驟執(zhí)行結(jié)束后得到的暫態(tài)結(jié)果，然后將其關(guān)鍵屬性value傳入fn3進(jìn)行運(yùn)算并傳回一個(gè)支持繼續(xù)鏈?zhǔn)秸{(diào)用的容器。我們來(lái)對(duì)代碼進(jìn)行一下轉(zhuǎn)換：

function prepare(){
    return function (x){
        let fn2Result = (new Task(x)).step(fn1).step(fn2); 
        return requireFn2Result(fn2Result);
    }    
}

同理繼續(xù)來(lái)簡(jiǎn)化前置步驟:

//暫時(shí)先忽略函數(shù)聲明的位置
let requireFn2Result = goStep(fn3);
let requireFn1Result = goStep(fn2);
let requireInitResult = goStep(fn1);

function prepare(){
    return function (x){
        let InitResult = new Task(x);
        return requireFn2Result(requireFn1Result(requireInitResult(InitResult)));
    }    
}

既然已經(jīng)這樣了，索性再向前一步，把new Task(x)也函數(shù)化好了：

let createTask = function(x){
    return new Task(x);
};

3.3 函數(shù)化的代碼

或許你已經(jīng)被上面的一系列轉(zhuǎn)化弄得暈頭轉(zhuǎn)向，我們暫停一下，來(lái)看看函數(shù)化后的代碼變成了什么樣子:

function prepare(){
    return function (x){
        return requireFn2Result(requireFn1Result(requireInitResult(createTask(x))));
    }    
}
let f = prepare();
let y = f(x);

這樣的編碼模式將核心業(yè)務(wù)邏輯在空間上放在一起，而把具體的實(shí)現(xiàn)封裝起來(lái)，讓開(kāi)發(fā)者更容易看到一個(gè)需求實(shí)現(xiàn)過(guò)程的全貌。

3.4 休息一下

不知道你是否有注意到，在中間環(huán)節(jié)的組裝過(guò)程中，其實(shí)并沒(méi)有任何真實(shí)的數(shù)據(jù)出現(xiàn)，我們只使用了暫態(tài)的抽象數(shù)據(jù)來(lái)幫助我們寫(xiě)出映射方法f的細(xì)節(jié)，而隨后暫態(tài)的數(shù)據(jù)又被新的函數(shù)取代，逐級(jí)迭代，直到暫態(tài)數(shù)據(jù)最終指向了最外層函數(shù)的形參，你可以重新審視一下上面的推演過(guò)程來(lái)體會(huì)函數(shù)式編程帶來(lái)的變化，這個(gè)點(diǎn)是非常重要的。

3.5 進(jìn)一步抽象

3.3節(jié)中函數(shù)化的代碼中，存在一個(gè)很長(zhǎng)的嵌套調(diào)用，如果業(yè)務(wù)邏輯步驟過(guò)多，那么這行代碼會(huì)變得很長(zhǎng)，同時(shí)也很難閱讀，我們需要通過(guò)一些手段將這些中間環(huán)節(jié)的函數(shù)展開(kāi)為一種扁平化的寫(xiě)法。

/**
*定義一個(gè)工具函數(shù)compose,接受兩個(gè)函數(shù)作為參數(shù)，返回一個(gè)新函數(shù)
*新函數(shù)接受一個(gè)x作為入?yún)ⅲ缓髮?shí)現(xiàn)函數(shù)的迭代調(diào)用。
*/
var compose = function (f, g) {
    return function (x) {
        return f(g(x));
    }
};
/**
*升級(jí)版本的compose函數(shù)，接受一組函數(shù)，實(shí)現(xiàn)左側(cè)函數(shù)包裹右側(cè)函數(shù)的形態(tài)
*/
let composeEx = function (...args) {
    return (x)=>args.reduceRight((pre,cur)=>cur(pre),x);
}

看不懂的同學(xué)需要補(bǔ)補(bǔ)基礎(chǔ)課了，需要注意的是工具函數(shù)返回的仍然是一個(gè)函數(shù)，我們使用上面的工具函數(shù)來(lái)重寫(xiě)一下3.3小節(jié)中的代碼:

let pipeline = composeEx(requireFn2Result,requireFn1Result,requireInitResult,createTask);
function prepare(){
    return function (x){
        return pipeline(x);
    }    
}
let f = prepare();
let y = f(x);

還要繼續(xù)？必須的，希望你還沒(méi)有抓狂。代碼中我們先執(zhí)行prepare( )方法來(lái)得到一個(gè)新函數(shù)f，f執(zhí)行時(shí)接收一個(gè)參數(shù)x，然后把x傳入pipeline方法，并返回pipeline(x)。我們來(lái)進(jìn)行一下對(duì)比：

//prepare執(zhí)行后得到的新函數(shù)
let f = x => pipeline(x);

或許你已經(jīng)發(fā)現(xiàn)了問(wèn)題所在，這里的f函數(shù)相當(dāng)于pipeline方法的代理，但這個(gè)代理什么額外的動(dòng)作都沒(méi)有做，相當(dāng)于只是在函數(shù)調(diào)用棧中憑空增加了一層，但是執(zhí)行了相同的動(dòng)作。如果你能夠理解這一點(diǎn)，就可以得出下面的轉(zhuǎn)化結(jié)果：

let f = pipeline;

是不是很神奇？順便提一下，它的術(shù)語(yǔ)叫做point free,當(dāng)你深入學(xué)習(xí)【函數(shù)式編程】時(shí)就會(huì)接觸到。

3.6 完整的轉(zhuǎn)換代碼

我們?cè)龠M(jìn)行一些簡(jiǎn)易的抽象和整理，然后得到完整的流程:

let composeEx = (...args) => (x) => args.reduceRight((pre,cur) =>cur(pre),x);
let getValue = (obj) => obj.value;
let createTask = (x) => new Task(x);
/*goStep執(zhí)行后得到的函數(shù)也滿足前面提到的“l(fā)et f=(x)=>g(x)”的形式，可以將其pointfree化.
let goStep = (fn)=>(params)=>composeEx(createTask, fn, getValue)(params);
let requireFn2Result = goStep(fn3);
*/
let requireFn2Result = composeEx(createTask,fn3,getValue);
let requireFn1Result = composeEx(createTask,fn2,getValue);
let requireInitResult = composeEx(createTask,fn1,getValue);
let pipeline = composeEx(requireFn2Result,requireFn1Result,requireInitResult,createTask);
let f = pipeline;
let y = f(x);

可以看到我們定義完方法后，像搭積木一樣把它們組合在一起，就得到了一個(gè)可以實(shí)現(xiàn)目標(biāo)功能的函數(shù)。

3.7 為什么它看起來(lái)變得更復(fù)雜了

如果只看上面的示例，的確是這樣的，上面的示例只是為了展示函數(shù)式編程讓代碼向著怎樣一個(gè)方向去變化而已，而并沒(méi)有展示出函數(shù)式編程的優(yōu)勢(shì)，這種轉(zhuǎn)變和一個(gè)jQuery開(kāi)發(fā)者剛開(kāi)始使用諸如angular,vue,React框架時(shí)感受到的強(qiáng)烈不適感是很相似的，畢竟思想的轉(zhuǎn)變是非常困難的。

面向?qū)ο缶幊?/strong>寫(xiě)出的代碼看起來(lái)就像是一個(gè)巨大的關(guān)系網(wǎng)和邏輯流程圖，比如連續(xù)讀其中10行代碼，你或許能夠很清晰地看到某個(gè)步驟執(zhí)行前和執(zhí)行后程序的狀態(tài)，但是卻很難看清整體的業(yè)務(wù)邏輯流程；而函數(shù)式編程正好是相反的，你可以在短短的10行代碼中看到整個(gè)業(yè)務(wù)流程，當(dāng)你想去深究某個(gè)具體步驟時(shí)，再繼續(xù)展開(kāi)，另一方面，關(guān)注數(shù)據(jù)和函數(shù)組合可以將你從復(fù)雜的this和對(duì)象的關(guān)系網(wǎng)中解放出來(lái)。

程序設(shè)計(jì) = 數(shù)據(jù)結(jié)構(gòu) + 算法   Vs   函數(shù)式編程 = 數(shù)據(jù) + 函數(shù)    

var a = 1;
function inc(x){
    return a + x;
}
function pureInc(x){
    let a = 1;
    return x + a;
}

let a = {
    name:'tony'
}
let b = a;
modify(b);
console.log(a.name);

//Immutable.js官網(wǎng)示例
 var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
 var map2 = map1.set('b', 50);
 map1.get('b'); // 2
 map2.get('b'); // 50