目錄一、補(bǔ)充知識(shí)點(diǎn)之函數(shù)的隱式轉(zhuǎn)換二、補(bǔ)充知識(shí)點(diǎn)之利用call/apply封數(shù)組的map方法三、由淺入深的柯里化四、柯里化通用式五、柯里化與bind一、補(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é)果能夠滿(mǎn)足如下預(yù)期：

add(1)(2)(3) = 6add(1, 2, 3)(4) = 10add(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)類(lèi)似，但是參數(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ù)組專(zhuān)門(mén)用來(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)); // 15console.log(add(1, 2, 3, 4)(5)); // 15console.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)然，也就很輕松的滿(mǎn)足了我們的需求。

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

柯里化（英語(yǔ)：Currying），又稱(chēng)為部分求值，是把接受多個(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-6console.log(res2); // 0-1-2-3console.log(res3); // 2-4-6-8

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

四、柯里化通用式

通用的柯里化寫(xiě)法其實(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)); // 40console.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)：

接收單一參數(shù)，將更多的參數(shù)通過(guò)回調(diào)函數(shù)來(lái)搞定？ 返回一個(gè)新函數(shù)，用于處理所有的想要傳入的參數(shù)； 需要利用call/apply與arguments對(duì)象收集參數(shù)； 返回的這個(gè)函數(shù)正是用來(lái)處理收集起來(lái)的參數(shù)。

希望大家讀完之后都能夠大概明白柯里化的概念，如果想要熟練使用它，就需要我們掌握更多的實(shí)際經(jīng)驗(yàn)才行。

以上就是深入詳解JS函數(shù)的柯里化的詳細(xì)內(nèi)容，更多關(guān)于JS函數(shù)的柯里化的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！