深入詳解JS函數(shù)的柯里化

更新時(shí)間：2021年06月09日 15:41:40 作者：lsgxeva

JavaScript作為一種弱類型語(yǔ)言，它的隱式轉(zhuǎn)換是非常靈活有趣的。當(dāng)我們沒(méi)有深入了解隱式轉(zhuǎn)換的時(shí)候可能會(huì)對(duì)一些運(yùn)算的結(jié)果會(huì)感動(dòng)困惑，比如4 + true = 5。當(dāng)然，如果對(duì)隱式轉(zhuǎn)換了解足夠深刻，能夠提高對(duì)js的使用能力。這里分享一下，函數(shù)在隱式轉(zhuǎn)換中的一些規(guī)則

一、補(bǔ)充知識(shí)點(diǎn)之函數(shù)的隱式轉(zhuǎn)換

來(lái)一個(gè)簡(jiǎn)單的思考題。

function fn() {
    return 20;
}
console.log(fn + 10); // 輸出結(jié)果是多少？

稍微修改一下，再想想輸出結(jié)果會(huì)是什么？

function fn() {
    return 20;
}
 
fn.toString = function() {
    return 10;
}
 
console.log(fn + 10);  // 輸出結(jié)果是多少？

還可以繼續(xù)修改一下。

function fn() {
    return 20;
}
 
fn.toString = function() {
    return 10;
}
 
fn.valueOf = function() {
    return 5;
}
 
console.log(fn + 10); // 輸出結(jié)果是多少？

// 輸出結(jié)果分別為
function fn() {
    return 20;
}
10
 
20
 
15

當(dāng)使用console.log，或者進(jìn)行運(yùn)算時(shí)，隱式轉(zhuǎn)換就可能會(huì)發(fā)生。從上面三個(gè)例子中我們可以得出一些關(guān)于函數(shù)隱式轉(zhuǎn)換的結(jié)論。

當(dāng)我們沒(méi)有重新定義toString與valueOf時(shí)，函數(shù)的隱式轉(zhuǎn)換會(huì)調(diào)用默認(rèn)的toString方法，它會(huì)將函數(shù)的定義內(nèi)容作為字符串返回。而當(dāng)我們主動(dòng)定義了toString/vauleOf方法時(shí)，那么隱式轉(zhuǎn)換的返回結(jié)果則由我們自己控制了。其中valueOf的優(yōu)先級(jí)會(huì)toString高一點(diǎn)。

因此上面例子的結(jié)論就很容易理解了。建議大家動(dòng)手嘗試一下。

二、補(bǔ)充知識(shí)點(diǎn)之利用call/apply封數(shù)組的map方法

map(): 對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

通俗來(lái)說(shuō)，就是遍歷數(shù)組的每一項(xiàng)元素，并且在map的第一個(gè)參數(shù)（回調(diào)函數(shù)）中進(jìn)行運(yùn)算處理后返回計(jì)算結(jié)果。返回一個(gè)由所有計(jì)算結(jié)果組成的新數(shù)組。

// 回調(diào)函數(shù)中有三個(gè)參數(shù)
// 第一個(gè)參數(shù)表示newArr的每一項(xiàng)，第二個(gè)參數(shù)表示該項(xiàng)在數(shù)組中的索引值
// 第三個(gè)表示數(shù)組本身
// 除此之外，回調(diào)函數(shù)中的this，當(dāng)map不存在第二參數(shù)時(shí)，this指向丟失，當(dāng)存在第二個(gè)參數(shù)時(shí)，指向改參數(shù)所設(shè)定的對(duì)象
var newArr = [1, 2, 3, 4].map(function(item, i, arr) {
    console.log(item, i, arr, this);  // 可運(yùn)行試試看
    return item + 1;  // 每一項(xiàng)加1
}, { a: 1 })
 
console.log(newArr); // [2, 3, 4, 5]

在上面例子的注釋中詳細(xì)闡述了map方法的細(xì)節(jié)。現(xiàn)在要面臨一個(gè)難題，就是如何封裝map。

可以先想想for循環(huán)。我們可以使用for循環(huán)來(lái)實(shí)現(xiàn)一個(gè)map，但是在封裝的時(shí)候，我們會(huì)考慮一些問(wèn)題。我們?cè)谑褂胒or循環(huán)的時(shí)候，一個(gè)循環(huán)過(guò)程確實(shí)很好封裝，但是我們?cè)趂or循環(huán)里面要對(duì)每一項(xiàng)做的事情卻很難用一個(gè)固定的東西去把它封裝起來(lái)。因?yàn)槊恳粋€(gè)場(chǎng)景，for循環(huán)里對(duì)數(shù)據(jù)的處理肯定都是不一樣的。

于是大家就想了一個(gè)很好的辦法，將這些不一樣的操作單獨(dú)用一個(gè)函數(shù)來(lái)處理，讓這個(gè)函數(shù)成為map方法的第一個(gè)參數(shù)，具體這個(gè)回調(diào)函數(shù)中會(huì)是什么樣的操作，則由我們自己在使用時(shí)決定。因此，根據(jù)這個(gè)思路的封裝實(shí)現(xiàn)如下。

Array.prototype._map = function(fn, context) {
    var temp = [];
    if(typeof fn == 'function') {
        var k = 0;
        var len = this.length;
        // 封裝for循環(huán)過(guò)程
        for(; k < len; k++) {
            // 將每一項(xiàng)的運(yùn)算操作丟進(jìn)fn里，利用call方法指定fn的this指向與具體參數(shù)
            temp.push(fn.call(context, this[k], k, this))
        }
    } else {
        console.error('TypeError: '+ fn +' is not a function.');
    }
 
    // 返回每一項(xiàng)運(yùn)算結(jié)果組成的新數(shù)組
    return temp;
}
 
var newArr = [1, 2, 3, 4]._map(function(item) {
    return item + 1;
})
// [2, 3, 4, 5]

在上面的封裝中，我首先定義了一個(gè)空的temp數(shù)組，該數(shù)組用來(lái)存儲(chǔ)最終的返回結(jié)果。在for循環(huán)中，每循環(huán)一次，就執(zhí)行一次參數(shù)fn函數(shù)，fn的參數(shù)則使用call方法傳入。

在理解了map的封裝過(guò)程之后，我們就能夠明白為什么我們?cè)谑褂胢ap時(shí)，總是期望能夠在第一個(gè)回調(diào)函數(shù)中有一個(gè)返回值了。在eslint的規(guī)則中，如果我們?cè)谑褂胢ap時(shí)沒(méi)有設(shè)置一個(gè)返回值，就會(huì)被判定為錯(cuò)誤。

ok，明白了函數(shù)的隱式轉(zhuǎn)換規(guī)則與call/apply在這種場(chǎng)景的使用方式，我們就可以嘗試通過(guò)簡(jiǎn)單的例子來(lái)了解一下柯里化了。

三、由淺入深的柯里化

在前端面試中有一個(gè)關(guān)于柯里化的面試題，流傳甚廣。

實(shí)現(xiàn)一個(gè)add方法，使計(jì)算結(jié)果能夠滿足如下預(yù)期：

add(1)(2)(3) = 6
add(1, 2, 3)(4) = 10
add(1)(2)(3)(4)(5) = 15

很明顯，計(jì)算結(jié)果正是所有參數(shù)的和，add方法每運(yùn)行一次，肯定返回了一個(gè)同樣的函數(shù)，繼續(xù)計(jì)算剩下的參數(shù)。

我們可以從最簡(jiǎn)單的例子一步一步尋找解決方案。

當(dāng)我們只調(diào)用兩次時(shí)，可以這樣封裝。

function add(a) {
    return function(b) {
        return a + b;
    }
}
 
console.log(add(1)(2));  // 3

如果只調(diào)用三次：

function add(a) {
    return function(b) {
        return function (c) {
            return a + b + c;
        }
    }
}
 
console.log(add(1)(2)(3)); // 6

上面的封裝看上去跟我們想要的結(jié)果有點(diǎn)類似，但是參數(shù)的使用被限制得很死，因此并不是我們想要的最終結(jié)果，我們需要通用的封裝。應(yīng)該怎么辦？總結(jié)一下上面2個(gè)例子，其實(shí)我們是利用閉包的特性，將所有的參數(shù)，集中到最后返回的函數(shù)里進(jìn)行計(jì)算并返回結(jié)果。因此我們?cè)诜庋b時(shí)，主要的目的，就是將參數(shù)集中起來(lái)計(jì)算。

來(lái)看看具體實(shí)現(xiàn)。

function add() {
    // 第一次執(zhí)行時(shí)，定義一個(gè)數(shù)組專門用來(lái)存儲(chǔ)所有的參數(shù)
    var _args = [].slice.call(arguments);
 
    // 在內(nèi)部聲明一個(gè)函數(shù)，利用閉包的特性保存_args并收集所有的參數(shù)值
    var adder = function () {
        var _adder = function() {
            [].push.apply(_args, [].slice.call(arguments));
            return _adder;
        };
 
        // 利用隱式轉(zhuǎn)換的特性，當(dāng)最后執(zhí)行時(shí)隱式轉(zhuǎn)換，并計(jì)算最終的值返回
        _adder.toString = function () {
            return _args.reduce(function (a, b) {
                return a + b;
            });
        }
 
        return _adder;
    }
    return adder.apply(null, [].slice.call(arguments));
}
 
// 輸出結(jié)果，可自由組合的參數(shù)
console.log(add(1, 2, 3, 4, 5));  // 15
console.log(add(1, 2, 3, 4)(5));  // 15
console.log(add(1)(2)(3)(4)(5));  // 15

上面的實(shí)現(xiàn)，利用閉包的特性，主要目的是想通過(guò)一些巧妙的方法將所有的參數(shù)收集在一個(gè)數(shù)組里，并在最終隱式轉(zhuǎn)換時(shí)將數(shù)組里的所有項(xiàng)加起來(lái)。因此我們?cè)谡{(diào)用add方法的時(shí)候，參數(shù)就顯得非常靈活。當(dāng)然，也就很輕松的滿足了我們的需求。

那么讀懂了上面的demo，然后我們?cè)賮?lái)看看柯里化的定義，相信大家就會(huì)更加容易理解了。

柯里化（英語(yǔ)：Currying），又稱為部分求值，是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，并且返回一個(gè)新的函數(shù)的技術(shù)，新函數(shù)接受余下參數(shù)并返回運(yùn)算結(jié)果。

接收單一參數(shù)，因?yàn)橐獢y帶不少信息，因此常常以回調(diào)函數(shù)的理由來(lái)解決。
將部分參數(shù)通過(guò)回調(diào)函數(shù)等方式傳入函數(shù)中
返回一個(gè)新函數(shù)，用于處理所有的想要傳入的參數(shù)

在上面的例子中，我們可以將add(1, 2, 3, 4)轉(zhuǎn)換為add(1)(2)(3)(4)。這就是部分求值。每次傳入的參數(shù)都只是我們想要傳入的所有參數(shù)中的一部分。當(dāng)然實(shí)際應(yīng)用中，并不會(huì)常常這么復(fù)雜的去處理參數(shù)，很多時(shí)候也僅僅只是分成兩部分而已。

咱們?cè)賮?lái)一起思考一個(gè)與柯里化相關(guān)的問(wèn)題。

假如有一個(gè)計(jì)算要求，需要我們將數(shù)組里面的每一項(xiàng)用我們自己想要的字符給連起來(lái)。我們應(yīng)該怎么做？想到使用join方法，就很簡(jiǎn)單。

var arr = [1, 2, 3, 4, 5];
 
// 實(shí)際開(kāi)發(fā)中并不建議直接給Array擴(kuò)展新的方法
// 只是用這種方式演示能夠更加清晰一點(diǎn)
Array.prototype.merge = function(chars) {
    return this.join(chars);
}
 
var string = arr.merge('-')
 
console.log(string);  // 1-2-3-4-5

增加難度，將每一項(xiàng)加一個(gè)數(shù)后再連起來(lái)。那么這里就需要map來(lái)幫助我們對(duì)每一項(xiàng)進(jìn)行特殊的運(yùn)算處理，生成新的數(shù)組然后用字符連接起來(lái)了。實(shí)現(xiàn)如下：

var arr = [1, 2, 3, 4, 5];
 
Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item + number;
    }).join(chars);
}
 
var string = arr.merge('-', 1);
 
console.log(string); // 2-3-4-5-6

但是如果我們又想要讓數(shù)組每一項(xiàng)都減去一個(gè)數(shù)組之后再連起來(lái)呢？當(dāng)然和上面的加法操作一樣的實(shí)現(xiàn)。

var arr = [1, 2, 3, 4, 5];
 
Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item - number;
    }).join(chars);
}
 
var string = arr.merge('~', 1);
 
console.log(string); // 0~1~2~3~4

機(jī)智的小伙伴肯定發(fā)現(xiàn)困惑所在了。我們期望封裝一個(gè)函數(shù)，能同時(shí)處理不同的運(yùn)算過(guò)程，但是我們并不能使用一個(gè)固定的套路將對(duì)每一項(xiàng)的操作都封裝起來(lái)。于是問(wèn)題就變成了和封裝map的時(shí)候所面臨的問(wèn)題一樣了。我們可以借助柯里化來(lái)搞定。

與map封裝同樣的道理，既然我們事先并不確定我們將要對(duì)每一項(xiàng)數(shù)據(jù)進(jìn)行怎么樣的處理，我只是知道我們需要將他們處理之后然后用字符連起來(lái)，所以不妨將處理內(nèi)容保存在一個(gè)函數(shù)里。而僅僅固定封裝連起來(lái)的這一部分需求。

于是我們就有了以下的封裝。

// 封裝很簡(jiǎn)單，一句話搞定
Array.prototype.merge = function(fn, chars) {
    return this.map(fn).join(chars);
}
 
var arr = [1, 2, 3, 4];
 
// 難點(diǎn)在于，在實(shí)際使用的時(shí)候，操作怎么來(lái)定義，利用閉包保存于傳遞num參數(shù)
var add = function(num) {
    return function(item) {
        return item + num;
    }
}
 
var red = function(num) {
    return function(item) {
        return item - num;
    }
}
 
// 每一項(xiàng)加2后合并
var res1 = arr.merge(add(2), '-');
 
// 每一項(xiàng)減2后合并
var res2 = arr.merge(red(1), '-');
 
// 也可以直接使用回調(diào)函數(shù)，每一項(xiàng)乘2后合并
var res3 = arr.merge((function(num) {
    return function(item) {
        return item * num
    }
})(2), '-')
 
console.log(res1); // 3-4-5-6
console.log(res2); // 0-1-2-3
console.log(res3); // 2-4-6-8

大家能從上面的例子，發(fā)現(xiàn)柯里化的特征嗎？

四、柯里化通用式

通用的柯里化寫法其實(shí)比我們上邊封裝的add方法要簡(jiǎn)單許多。

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);
 
    return function() {
        // 主要還是收集所有需要的參數(shù)到一個(gè)數(shù)組中，便于統(tǒng)一計(jì)算
        var _args = args.concat([].slice.call(arguments));
        return fn.apply(null, _args);
    }
}
 
var sum = currying(function() {
    var args = [].slice.call(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    })
}, 10)
 
console.log(sum(20, 10));  // 40
console.log(sum(10, 5));   // 25

五、柯里化與bind

Object.prototype.bind = function(context) {
    var _this = this;
    var args = [].prototype.slice.call(arguments, 1);
 
    return function() {
        return _this.apply(context, args)
    }
}

這個(gè)例子利用call與apply的靈活運(yùn)用，實(shí)現(xiàn)了bind的功能。

在前面的幾個(gè)例子中，我們可以總結(jié)一下柯里化的特點(diǎn)：