JavaScript也玩私人訂制——玩轉(zhuǎn)函數(shù)柯里化

MRZYD 發(fā)布于2019-08-19 17:50 / 1575人閱讀

摘要：而柯里化是一個(gè)屬于函數(shù)式編程的一個(gè)常見的技巧。簡(jiǎn)單來說，函數(shù)柯里化就是對(duì)高階函數(shù)的降階處理。讓你意外的是，這就是柯里化的基本思想，簡(jiǎn)單地讓人猝不及防。

函數(shù)式編程是一種被部分JavaScript程序員推崇的編程風(fēng)格，更別說 Haskell 和 Scala 這種以函數(shù)式為教義的語言。原因是因?yàn)槠淠苡幂^短的代碼實(shí)現(xiàn)功能，如果掌握得當(dāng)，能達(dá)到代碼文檔化（代碼本身具有很高可讀性甚至可以代替文檔）的效果，當(dāng)然，泛濫使用也會(huì)使代碼可讀性變差。

而柯里化（Currying）是一個(gè)屬于函數(shù)式編程的一個(gè)常見的技巧。簡(jiǎn)單來說，函數(shù)柯里化就是對(duì)高階函數(shù)的降階處理。
我們看下面這個(gè)函數(shù)：

function loc (a,b,c){
    console.log(a+"-"+b+"-"+c);
}

loc("浙江","杭州","西湖區(qū)");//>>>浙江-杭州-西湖區(qū)

這是一個(gè)接收三個(gè)地名字符串的函數(shù)，功能是將三個(gè)地名字符串拼接到一起成為一個(gè)詳細(xì)的地址。
我們?cè)囋囍粋魅雰蓚€(gè)參數(shù)：

loc("浙江","杭州");//>>>浙江-杭州-undefined

毫無疑義地，這個(gè)函數(shù)還是會(huì)正常執(zhí)行，只是原本屬于“區(qū)”的位置由于沒有接收到參數(shù)而成了undefined。

其實(shí)這種情況很多，比如我們還要生成浙江-杭州-余杭區(qū)，浙江-杭州-拱墅區(qū)這樣的地名，但是我們沒必要每次都重新把浙江-杭州重新拼接一遍，所以你是不是會(huì)想，能不能只通過一個(gè)函數(shù)，把已經(jīng)拼接過的字符串緩存起來，只去拼接新的字符串呢？我們或許可以把之前的函數(shù)改一下：

function loc (a) {
    return function(b){
        return function(c){
            console.log(a+"-"+b+"-"+c);
        }
    }
}

好奇怪！這個(gè)loc函數(shù)只接收一個(gè)參數(shù)，而返回一個(gè)新的函數(shù)，這個(gè)函數(shù)也只接受一個(gè)參數(shù)，里面同樣返回一個(gè)函數(shù),最后一個(gè)函數(shù)才返回三個(gè)參數(shù)拼接的字符串。
看起來是一個(gè)嵌套關(guān)系，好吧，讓我們看看它是否能實(shí)現(xiàn)剛剛的想法：

var Zhejiang = loc("浙江");
var Hangzhou = Zhejiang("杭州");

var Xihu = Hangzhou("西湖區(qū)");           //浙江-杭州-西湖區(qū)
var Yuhang = Hangzhou("余杭區(qū)");         //浙江-杭州-余杭區(qū)
var Lucheng = Zhejiang("溫州")("鹿城區(qū)"); //浙江-溫州-鹿城區(qū)

看，通過這樣的形式，我們輕松實(shí)現(xiàn)定制化函數(shù)啦！loc("杭州")不會(huì)急著把地名都拼接好，而是把杭州先存到閉包中，在需要拼接的時(shí)候才用到它。

讓你意外的是，這就是柯里化的基本思想，簡(jiǎn)單地讓人猝不及防。

不，這不是你想要的結(jié)果，至少你已經(jīng)考慮到一種恐怖的情況：如果參數(shù)有許多——比如100個(gè)，是不是要寫一個(gè)嵌套一百次的函數(shù)？

好在，我們可以寫一個(gè)通用函數(shù)來優(yōu)雅地創(chuàng)建柯里化函數(shù)：

function curry(fn) {
    var outerArgs = Array.prototype.slice.call(arguments, 1);
    return function() {
        var innerArgs = Array.prototype.slice.call(arguments),
            finalArgs = outerArgs.concat(innerArgs);
        return fn.apply(null, finalArgs);
    };
}

有了這個(gè)基本函數(shù)之后，我們可以柯里化其他普通函數(shù)：

//一個(gè)普通函數(shù)
function loc(a,b,c){
    console.log(a+"-"+b+"-"+c);
}

var workIn = curry(loc,"浙江","杭州","余杭區(qū)");
workIn();// >>> 浙江-杭州-余杭區(qū)

當(dāng)然也可以這樣定制：

var zj = curry(loc,"浙江");
var city = curry(zj,"杭州");

city("余杭區(qū)");    //>>> 浙江-杭州-余杭區(qū)
city("上城區(qū)");    //>>> 浙江-杭州-上城區(qū)
zj("溫州","鹿城區(qū)");//>>> 浙江-溫州-鹿城區(qū)

簡(jiǎn)直優(yōu)雅。

以下我們來簡(jiǎn)單分析以下這個(gè)通用函數(shù)：

function curry(fn) {
    var outerArgs = Array.prototype.slice.call(arguments, 1);
    return function() {
        var innerArgs = Array.prototype.slice.call(arguments),
            finalArgs = outerArgs.concat(innerArgs);
        return fn.apply(null, finalArgs);
    };
}

我們看這個(gè)curry函數(shù)，顯示接受一個(gè)參數(shù)，那就是需要被柯里化的函數(shù)。同時(shí)，因?yàn)镴S神奇的函數(shù)傳參，我們可以在curry繼續(xù)放更多的參數(shù)，這些參數(shù)在函數(shù)體內(nèi)部將以參數(shù)列表的形式存在，你可以通過arguments引用這個(gè)參數(shù)列表。注意，arguments引用的是一個(gè)參數(shù)列表而不是數(shù)組（雖然很像），所以數(shù)組的很多方法它都沒有。當(dāng)然，這個(gè)難不倒我們，還記得我上一篇文章里提到的apply()黑科技嗎？傳送門：《快速理解JavaScript中apply()和call()的用法和用途》

outerArgs就是獲取除了第一個(gè)參數(shù)之外的參數(shù)列表。

而在返回的函數(shù)里，innerArgs獲取的是調(diào)用這個(gè)返回函數(shù)時(shí)傳入的所有參數(shù)，比如之前city("上城區(qū)")里面的"上城區(qū)"。

而finalArgs則是拼接這兩個(gè)數(shù)組（注意此時(shí)兩個(gè)參數(shù)列表都已經(jīng)是正宗的數(shù)組，所以才可以使用concat方法）。

最后，使用apply，把所有參數(shù)組成的列表傳入到原來的函數(shù)，其實(shí)質(zhì)就是在調(diào)用原始的函數(shù)，因?yàn)榇藭r(shí)的參數(shù)都已齊全。

結(jié)尾福利：