JavaScript函數(shù)柯里化
1 什么是函數(shù)柯里化
在計算機(jī)科學(xué)中，柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個技術(shù)以邏輯學(xué)家 Haskell Curry 命名的。
什么意思？簡單來說，柯里化是一項技術(shù)，它用來改造多參數(shù)的函數(shù)。
比如：
// 這是一個接受3個參數(shù)的函數(shù)
const add = function(x, y, z) {
return x + y + z
}
我們將它變換一下，可以得到這樣一個函數(shù)：
// 接收一個單一參數(shù)
const curryingAdd = function(x) {
// 并且返回接受余下的參數(shù)的函數(shù)
return function(y, z) {
return x + y + z
}
}
這樣有什么區(qū)別呢？從調(diào)用上來對比：
// 調(diào)用add add(1, 2, 3) // 調(diào)用curryingAdd curryingAdd(1)(2, 3) // 看得更清楚一點，等價于下面 const fn = curryingAdd(1) fn(2, 3)
可以看到，變換后的的函數(shù)可以分批次接受參數(shù)，先記住這一點，下面會講用處。甚至fn（curryingAdd返回的函數(shù)）還可以繼續(xù)變換
如下：
const curryingAdd = function(x) {
return function(y) {
return function(z) {
return x + y + z
}
}
}
// 調(diào)用
curryingAdd(1)(2)(3)
// 即
const fn = curryingAdd(1)
const fn1 = fn(2)
fn1(3)
上面的兩次變換過程，就是函數(shù)柯里化。
簡單講就是把一個多參數(shù)的函數(shù)f，變換成接受部分參數(shù)的函數(shù)g，并且這個函數(shù)g會返回一個函數(shù)h，函數(shù)h用來接受其他參數(shù)。函數(shù)h可以繼續(xù)柯里化。就是一個套娃的過程～
那么費(fèi)這么大勁將函數(shù)柯里化有什么用呢？
2 柯里化的作用和特點
2.1 參數(shù)復(fù)用
工作中會遇到的需求：通過正則校驗電話號、郵箱、身份證是否合法等等
于是我們會封裝一個校驗函數(shù)如下：
/**
* @description 通過正則校驗字符串
* @param {RegExp} regExp 正則對象
* @param {String} str 待校驗字符串
* @return {Boolean} 是否通過校驗
*/
function checkByRegExp(regExp, str) {
return regExp.test(str)
}
假如我們要校驗很多手機(jī)號、郵箱，我們就會這樣調(diào)用：
// 校驗手機(jī)號
checkByRegExp(/^1\d{10}$/, '15152525634');
checkByRegExp(/^1\d{10}$/, '13456574566');
checkByRegExp(/^1\d{10}$/, '18123787385');
// 校驗郵箱
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'fsds@163.com');
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'fdsf@qq.com');
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'fjks@qq.com');
貌似沒什么問題，事實上還有改進(jìn)的空間
- 校驗同一類型的數(shù)據(jù)時，相同的正則我們寫了很多次。
- 代碼可讀性較差，如果沒有注釋，我們并不能一下就看出來正則的作用
我們試著使用函數(shù)柯里化來改進(jìn)：
// 將函數(shù)柯里化
function checkByRegExp(regExp) {
return function(str) {
return regExp.test(str)
}
}
于是我們傳入不同的正則對象，就可以得到功能不同的函數(shù)：
// 校驗手機(jī)
const checkPhone = curryingCheckByRegExp(/^1\d{10}$/)
// 校驗郵箱
const checkEmail = curryingCheckByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/)
現(xiàn)在校驗手機(jī)、郵箱的代碼就簡單了，并且可讀性也增強(qiáng)了
// 校驗手機(jī)號
checkPhone('15152525634');
checkPhone('13456574566');
checkPhone('18123787385');
// 校驗郵箱
checkEmail('fsds@163.com');
checkEmail('fdsf@qq.com');
checkEmail('fjks@qq.com');
這就是參數(shù)復(fù)用：我們只需將第一個參數(shù)regExp復(fù)用，就可以直接調(diào)用有特定功能的函數(shù)
通用函數(shù)(如checkByRegExp)解決了兼容性問題，但也會帶來使用的不便，比如不同的應(yīng)用場景需要傳遞多個不同的參數(shù)來解決問題
有的時候同一種規(guī)則可能會反復(fù)使用（比如校驗手機(jī)的參數(shù)），這就造成了代碼的重復(fù)，利用柯里化就能夠消除重復(fù)，達(dá)到復(fù)用參數(shù)的目的。
柯里化的一種重要思想：降低適用范圍，提高適用性
2.2 提前返回
在JS DOM事件監(jiān)聽程序中，我們用addEventListener方法為元素添加事件處理程序，但是部分瀏覽器版本不支持此方法，我們會使用attachEvent方法來替代。
這時我們會寫一個兼容各瀏覽器版本的代碼：
/**
* @description:
* @param {object} element DOM元素對象
* @param {string} type 事件類型
* @param {Function} fn 事件處理函數(shù)
* @param {boolean} isCapture 是否捕獲
* @return {void}
*/
function addEvent(element, type, fn, isCapture) {
if (window.addEventListener) {
element.addEventListener(type, fn, isCapture)
} else if (window.attachEvent) {
element.attachEvent("on" + type, fn)
}
}
我們用addEvent來添加事件監(jiān)聽，但是每次調(diào)用此方法時，都會進(jìn)行一次判斷，事實上瀏覽器版本確定下來后，沒有必要進(jìn)行重復(fù)判斷。
柯里化處理：
function curryingAddEvent() {
if (window.addEventListener) {
return function(element, type, fn, isCapture) {
element.addEventListener(type, fn, isCapture)
}
} else if (window.attachEvent) {
return function(element, type, fn) {
element.attachEvent("on" + type, fn)
}
}
}
const addEvent = curryingAddEvent()
// 也可以用立即執(zhí)行函數(shù)將上述代碼合并
const addEvent = (function curryingAddEvent() {
...
})()
現(xiàn)在我們得到的addEvent是經(jīng)過判斷后得到的函數(shù)，以后調(diào)用就不用重復(fù)判斷了。
這就是提前返回或者說提前確認(rèn)，函數(shù)柯里化后可以提前處理部分任務(wù)，返回一個函數(shù)處理其他任務(wù)
另外，我們可以看到，curryingAddEvent好像并沒有接受參數(shù)。這是因為原函數(shù)的條件（即瀏覽器的版本是否支持addEventListener）是直接從全局獲取的。
邏輯上其實是可以改成：
let mode = window.addEventListener ? 0 : 1;
function addEvent(mode, element, type, fn, isCapture) {
if (mode === 0) {
element.addEventListener(type, fn, isCapture);
} else if (mode === 1) {
element.attachEvent("on" + type, fn);
}
}
// 這樣柯里化后就可以先接受一個參數(shù)了
function curryingAddEvent(mode) {
if (mode === 0) {
return function(element, type, fn, isCapture) {
element.addEventListener(type, fn, isCapture)
}
} else if (mode === 1) {
return function(element, type, fn) {
element.attachEvent("on" + type, fn)
}
}
}
當(dāng)然沒必要這么改～
2.3 延遲執(zhí)行
事實上，上述正則校驗和事件監(jiān)聽的例子中已經(jīng)體現(xiàn)了延遲執(zhí)行。
curryingCheckByRegExp函數(shù)調(diào)用后返回了checkPhone和checkEmail函數(shù)
curringAddEvent函數(shù)調(diào)用后返回了addEvent函數(shù)
返回的函數(shù)都不會立即執(zhí)行，而是等待調(diào)用。
3 封裝通用柯里化工具函數(shù)#
上面我們對函數(shù)進(jìn)行柯里化都是手動修改了原函數(shù)，將add改成了curryingAdd、將checkByRegExp改成了curryingCheckByRegExp、將addEvent改成了curryingAddEvent。
難道我們每次對函數(shù)進(jìn)行柯里化都要手動修改底層函數(shù)嗎？當(dāng)然不是
我們可以封裝一個通用柯里化工具函數(shù)（面試手寫代碼）
/**
* @description: 將函數(shù)柯里化的工具函數(shù)
* @param {Function} fn 待柯里化的函數(shù)
* @param {array} args 已經(jīng)接收的參數(shù)列表
* @return {Function}
*/
const currying = function(fn, ...args) {
// fn需要的參數(shù)個數(shù)
const len = fn.length
// 返回一個函數(shù)接收剩余參數(shù)
return function (...params) {
// 拼接已經(jīng)接收和新接收的參數(shù)列表
let _args = [...args, ...params]
// 如果已經(jīng)接收的參數(shù)個數(shù)還不夠，繼續(xù)返回一個新函數(shù)接收剩余參數(shù)
if (_args.length < len) {
return currying.call(this, fn, ..._args)
}
// 參數(shù)全部接收完調(diào)用原函數(shù)
return fn.apply(this, _args)
}
}
這個柯里化工具函數(shù)用來接收部分參數(shù)，然后返回一個新函數(shù)等待接收剩余參數(shù)，遞歸直到接收到全部所需參數(shù)，然后通過apply調(diào)用原函數(shù)。
現(xiàn)在我們基本不用手動修改原函數(shù)來將函數(shù)柯里化了
// 直接用工具函數(shù)返回校驗手機(jī)、郵箱的函數(shù)
const checkPhone = currying(checkByRegExp(/^1\d{10}$/))
const checkEmail = currying(checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/))
但是上面事件監(jiān)聽的例子就不能用這個工具函數(shù)進(jìn)行柯里化了，原因前面說了，因為它的條件直接從全局獲取了，所以比較特殊，改成從外部傳入條件，就能用工具函數(shù)柯里化了。當(dāng)然沒這個必要，直接修改原函數(shù)更直接、可讀性更強(qiáng)
4 總結(jié)和補(bǔ)充
- 柯里化突出一種重要思想：降低適用范圍，提高適用性
- 柯里化的三個作用和特點：參數(shù)復(fù)用、提前返回、延遲執(zhí)行
- 柯里化是閉包的一個典型應(yīng)用，利用閉包形成了一個保存在內(nèi)存中的作用域，把接收到的部分參數(shù)保存在這個作用域中，等待后續(xù)使用。并且返回一個新函數(shù)接收剩余參數(shù)
到此這篇關(guān)于JavaScript函數(shù)柯里化的文章就介紹到這了,更多相關(guān)函數(shù)柯里化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了open 打開瀏覽器的過程原理示例解析，2022-12-12
有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
這篇文章主要為大家介紹了JavaScript全解析之DOM操作及獲取元素的方法全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序 require機(jī)制詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 注冊頁面的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了RxJS中的Observable和Observer使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Thinkphp5微信小程序獲取用戶信息接口的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序 Storage API實例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 input輸入及動態(tài)設(shè)置按鈕的實現(xiàn)
這篇文章主要介紹了微信小程序 input輸入及動態(tài)設(shè)置按鈕的實現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了什么是TypeScript，TypeScript是JavaScript的超集，它可以編譯成純JavaScript代碼，TypeScript可以運(yùn)行在瀏覽器環(huán)境、Node.js環(huán)境或者ECMAScript3或者更高的JavaScript的引擎中，下面我們就進(jìn)入文章一起學(xué)習(xí)TypeScript的詳細(xì)內(nèi)容吧2021-12-12