JavaScript 函數(shù)式編程技巧 - 反柯里化

zhjx922 發(fā)布于2019-05-22 15:17 / 2807人閱讀

摘要：作為函數(shù)式編程語(yǔ)言，帶來(lái)了很多語(yǔ)言上的有趣特性，比如柯里化和反柯里化。而反柯里化，從字面講，意義和用法跟函數(shù)柯里化相比正好相反，擴(kuò)大適用范圍，創(chuàng)建一個(gè)應(yīng)用范圍更廣的函數(shù)。

作為函數(shù)式編程語(yǔ)言，JS帶來(lái)了很多語(yǔ)言上的有趣特性，比如柯里化和反柯里化。

可以對(duì)照另外一篇介紹 JS 柯里化的文章一起看~

1. 簡(jiǎn)介

柯里化，是固定部分參數(shù)，返回一個(gè)接受剩余參數(shù)的函數(shù)，也稱(chēng)為部分計(jì)算函數(shù)，目的是為了縮小適用范圍，創(chuàng)建一個(gè)針對(duì)性更強(qiáng)的函數(shù)。核心思想是把多參數(shù)傳入的函數(shù)拆成單參數(shù)（或部分）函數(shù)，內(nèi)部再返回調(diào)用下一個(gè)單參數(shù)（或部分）函數(shù)，依次處理剩余的參數(shù)。

而反柯里化，從字面講，意義和用法跟函數(shù)柯里化相比正好相反，擴(kuò)大適用范圍，創(chuàng)建一個(gè)應(yīng)用范圍更廣的函數(shù)。使本來(lái)只有特定對(duì)象才適用的方法，擴(kuò)展到更多的對(duì)象。

2. 實(shí)現(xiàn)

先來(lái)看看反柯里化的通用實(shí)現(xiàn)吧~

Function.prototype.unCurrying = function() { const self = this return function(...rest) { return Function.prototype.call.apply(self, rest) } }

解釋下：

為Function原型添加uncurrying方法，并在執(zhí)行的時(shí)候保存執(zhí)行unCurrying的方法到self

借用apply把要借用的函數(shù)作為this環(huán)境賦給call，并傳入之后的形參作為參數(shù)執(zhí)行

還有一個(gè)實(shí)現(xiàn)：

Function.prototype.unCurrying = function() { return this.call.bind(this) }

如果你覺(jué)得把函數(shù)放在Function.prototype上不太好，也可以這樣：

function unCurrying(fn) { return function(tar, ...argu) { return fn.apply(tar, argu) } } 3. 使用 3.1 簡(jiǎn)單使用

用unCurrying通用實(shí)現(xiàn)簡(jiǎn)單的實(shí)用一下試試：

Function.prototype.unCurrying = function() { const self = this // 這里的self就是Array.prototype.push方法 return function(...rest) { // rest為傳入的兩層參數(shù)[[1,2,3],4] return Function.prototype.call.apply(self, rest) } } const push = Array.prototype.push.unCurrying() ~function(...rest) { // rest:[1,2,3] push(rest, 4) console.log(rest) // [1, 2, 3, 4] }(1, 2, 3) 3.2 借用其他方法

反柯里化其實(shí)反映的是一種思想，即擴(kuò)大方法的適用范圍，仍然調(diào)用剛剛的通用unCurrying方法借用push方法：

const push = Array.prototype.push.unCurrying() const obj = { a: "嘻嘻" } push(obj, "呵呵", "哈哈", "嘿嘿") console.log(obj) // { "0": "呵呵", "1": "哈哈", "2": "嘿嘿", a: "嘻嘻", length: 3 }

相當(dāng)于obj.push(...)，obj不僅多了類(lèi)似于數(shù)組一樣以數(shù)字作為索引的屬性，還多了個(gè)類(lèi)似于數(shù)組的length屬性，讓引擎自動(dòng)管理數(shù)組成員和length屬性；(文后有V8引擎實(shí)現(xiàn)push方法的源碼) 這樣一個(gè)數(shù)組的push方法就被借用出來(lái)，可以應(yīng)用于任何其他對(duì)象了。

只要是方法，unCurrying就可以借用，call方法也可以：

var call = Function.prototype.call.unCurrying(); function $(id) { return this.getElementById(id); } call($, document, "demo") // #demo 元素

相當(dāng)于document.$("demo")，成功的借用了call方法，當(dāng)然可以把document改成你希望作為this綁定到$的任何對(duì)象，比如{ getElementById:T=>console.log(T+"呃") } // demo呃

3.3 借用自己

unCurrying本身也是方法，也可以借用自己...-。-

const unCurrying = Function.prototype.unCurrying.unCurrying() const map = unCurrying(Array.prototype.map) map({ 0: 4, 1: "a", 2: null, length: 3 }, n => n + n) // [8, "aa", 0]

神奇吧~

4. 總結(jié)

簡(jiǎn)單說(shuō)，函數(shù)柯里化就是對(duì)高階函數(shù)的降階處理，縮小適用范圍，創(chuàng)建一個(gè)針對(duì)性更強(qiáng)的函數(shù)。舉栗子：

function(arg1,arg2) // => function(arg1)(arg2) function(arg1,arg2,arg3) // => function(arg1)(arg2)(arg3) function(arg1,arg2,arg3,arg4) // => function(arg1)(arg2)(arg3)(arg4) function(arg1,arg2,…,argn) // => function(arg1)(arg2)…(argn)

而反柯里化就是反過(guò)來(lái)，增加適用范圍，讓方法使用場(chǎng)景更大。使用unCurrying, 可以把原生方法借出來(lái)，讓任何對(duì)象擁有原生對(duì)象的方法。舉個(gè)栗子：

obj.func(arg1, arg2) // => func(obj, arg1, arg2)

也可以這樣理解： 柯里化是在運(yùn)算前提前傳參，可以傳遞多個(gè)參數(shù)；反柯里化是延遲傳參，在運(yùn)算時(shí)把原來(lái)已經(jīng)固定的參數(shù)或者this上下文等當(dāng)作參數(shù)延遲到未來(lái)傳遞。

附：

V8引擎中Array.prototype.push方法源碼實(shí)現(xiàn)：

function ArrayPush() { var n = TO_UINT32(this.length); var m = %_ArgumentsLength(); for (var i = 0; i < m; i++) { this[i + n] = %_Arguments(i); // 屬性拷貝 this.length = n + m; // 修正length return this.length; } }

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過(guò)程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~

參考：

JS 柯里化
前端開(kāi)發(fā)者進(jìn)階之函數(shù)反柯里化unCurrying
JavaScript中有趣的反柯里化
js柯里化適用場(chǎng)景，優(yōu)缺點(diǎn)分別是什么，還有個(gè)反柯里化？
JS進(jìn)階篇--JS中的反柯里化( uncurrying)

PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~