通過(guò)實(shí)例了解Javascript柯里化流程
函數(shù)式編程是一種如今比較流行的編程范式,它主張將函數(shù)作為參數(shù)進(jìn)行傳遞,然后返回一個(gè)沒(méi)有副作用的函數(shù),說(shuō)白了,就是希望一個(gè)函數(shù)只做一件事情。
像Javascript,Haskell,Clojure等編程語(yǔ)言都支持函數(shù)式編程。
這種編程思想涵蓋了三個(gè)重要的概念:
- 純函數(shù)
- 柯里化
- 高階函數(shù)
而這篇文章主要是想向大家講清楚柯里化這個(gè)概念。
什么是柯里化
首先我們先來(lái)看一個(gè)例子:
function sum(a, b, c) {
return a + b + c;
}
// 調(diào)用
sum(1, 2, 3); // 6
上述函數(shù)實(shí)現(xiàn)的是將a,b,c三個(gè)參數(shù)相加,改寫(xiě)為柯里化函數(shù)如下:
function sum(a) {
return function (b) {
return function(c) {
return a + b + c;
}
}
}
// 調(diào)用
let sum1 = sum(1);
let sum2 = sum1(2);
sum2(3); // 6
所謂柯里化就是把具有較多參數(shù)的函數(shù)轉(zhuǎn)換成具有較少參數(shù)的函數(shù)的過(guò)程。
我們來(lái)一步步看上面那個(gè)柯里化函數(shù)做了什么,首先第一步調(diào)用了sum(1),此時(shí)變量sum1相當(dāng)于:
sum1 = function(b) {
return function(c) {
// 注意此時(shí)變量a存在于閉包中,可以調(diào)用,a = 1
return a + b + c;
}
}
然后調(diào)用sum1(2),此時(shí)賦值給變量sum2相當(dāng)于:
sum2 = function(c) {
// 變量a,b皆在閉包中, a = 1, b = 2
return a + b + c;
}
最后調(diào)用sum2(3),返回1 + 2 + 3的結(jié)果6;
這就是一個(gè)最簡(jiǎn)單的柯里化函數(shù),是不是很簡(jiǎn)單呢?
柯里化函數(shù)的作用
那么問(wèn)題來(lái)了,上面改寫(xiě)后的柯里化函數(shù)和原函數(shù)比起來(lái)代碼多了不少,而且也不如原函數(shù)好理解,柯里化函數(shù)到底有什么用呢?
確實(shí),柯里化函數(shù)在這里看起來(lái)的確是很臃腫,不實(shí)用,但在很多場(chǎng)景下他的作用是很大的,甚至很多人在不經(jīng)意間已經(jīng)在使用柯里化函數(shù)了。舉一個(gè)簡(jiǎn)單的例子:
假設(shè)我們有一批的長(zhǎng)方體,我們需要計(jì)算這些長(zhǎng)方體的體積,實(shí)現(xiàn)一個(gè)如下函數(shù):
function volume(length, width, height) {
return length * width * height;
}
volume(200, 100, 200);
volume(200, 150, 100);
volume(200, 50, 80);
volume(100, 50, 60);
如上計(jì)算長(zhǎng)方體的體積函數(shù)會(huì)發(fā)現(xiàn)存在很多相同長(zhǎng)度的長(zhǎng)方體,我們?cè)儆每吕锘瘮?shù)實(shí)現(xiàn)一下:
function volume(length, width, height) {
return function(width) {
return function(height) {
return length * width * height;
}
}
}
let len200 = volume(200);
len200(100)(200);
len200(150)(100);
len200(50)(80);
volume(100)(50)(60);
如上,通過(guò)實(shí)現(xiàn)一個(gè)len200函數(shù)我們統(tǒng)一處理長(zhǎng)度為200的長(zhǎng)方體的體積,這就實(shí)現(xiàn)了參數(shù)復(fù)用。
我們?cè)倥e一個(gè)只執(zhí)行一次函數(shù)的例子:
function execOnce(fun) {
let flag = true;
return function() {
if (flag) {
fun && fun();
flag = false;
}
}
}
let onceConsole = execOnce(function() {
console.log('只打印一次');
});
onceConsole();
onceConsole();
如上,我們實(shí)現(xiàn)了一個(gè)execOnce函數(shù),該函數(shù)接受一個(gè)函數(shù)參數(shù),然后返回一個(gè)函數(shù),變量flag存在閉包中,用來(lái)判斷返回的函數(shù)是否執(zhí)行過(guò),onceConsole相當(dāng)于:
let onceConsole = function() {
if (flag) {
(function() {
console.log('只打印一次');
})()
flag = false;
}
}
這也是柯里化函數(shù)的一個(gè)簡(jiǎn)單應(yīng)用。
通用柯里化函數(shù)的實(shí)現(xiàn)
既然柯里化函數(shù)這么實(shí)用,那么我們能不能實(shí)現(xiàn)一個(gè)通用的柯里化函數(shù)呢?所謂通用,就是說(shuō)該函數(shù)可以把函數(shù)參數(shù)轉(zhuǎn)換為柯里化函數(shù),看下第一版實(shí)現(xiàn)的代碼:
// 第一版
var curry = function (fn) {
var args = [].slice.call(arguments, 1);
return function() {
var newArgs = args.concat([].slice.call(arguments));
return fn.apply(null, newArgs);
};
};
function add(a, b) {
return a + b;
}
var addFun = curry(add, 1, 2);
addFun() // 3
//或者
var addOne = curry(add, 1);
如上代碼,我們接受一個(gè)函數(shù)作為參數(shù),然后收集其它的參數(shù),將這些參數(shù)傳給這個(gè)函數(shù)參數(shù)去執(zhí)行。但上面的代碼有個(gè)問(wèn)題,參數(shù)不夠自由,比如我們想這么調(diào)用就會(huì)報(bào)錯(cuò):
var addFun = curry(function(a, b,c) {
return a + b + c;
}, 1);
addFun(2)(3); // 報(bào)錯(cuò) addFun(...) is not a function
這好像違背了我們參數(shù)復(fù)用的原則,改進(jìn)如下:
function curry(fn, args) {
var length = fn.length;
args = args || [];
return function(...rest) {
var _args = [...args, ...rest];
return _args.length < length
? curry.call(this, fn, _args)
: fn.apply(this, _args);
}
}
var fn = curry(function(a, b, c) {
console.log(a + b + c);
});
fn('a', 'b', 'c'); // abc
fn('a', 'b')('c'); // abc
fn('a')('b')('c'); // abc
如上實(shí)現(xiàn)就很完善,該工具函數(shù)的實(shí)現(xiàn)總結(jié)起來(lái)就一句話:
利用閉包將函數(shù)的參數(shù)儲(chǔ)存起來(lái),等參數(shù)達(dá)到一定數(shù)量時(shí)執(zhí)行函數(shù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程
- Javascript柯里化實(shí)現(xiàn)原理及作用解析
- 淺析JavaScript 函數(shù)柯里化
- js函數(shù)柯里化的方法和作用實(shí)例分析
- javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過(guò)程解析
- JavaScript偏函數(shù)與柯里化實(shí)例詳解
- JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法
- 淺談JS中的反柯里化( uncurrying)
- 詳解JS中的柯里化(currying)
- JavaScript函數(shù)柯里化原理與用法分析
- 淺談JS中的bind方法與函數(shù)柯里化
- Javascript閉包與函數(shù)柯里化淺析
- 深入剖析JavaScript中的函數(shù)currying柯里化
- javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
- JavaScript函數(shù)柯里化詳解
- javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法
- 深入解析JavaScript中函數(shù)的Currying柯里化
- 怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
相關(guān)文章
使用JavaScript獲取URL參數(shù)的方法總結(jié)
在?JavaScript?中,獲取?URL?參數(shù)是非常常見(jiàn)的操作,這篇文章為大家整理了四個(gè)JavaScript常見(jiàn)的獲取URL參數(shù)方法,希望對(duì)大家有所幫助2024-12-12
自定義的一個(gè)簡(jiǎn)單時(shí)尚js下拉選擇框
下拉選擇框,是我們?cè)诰W(wǎng)頁(yè)中經(jīng)常使用到的,在本文為大家詳細(xì)介紹下使用js使用的下拉選擇框2013-11-11
JS URL傳中文參數(shù)引發(fā)的亂碼問(wèn)題
今天的項(xiàng)目中碰到了一個(gè)亂碼問(wèn)題,從JS里傳URL到服務(wù)器,URL中有中文參數(shù),服務(wù)器里讀出的中文參數(shù)來(lái)的全是“?”,查了網(wǎng)上JS編碼相關(guān)資料得以解決。2009-09-09
JavaScript TypeScript實(shí)現(xiàn)貪吃蛇游戲完整詳細(xì)流程
這篇文章主要介紹了JavaScript TypeScript實(shí)現(xiàn)貪吃蛇游戲流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法,涉及javascript中Math.random方法的靈活運(yùn)用,需要的朋友可以參考下2015-04-04
原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問(wèn)題,在華為上機(jī)筆試中也出現(xiàn)過(guò)。 約瑟夫環(huán)是一個(gè)數(shù)學(xué)的應(yīng)用問(wèn)題,下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實(shí)現(xiàn)方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01
巧方法 JavaScript獲取超鏈接的絕對(duì)URL地址
這篇文章主要為大家詳細(xì)介紹了一個(gè)非常巧妙的方法,JavaScript如何獲取超鏈接的絕對(duì)URL地址,感興趣的小伙伴們可以參考一下2016-06-06
基于JavaScript編寫(xiě)8086匯編指令查詢(xún)工具
匯編語(yǔ)言還是在大學(xué)的時(shí)候?qū)W的,匯編語(yǔ)言有個(gè)特點(diǎn)是語(yǔ)句短、條數(shù)多,很難可以把全部指令都背熟。本文就來(lái)用JavaScript編寫(xiě)一個(gè)8086匯編指令查詢(xún)工具,希望對(duì)大家有所幫助2023-02-02

