JavaScript 閉包與高階函數(shù)是怎樣的,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
專業(yè)成都網(wǎng)站建設(shè)公司,做排名好的好網(wǎng)站,排在同行前面,為您帶來客戶和效益!創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè),五站合一網(wǎng)站設(shè)計制作,服務(wù)好的網(wǎng)站設(shè)計公司,網(wǎng)站設(shè)計制作、做網(wǎng)站負責(zé)任的成都網(wǎng)站制作公司!
「JavaScript 中,函數(shù)是一等公民」,在各種書籍和文章中我們總能看到這句話。
既然有一等,那么當(dāng)然也有次等了。
如果公民分等級,一等公民什么都可以做,次等公民這不能做那不能做。JavaScript的函數(shù)也是對象,可以有屬性,可以賦值給一個變量,可以放在數(shù)組里作為元素,可以作為其他對象的屬性,什么都可以做,別的對象能做的它能做,別的對象不能做的它也能做。這不就是一等公民的地位嘛。
— 程墨Morgan
所以它的含義是:函數(shù)和其他普通對象一樣,其上有屬性也有方法,普通對象能做的,函數(shù)也可以做。
正因為在 JavaScript 中的極大自由,函數(shù)被賦予了卓越的表達力和靈活性,但是也產(chǎn)生了很多讓人抓耳撓腮的問題。本文我們就一起討論一下最常遇見的兩個與函數(shù)密切相關(guān)的概念:閉包和高階函數(shù)。這兩個概念在之后設(shè)計模式的文章中也會經(jīng)常碰見。
1.1 什么是閉包
當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時,就產(chǎn)生了閉包,即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行。
我們首先來看一個閉包的例子:
function foo() { var a = 2 function bar() { console.log(a) } return bar } var baz = foo() baz() // 輸出: 2
foo 函數(shù)傳遞出了一個函數(shù) bar,傳遞出來的 bar 被賦值給 baz 并調(diào)用,雖然這時 baz 是在 foo 作用域外執(zhí)行的,但 baz 在調(diào)用的時候可以訪問到前面的 bar 函數(shù)所在的 foo 的內(nèi)部作用域。
由于 bar 聲明在 foo 函數(shù)內(nèi)部,bar 擁有涵蓋 foo 內(nèi)部作用域的閉包,使得 foo 的內(nèi)部作用域一直存活不被回收。一般來說,函數(shù)在執(zhí)行完后其整個內(nèi)部作用域都會被銷毀,因為 JavaScript 的 GC(Garbage Collection)垃圾回收機制會自動回收不再使用的內(nèi)存空間。但是閉包會阻止某些 GC,比如本例中 foo() 執(zhí)行完,因為返回的 bar 函數(shù)依然持有其所在作用域的引用,所以其內(nèi)部作用域不會被回收。
注意: 如果不是必須使用閉包,那么盡量避免創(chuàng)建它,因為閉包在處理速度和內(nèi)存消耗方面對性能具有負面影響。
1.2 利用閉包實現(xiàn)結(jié)果緩存(備忘模式)
備忘模式就是應(yīng)用閉包的特點的一個典型應(yīng)用。比如有個函數(shù):
function add(a) { return a + 1; }
多次運行 add() 時,每次得到的結(jié)果都是重新計算得到的,如果是開銷很大的計算操作的話就比較消耗性能了,這里可以對已經(jīng)計算過的輸入做一個緩存。
所以這里可以利用閉包的特點來實現(xiàn)一個簡單的緩存,在函數(shù)內(nèi)部用一個對象存儲輸入的參數(shù),如果下次再輸入相同的參數(shù),那就比較一下對象的屬性,如果有緩存,就直接把值從這個對象里面取出來。
/* 備忘函數(shù) */ function memorize(fn) { var cache = {} return function() { var args = Array.prototype.slice.call(arguments) var key = JSON.stringify(args) return cache[key] || (cache[key] = fn.apply(fn, args)) } } /* 復(fù)雜計算函數(shù) */ function add(a) { return a + 1 } var adder = memorize(add) adder(1) // 輸出: 2 當(dāng)前: cache: { '[1]': 2 } adder(1) // 輸出: 2 當(dāng)前: cache: { '[1]': 2 } adder(2) // 輸出: 3 當(dāng)前: cache: { '[1]': 2, '[2]': 3 }
使用 ES6 的方式會更優(yōu)雅一些:
/* 備忘函數(shù) */ function memorize(fn) { const cache = {} return function(...args) { const key = JSON.stringify(args) return cache[key] || (cache[key] = fn.apply(fn, args)) } } /* 復(fù)雜計算函數(shù) */ function add(a) { return a + 1 } const adder = memorize(add) adder(1) // 輸出: 2 當(dāng)前: cache: { '[1]': 2 } adder(1) // 輸出: 2 當(dāng)前: cache: { '[1]': 2 } adder(2) // 輸出: 3 當(dāng)前: cache: { '[1]': 2, '[2]': 3 }
稍微解釋一下:
備忘函數(shù)中用 JSON.stringify 把傳給 adder 函數(shù)的參數(shù)序列化成字符串,把它當(dāng)做 cache 的索引,將 add 函數(shù)運行的結(jié)果當(dāng)做索引的值傳遞給 cache,這樣 adder 運行的時候如果傳遞的參數(shù)之前傳遞過,那么就返回緩存好的計算結(jié)果,不用再計算了,如果傳遞的參數(shù)沒計算過,則計算并緩存 fn.apply(fn, args),再返回計算的結(jié)果。
當(dāng)然這里的實現(xiàn)如果要實際應(yīng)用的話,還需要繼續(xù)改進一下,比如:
緩存不可以永遠擴張下去,這樣太耗費內(nèi)存資源,我們可以只緩存最新傳入的 n 個;
在瀏覽器中使用的時候,我們可以借助瀏覽器的持久化手段,來進行緩存的持久化,比如 cookie、localStorage 等;
這里的復(fù)雜計算函數(shù)可以是過去的某個狀態(tài),比如對某個目標(biāo)的操作,這樣把過去的狀態(tài)緩存起來,方便地進行狀態(tài)回退。
復(fù)雜計算函數(shù)也可以是一個返回時間比較慢的異步操作,這樣如果把結(jié)果緩存起來,下次就可以直接從本地獲取,而不是重新進行異步請求。
注意: cache 不可以是 Map,因為 Map 的鍵是使用 === 比較的,因此當(dāng)傳入引用類型值作為鍵時,雖然它們看上去是相等的,但實際并不是,比如 [1]!==[1],所以還是被存為不同的鍵。
// X 錯誤示范 function memorize(fn) { const cache = new Map() return function(...args) { return cache.get(args) || cache.set(args, fn.apply(fn, args)).get(args) } } function add(a) { return a + 1 } const adder = memorize(add) adder(1) // 2 cache: { [ 1 ] => 2 } adder(1) // 2 cache: { [ 1 ] => 2, [ 1 ] => 2 } adder(2) // 3 cache: { [ 1 ] => 2, [ 1 ] => 2, [ 2 ] => 3 }
2. 高階函數(shù)
高階函數(shù)就是輸入?yún)?shù)里有函數(shù),或者輸出是函數(shù)的函數(shù)。
2.1 函數(shù)作為參數(shù)
如果你用過 setTimeout、setInterval、ajax 請求,那么你已經(jīng)用過高階函數(shù)了,這是我們最??吹降膱鼍埃夯卣{(diào)函數(shù),因為它將函數(shù)作為參數(shù)傳遞給另一個函數(shù)。
比如 ajax 請求中,我們通常使用回調(diào)函數(shù)來定義請求成功或者失敗時的操作邏輯:
$.ajax("/request/url", function(result){ console.log("請求成功!") })
在 Array、Object、String 等等基本對象的原型上有很多操作方法,可以接受回調(diào)函數(shù)來方便地進行對象操作。這里舉一個很常用的 Array.prototype.filter() 方法,這個方法返回一個新創(chuàng)建的數(shù)組,包含所有回調(diào)函數(shù)執(zhí)行后返回 true 或真值的數(shù)組元素。
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; var result = words.filter(function(word) { return word.length > 6 }) // 輸出: ["exuberant", "destruction", "present"]
回調(diào)函數(shù)還有一個應(yīng)用就是鉤子,如果你用過 Vue 或者 React 等框架,那么你應(yīng)該對鉤子很熟悉了,它的形式是這樣的:
function foo(callback) { // ... 一些操作 callback() }
2.2 函數(shù)作為返回值
另一個經(jīng)??吹降母唠A函數(shù)的場景是在一個函數(shù)內(nèi)部輸出另一個函數(shù),比如:
function foo() { return function bar() {} }
主要是利用閉包來保持著作用域:
function add() { var num = 0 return function(a) { return num = num + a } } var adder = add() adder(1) // 輸出: 1 adder(2) // 輸出: 3
1. 柯里化
柯里化(Currying),又稱部分求值(Partial Evaluation),是把接受多個參數(shù)的原函數(shù)變換成接受一個單一參數(shù)(原函數(shù)的第一個參數(shù))的函數(shù),并且返回一個新函數(shù),新函數(shù)能夠接受余下的參數(shù),最后返回同原函數(shù)一樣的結(jié)果。
核心思想是把多參數(shù)傳入的函數(shù)拆成單(或部分)參數(shù)函數(shù),內(nèi)部再返回調(diào)用下一個單(或部分)參數(shù)函數(shù),依次處理剩余的參數(shù)。
柯里化有3個常見作用:
參數(shù)復(fù)用
提前返回
延遲計算/運行
先來看看柯里化的通用實現(xiàn):
// ES5 方式 function currying(fn) { var rest1 = Array.prototype.slice.call(arguments) rest1.shift() return function() { var rest2 = Array.prototype.slice.call(arguments) return fn.apply(null, rest1.concat(rest2)) } } // ES6 方式 function currying(fn, ...rest1) { return function(...rest2) { return fn.apply(null, rest1.concat(rest2)) } }
用它將一個 sayHello 函數(shù)柯里化試試:
// 接上面 function sayHello(name, age, fruit) { console.log(console.log(`我叫 ${name},我 ${age} 歲了, 我喜歡吃 ${fruit}`)) } var curryingShowMsg1 = currying(sayHello, '小明') curryingShowMsg1(22, '蘋果') // 輸出: 我叫 小明,我 22 歲了, 我喜歡吃 蘋果 var curryingShowMsg2 = currying(sayHello, '小衰', 20) curryingShowMsg2('西瓜') // 輸出: 我叫 小衰,我 20 歲了, 我喜歡吃 西瓜
更高階的用法參見:JavaScript 函數(shù)式編程技巧 - 柯里化
2. 反柯里化
柯里化是固定部分參數(shù),返回一個接受剩余參數(shù)的函數(shù),也稱為部分計算函數(shù),目的是為了縮小適用范圍,創(chuàng)建一個針對性更強的函數(shù)。核心思想是把多參數(shù)傳入的函數(shù)拆成單參數(shù)(或部分)函數(shù),內(nèi)部再返回調(diào)用下一個單參數(shù)(或部分)函數(shù),依次處理剩余的參數(shù)。
而反柯里化,從字面講,意義和用法跟函數(shù)柯里化相比正好相反,擴大適用范圍,創(chuàng)建一個應(yīng)用范圍更廣的函數(shù)。使本來只有特定對象才適用的方法,擴展到更多的對象。
先來看看反柯里化的通用實現(xiàn)吧~
// ES5 方式 Function.prototype.unCurrying = function() { var self = this return function() { var rest = Array.prototype.slice.call(arguments) return Function.prototype.call.apply(self, rest) } } // ES6 方式 Function.prototype.unCurrying = function() { const self = this return function(...rest) { return Function.prototype.call.apply(self, rest) } }
如果你覺得把函數(shù)放在 Function 的原型上不太好,也可以這樣:
// ES5 方式 function unCurrying(fn) { return function (tar) { var rest = Array.prototype.slice.call(arguments) rest.shift() return fn.apply(tar, rest) } } // ES6 方式 function unCurrying(fn) { return function(tar, ...argu) { return fn.apply(tar, argu) } }
下面簡單試用一下反柯里化通用實現(xiàn),我們將 Array 上的 push 方法借出來給 arguments 這樣的類數(shù)組增加一個元素:
// 接上面 var push = unCurrying(Array.prototype.push) function execPush() { push(arguments, 4) console.log(arguments) } execPush(1, 2, 3) // 輸出: [1, 2, 3, 4]
簡單說,函數(shù)柯里化就是對高階函數(shù)的降階處理,縮小適用范圍,創(chuà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)
而反柯里化就是反過來,增加適用范圍,讓方法使用場景更大。使用反柯里化, 可以把原生方法借出來,讓任何對象擁有原生對象的方法。
obj.func(arg1, arg2) // => func(obj, arg1, arg2)
可以這樣理解柯里化和反柯里化的區(qū)別:
柯里化是在運算前提前傳參,可以傳遞多個參數(shù);
反柯里化是延遲傳參,在運算時把原來已經(jīng)固定的參數(shù)或者 this 上下文等當(dāng)作參數(shù)延遲到未來傳遞。
更高階的用法參見:JavaScript 函數(shù)式編程技巧 - 反柯里化
3. 偏函數(shù)
偏函數(shù)是創(chuàng)建一個調(diào)用另外一個部分(參數(shù)或變量已預(yù)制的函數(shù))的函數(shù),函數(shù)可以根據(jù)傳入的參數(shù)來生成一個真正執(zhí)行的函數(shù)。其本身不包括我們真正需要的邏輯代碼,只是根據(jù)傳入的參數(shù)返回其他的函數(shù),返回的函數(shù)中才有真正的處理邏輯比如:
var isType = function(type) { return function(obj) { return Object.prototype.toString.call(obj) === `[object ${type}]` } } var isString = isType('String') var isFunction = isType('Function')
這樣就用偏函數(shù)快速創(chuàng)建了一組判斷對象類型的方法~
偏函數(shù)和柯里化的區(qū)別:
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
柯里化是把一個接受 n 個參數(shù)的函數(shù),由原本的一次性傳遞所有參數(shù)并執(zhí)行變成了可以分多次接受參數(shù)再執(zhí)行,例如:add = (x, y, z) => x + y + z→curryAdd = x => y => z => x + y + z;
偏函數(shù)固定了函數(shù)的某個部分,通過傳入的參數(shù)或者方法返回一個新的函數(shù)來接受剩余的參數(shù),數(shù)量可能是一個也可能是多個;
當(dāng)一個柯里化函數(shù)只接受兩次參數(shù)時,比如 curry()(),這時的柯里化函數(shù)和偏函數(shù)概念類似,可以認(rèn)為偏函數(shù)是柯里化函數(shù)的退化版。
看完上述內(nèi)容,你們掌握J(rèn)avaScript 閉包與高階函數(shù)是怎樣的的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
本文標(biāo)題:JavaScript閉包與高階函數(shù)是怎樣的
網(wǎng)站路徑:http://muchs.cn/article28/pidicp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、網(wǎng)站策劃、網(wǎng)頁設(shè)計公司、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)