一個(gè)簡(jiǎn)單的閉包
例1
function sayHello(name) {
var text = 'Hello ' + name;
var say = function() { console.log(text); }
//say()是個(gè)內(nèi)部函數(shù)，
//a closures use variable declared in the parent function
say();
}
sayHello('Joe');
理解閉包
閉包是指在 JavaScript 中，內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量，即使在其外部函數(shù)被返回（壽命終結(jié)）了之后焊傅。
閉包是一個(gè)集合（combination）；它由兩部分組成：函數(shù)邑时，以及創(chuàng)建該函數(shù)的環(huán)境。環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成特姐【穑可以賦值給某個(gè)變量，可以作為參數(shù)傳遞給函數(shù)，也可以作為一個(gè)函數(shù)返回值返回浅浮。
在我們的例子中say就是個(gè)閉包沫浆，因?yàn)樗袆?chuàng)建函數(shù)的環(huán)境，而環(huán)境中有著被定義的變量 text滚秩，所以它能使用該變量专执。
閉包的用途
可以訪問函數(shù)內(nèi)部的量，閉包允許將函數(shù)與其所操作的某些數(shù)據(jù)（環(huán)境）關(guān)連起來(lái)郁油。這顯然類似于面向?qū)ο缶幊瘫竟伞Ｔ诿鎸?duì)象編程中，對(duì)象允許我們將某些數(shù)據(jù)（對(duì)象的屬性）與一個(gè)或者多個(gè)方法相關(guān)聯(lián)桐腌。
因而痊末，一般說(shuō)來(lái)，可以使用只有一個(gè)方法的對(duì)象的地方哩掺，都可以使用閉包
例2
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5); //閉包
var add10 = makeAdder(10); //閉包
console.log(add5(2)); // 7
console.log(add10(2)); // 12
例3
var invrement,decrement,value;
var makeCounter = function() {
var privateCounter = 0;
increment = function (){
privateCounter += 1;
};
decrement = function (){
privateCounter -= 1;
};
setCounter = function (x) {
privateCounter = x;
};
value = function () {
return privateCounter;
};
};
makeCounter();
increment();
console.log(value()); //1
setCounter(5);
console.log(value()); //5
var oldCounter = value;
makeCounter();
decrement();
console.log(value()); //-1
console.log(oldCounter()); //5
從例3我們可以看到，setupSomeGlobals每次執(zhí)行涩笤，都會(huì)重新創(chuàng)建一個(gè)閉包嚼吞。而且兩個(gè)閉包互不影響。即它們具有獨(dú)立性蹬碧。
我們將例3稍稍改變一下舱禽，就可以看到如何用閉包模仿私有方法
例4
var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
setCouter: function(x) {
privateCounter = x;
},
value: function() {
return privateCounter;
}
}
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */
在例4中，changeBy就是一個(gè)私有方法恩沽，無(wú)法從外部直接調(diào)用誊稚。
另一特點(diǎn)就是 保存變量。這是通俗的說(shuō)法罗心。
從根本上說(shuō)里伯，閉包是函數(shù)開始執(zhí)行的時(shí)候被分配的一個(gè)棧幀，在函數(shù)執(zhí)行結(jié)束返回后仍不會(huì)被釋放(就好像一個(gè)棧幀被分配在堆里而不是棧里渤闷！)
例5
function say667() {
var num = 42;
num+=1;
var say3 = function() {
console.log(num+=1);
};
say3();
var say4 = function() {
console.log(num+=1);
};
return say4;
}
say667(); //44
say667(); //44疾瓮，并未自增，是因?yàn)檫@又重新創(chuàng)建了一個(gè)閉包飒箭。
var sayt = say667(); //44
sayt(); //45
sayt(); //46狼电， 自增了，是因?yàn)閟ay667并未重新創(chuàng)建閉包弦蹂。
//sayt引用了里面的閉包肩碟，而且造成了num的值被保存了。在函數(shù)執(zhí)行完后并未被銷毀凸椿。
注意：正是因?yàn)殚]包有這些特點(diǎn)削祈，它給我們帶來(lái)了便利。但我們?nèi)孕枰?br> 小心使用削饵。它有兩個(gè)缺點(diǎn)：
- 1岩瘦、由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中未巫，內(nèi)存消耗很大，所以不能濫用閉包启昧，否則會(huì)造成網(wǎng)頁(yè)的性能問題叙凡，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是密末，在退出函數(shù)之前握爷，將不使用的局部變量全部刪除；
- 2严里、閉包會(huì)在父函數(shù)外部新啼，改變父函數(shù)內(nèi)部變量的值。所以刹碾，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用燥撞，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value）迷帜，這時(shí)一定要小心物舒，不要隨便改變父函數(shù)內(nèi)部變量的值。
閉包的循環(huán)陷阱及補(bǔ)救方法
例6
var arr = [];
for(var i=0;i<3;i++) {
arr.push(function(){console.log(i);});
}
arr[0](); //?
arr[1](); //?
arr[2](); //?
例6輸出的結(jié)果：三個(gè) "3" 戏锹，詳情解析可以看這個(gè)知乎問答冠胯，里面有人解釋的很清楚。簡(jiǎn)要來(lái)說(shuō)就是锦针，由于執(zhí)行順序的關(guān)系荠察，在三個(gè)閉包執(zhí)行前，for循環(huán)早已循環(huán)完畢（for循環(huán)沒有塊級(jí)作用域）奈搜，i 已經(jīng)自增到3悉盆。到閉包執(zhí)行時(shí)，取到的i自然是3馋吗。
解決方案：
//方案一
for(var i=0,arr=[];i<3;i++) {
arr.push(
//既然是執(zhí)行順序的問題舀瓢，那我們給閉包加上一個(gè)自執(zhí)行函數(shù)
//內(nèi)部函數(shù)引用自執(zhí)行函數(shù)傳入的 i ，這里的 i
是正常的
(function(i){
return function(){
console.log(i);
}
})(i)
);
}
arr[0](); //0
arr[1](); //1
arr[2](); //2
//方案2
for(let i=0,arr=[];i<3;i++)
//把 i 的定義換成 let 就行耗美，因?yàn)?let 定義的變量具有塊級(jí)作用域京髓，同樣解決了這個(gè)問題
總結(jié)：
- 閉包是指在 JavaScript 中，內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的參數(shù)和變量商架，即使在其外部函數(shù)被返回（壽命終結(jié)）了之后堰怨。
- 每當(dāng)你在另一個(gè)函數(shù)里使用了關(guān)鍵字function，一個(gè)閉包就被創(chuàng)建了
- JavaScript中的閉包蛇摸，就像一個(gè)副本备图，將某函數(shù)在退出時(shí)候的所有局部變量復(fù)制保存其中。
- 使用閉包前，需要性能考量
參考文章：
