做為一個(gè)前端程序員生音，js中有一個(gè)重要的概念：閉包。閉包對(duì)于大部分的初學(xué)者來(lái)說(shuō)理解起來(lái)十分的困難和晦澀窒升，它成了新手成長(zhǎng)的一個(gè)瓶頸缀遍，所以如何理解閉包尤為關(guān)鍵，還有理解了閉包如何去應(yīng)用又十分的重要饱须，今天呢就讓我們好好的分析閉包瑟由。
概念
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。例如在javascript中冤寿，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量歹苦，所以閉包可以理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)“。在本質(zhì)上督怜，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的橋梁殴瘦。
顯然大部分人都能不喜歡這種官方的解釋?zhuān)琽k,那直接上代碼
function a () {
var b = 1;
return function () {
b++;
console.log(b);
}
}
var c = a();
c();//b=2
c();//b=3
console(b)//undined
這是一個(gè)十分簡(jiǎn)答的關(guān)于閉包的例子，在函數(shù)a中返回了一個(gè)函數(shù)賦值個(gè)變量c執(zhí)行c發(fā)現(xiàn)b累加了号杠，再次執(zhí)行發(fā)現(xiàn)b在原來(lái)的基礎(chǔ)上又加了1蚪腋，且外部訪問(wèn)不到b變量丰歌，這個(gè)例子就非常直觀的說(shuō)明了閉包的特點(diǎn)：
- 返回函數(shù)內(nèi)部函數(shù)
- 形成閉包內(nèi)的變量保存在內(nèi)存中不被銷(xiāo)毀
- 形成閉包的需要外部變量對(duì)函數(shù)內(nèi)部函數(shù)的引用
到這里相信大部分人還是能夠理解閉包，感覺(jué)也并不復(fù)雜屉凯，那為什么會(huì)困擾許多新手盆友呢立帖？
原因之一就在于閉包復(fù)雜的高級(jí)應(yīng)用：
- 柯里化
柯里化是指這樣一個(gè)函數(shù)，他接收函數(shù)A作為參數(shù)悠砚，運(yùn)行后返回一個(gè)新的函數(shù)晓勇，并且這個(gè)函數(shù)能夠處理函數(shù)A的剩余參數(shù)，上代碼
function createCurry (func, args) {
var arity = fucn.length;
var args = args || [];
return function () {
var _args = [].slice.call(arguments);//將參數(shù)轉(zhuǎn)化為數(shù)組
[].push.apply(_args, args);
if(_args.length < arity) {
return createCurry.call(this, func, _args);
}
return func.apply(this, _args);
}
}
這里運(yùn)用了閉包和遞歸實(shí)現(xiàn)了一個(gè)柯里化函數(shù)灌旧，這個(gè)函數(shù)傳入一個(gè)函數(shù)绑咱，傳入的函數(shù)就被柯里化了，這個(gè)被柯里化的函數(shù)A能夠?qū)崿F(xiàn)一個(gè)參數(shù)收集的過(guò)程枢泰，并在參數(shù)收集完成之后執(zhí)行該函數(shù)描融，若參數(shù)未收集完畢則返回一個(gè)函數(shù)。
柯里化函數(shù)在許多地方都有應(yīng)用衡蚂，他增加了函數(shù)的復(fù)雜度但是也加大了函數(shù)的自由度窿克，在傳參自由度方面有許多獨(dú)特的設(shè)計(jì)。
- 模塊化
現(xiàn)如今js模塊化有許多標(biāo)準(zhǔn)毛甲，node端的commonjs 让歼，瀏覽器端的requirejs，最初的模塊化就是用閉包來(lái)實(shí)現(xiàn)丽啡，jQuery就是通過(guò)閉包給window對(duì)象暴露一個(gè)$對(duì)象谋右。 - 函數(shù)作為參數(shù)
當(dāng)一個(gè)函數(shù)作為另一個(gè)函數(shù)的參數(shù)時(shí)可以保存當(dāng)前你存入的參數(shù)例如
class _lazyMan {
constructor(name) {
let _this = this
this.tasks = [];
let fn = (function(n) {
let name = n;
return function() {
console.log('HI! This is ' + name + '!');
_this.next();
}
})(name)
this.tasks.push(fn);
setTimeout(function() {
_this.next()
}, 0);
}
next() {
let fn = this.tasks.shift();
fn && fn();
}
eat(name) {
let _this = this
let fn = (function(name) {
return function() {
console.log('Eat ' + name + '~~');
_this.next();
}
})(name);
this.tasks.push(fn);
return this;
}
sleep(time) {
let _this = this;
let fn = (function(time) {
return function() {
setTimeout(function() {
console.log('Wake up after ' + time + 's!');
_this.next();
}, time * 1000);
}
})(time);
this.tasks.push(fn);
return this;
}
sleepFirst(time) {
let _this = this;
let fn = (function (time) {
return function () {
setTimeout(function () {
console.log('Wake up after ' + time + 's!');
_this.next();
}, time * 1000);
}
})(time);
this.tasks.unshift(fn);
return this;
}
}
為了實(shí)現(xiàn)這個(gè)lazyMan類(lèi)，使用閉包保存當(dāng)前參數(shù)并推入任務(wù)數(shù)組补箍，這樣就實(shí)現(xiàn)了一個(gè)任務(wù)列表的管理改执，這種任務(wù)列表的操作很多都用到了閉包緩存參數(shù)，最典型的例子就是觀察者模式坑雅，在設(shè)計(jì)這種模式的時(shí)候回調(diào)函數(shù)的時(shí)候就運(yùn)用到閉包辈挂。
- 節(jié)流和防抖
function debounce (func, delay) {
let timer
return function (...arg) {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, arg)
}, delay)
}
}
防抖和節(jié)流都是利用閉包緩存上一次調(diào)用函數(shù)的信息，然后根據(jù)這些信息作出判斷給出相應(yīng)的處理裹粤。
總結(jié)
閉包有許多高級(jí)應(yīng)用缔赠，理解好閉包的作用對(duì)于理解一些常用框架的設(shè)計(jì)等十分有益
