JS輕量級函數語言程式設計實現XDM二

2022-06-14 22:01:26

前言

承接上一篇《XDM，JS如何函數語言程式設計？看這就夠了！（一）》，我們知道了函數語言程式設計的幾個基本概念。

這裡作簡要回顧：

函數語言程式設計目的是為了資料流更加明顯，從而程式碼更具可讀性；
函數需要一個或多個輸入（理想情況下只需一個！）和一個輸出，輸入輸出是顯式的程式碼將更好閱讀；
閉包是高階函數的基礎；
警惕匿名函數；
棄用 this 指向；

本篇將著重介紹第 2 點中函數的輸入，它是 JS 輕量函數語言程式設計的基礎之基礎，重要之重要！！！

偏函數

傳參現狀

我們經常會寫出這樣的程式碼：

function ajax(url,data,callback) {
    // ..
}
function getPerson(data,cb) {
    ajax( "http://some.api/person", data, cb );
}

ajax 函數有三個入參，在 getPerson 函數裡呼叫，其中 url 已確定，data 和 cb 兩個引數則等待傳入。（因為很多時候引數都不是在當前能確定的，需要等待其它函數的操作後確定了再繼續傳入）

但是我們的原則是：入參最理想的情況下只需一個！

怎樣優化，可以實現這一點呢？

我們或許可以在外層再套一個函數來進一步確定傳參，比如：

function getCurrentUser(cb) {
    ...// 通過某些操作拿到 CURRENT_USER_ID
    getPerson( { user: CURRENT_USER_ID }, cb );
}

這樣，data 引數也已經確定，cb 引數仍等待傳入；函數 getCurrentUser 就只有一個入參了！

資料的傳遞路線是：

ajax(url,data,callback) => getPerson(data,cb) => getCurrentUser(cb)

這樣函數引數個數逐漸減少的過程就是偏應用。

也可以說：getCurrentUser(cb) 是 getOrder(data,cb) 的偏函數，getOrder(data,cb) 是 ajax(url,data,cb) 函數的偏函數。

設想下：

如果一個函數是這樣的：

function receiveMultiParam(a,b,c,......,x,y,z){
    // ..
}

我們難道還要像上面那樣手動指定外層函數進行逐層巢狀嗎？

顯示我們不會這麼做！

封裝 partial

我們只需要封裝一個 partial(..) 函數：

function partial(fn,...presetArgs) {
    return function partiallyApplied(...laterArgs){
        return fn( ...presetArgs, ...laterArgs );
    };
}

它的基礎邏輯是：

var partial =
    (fn, ...presetArgs) =>
        (...laterArgs) =>
            fn( ...presetArgs, ...laterArgs );

把函數作為入參！還記得我們之前所說：

一個函數如果可以接受或返回一個甚至多個函數，它被叫做高階函數。

我們借用 partial() 來實現上述舉例：

var getPerson = partial( ajax, "http://some.api/person" );
var getCurrentUser = partial( getPerson, { user: CURRENT_USER_ID } ); // 版本 1

以下函數內部分析非常重要：

執行機制

getPerson() 的內部執行機制是：

var getPerson = function partiallyApplied(...laterArgs) {
    return ajax( "http://some.api/person", ...laterArgs );
};

getCurrentUser() 的內部執行機制是：

var getCurrentUser = function outerPartiallyApplied(...outerLaterArgs) {
    var getPerson = function innerPartiallyApplied(...innerLaterArgs){
        return ajax( "http://some.api/person", ...innerLaterArgs );
    };
    return getPerson( { user: CURRENT_USER_ID }, ...outerLaterArgs );
}

資料進行了傳遞：

getCurrentUser(outerLaterArgs) => getPerson(innerLaterArgs) => ajax(...params)

我們通過這樣一層額外的函數包裝層，實現了更加強大的資料傳遞，

我們將需要減少引數輸入的函數傳入 partial()中作為第一個引數，剩下的是 presetArgs，當前已知幾個，就可以寫幾個。還有不確定的入參 laterArgs，可以在確定後繼續追加。

像這樣進行額外的高階函數包裝層，是函數語言程式設計的精髓所在！

“隨著本系列的繼續深入，我們將會把許多函數互相包裝起來。記住，這就是函數語言程式設計！” —— 《JavaScript 輕量級函數語言程式設計》

實際上，實現 getCurrentUser() 還可以這樣寫：

// 版本 2
var getCurrentUser = partial(
    ajax,
    "http://some.api/person",
    { user: CURRENT_USER_ID }
);
// 內部實現機制
var getCurrentUser = function partiallyApplied(...laterArgs) {
    return ajax(
        "http://some.api/person",
        { user: CURRENT_USER_ID },
        ...laterArgs
    );
};

但是版本 1 因為重用了已經定義好的函數，所以它在表達上更清晰一些。它被認為更加貼合函數語言程式設計精神！

拓展 partial

我們再看看 partial() 函數還可它用：

function partial(fn,...presetArgs) {
    return function partiallyApplied(...laterArgs){
        return fn( ...presetArgs, ...laterArgs );
    };
}

比如：將陣列 [1,2,3,4,5] 每項都加 3，通常我們會這麼做：

function add(x,y) {
    return x + y
[1,2,3,4,5].map( function adder(val){
    return add( 3, val );
} );
// [4,5,6,7,8]

藉助 partial()：

[1,2,3,4,5].map( partial( add, 3 ) );
// [4,5,6,7,8]

add(..) 不能直接傳入 map(..) 函數裡，通過偏應用進行處理後則能傳入；

實際上，partial() 函數還可以有很多變體：

回想我們之前呼叫 Ajax 函數的方式：ajax( url, data, cb )。如果要偏應用 cb 而稍後再指定 data 和 url 引數，我們應該怎麼做呢？

function reverseArgs(fn) {
    return function argsReversed(...args){
        return fn( ...args.reverse() );
    };
}
function partialRight( fn, ...presetArgs ) {
    return reverseArgs(
        partial( reverseArgs( fn ), ...presetArgs.reverse() )
    );
}
var cacheResult = partialRight( ajax, function onResult(obj){
    cache[obj.id] = obj;
});
// 處理後:
cacheResult( "http://some.api/person", { user: CURRENT_USER_ID } );

柯里化

函數柯里化實際上是一種特殊的偏函數。

我們用 curry(..) 函數來實現此前的 ajax(..) 例子，它會是這樣的：

var curriedAjax = curry( ajax );
var personFetcher = curriedAjax( "http://some.api/person" );
var getCurrentUser = personFetcher( { user: CURRENT_USER_ID } );
getCurrentUser( function foundUser(user){ /* .. */ } );

柯里化函數：接收單一實參（實參個數：1）並返回另一個接收下一個實參的函數。

它將一個函數從可呼叫的 f(a, b, c) 轉換為可呼叫的 f(a)(b)(c)。

實現：

function curry(fn,arity = fn.length) {
    return (function nextCurried(prevArgs){
        return function curried(nextArg){
            var args = prevArgs.concat( [nextArg] );
            if (args.length &gt;= arity) {
                return fn( ...args );
            }
            else {
                return nextCurried( args );
            }
        };
    })( [] );
}