網(wǎng)上關(guān)于閉包的文章有很多惕味，但是大多數(shù)都使用了太多專業(yè)術(shù)語(yǔ)，不便于理解玉锌，我在這試著用通俗一點(diǎn)的語(yǔ)言解釋一下何為閉包名挥。
什么是閉包？
什么是閉包主守？閉包是什么禀倔？
先來(lái)看一段代碼：
function a(){
var n = 0;
function inc() {
n++;
console.log(n);
}
inc();
inc();
}
a(); //控制臺(tái)輸出1，再輸出2
再看另一段代碼：
function a(){
var n = 0;
this.inc = function () {
n++;
console.log(n);
};
}
var c = new a();
c.inc(); //控制臺(tái)輸出1
c.inc(); //控制臺(tái)輸出2
閉包是什么丸逸？以上兩段代碼就是閉包蹋艺！
第二段代碼中 inc 函數(shù)訪問(wèn)了構(gòu)造函數(shù) a 里面的變量 n，所以形成了一個(gè)閉包黄刚。
有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域內(nèi)變量的函數(shù)都是閉包捎谨。
再來(lái)看一段代碼：
function a(){
var n = 0;
function inc(){
n++;
console.log(n);
}
return inc;
}
var c = a();
c(); //控制臺(tái)輸出1
c(); //控制臺(tái)輸出2
看看是怎么執(zhí)行的：
var c = a()，這一句 a()返回的是函數(shù) inc憔维，那這句等同于 var c = inc;
c()涛救，這一句等同于 inc();?注意，函數(shù)名只是一個(gè)標(biāo)識(shí)（指向函數(shù)的指針）业扒，而()才是執(zhí)行函數(shù)检吆。
后面三句翻譯過(guò)來(lái)就是： var c = inc; inc(); inc();，跟第一段代碼有區(qū)別嗎程储？ 沒(méi)有!
很多例子都喜歡用最后一段來(lái)說(shuō)明閉包蹭沛，但我覺(jué)得這將問(wèn)題復(fù)雜化了臂寝。這里面返回的是函數(shù)名，而函數(shù)名只是一個(gè)標(biāo)識(shí)（指向函數(shù)的指針）摊灭，而()才是執(zhí)行函數(shù)咆贬。
為何要這么寫(xiě)？
我們知道帚呼，js的每個(gè)函數(shù)都是一個(gè)個(gè)小黑屋掏缎，它可以獲取外界信息，但是外界卻無(wú)法直接看到里面的內(nèi)容煤杀。將變量 n 放進(jìn)小黑屋里眷蜈，除了 inc 函數(shù)之外，沒(méi)有其他辦法能接觸到變量 n沈自，而且在函數(shù) a 外定義同名的變量 n 也是互不影響的酌儒，這就是所謂的增強(qiáng)“封裝性”。
而之所以要用 return 返回函數(shù)標(biāo)識(shí) inc酥泛，是因?yàn)樵?a 函數(shù)外部無(wú)法直接調(diào)用 inc 函數(shù)今豆，所以 return inc 與外部聯(lián)系起來(lái)嫌拣，代碼 2 中的 this 也是將 inc 與外部聯(lián)系起來(lái)而已柔袁。
常見(jiàn)的陷阱：
function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
}
return result;
}
var funcs = createFunctions();
for (var j=0; j < funcs.length; j++){
console.log(funcs[j]);
}
乍一看，以為輸出 0~9 异逐，萬(wàn)萬(wàn)沒(méi)想到輸出10個(gè)10捶索？
這里的陷阱就是：函數(shù)帶()才是執(zhí)行函數(shù)！?單純的一句 var f = function() { alert('Hi'); }; 是不會(huì)彈窗的灰瞻，后面接一句 f(); 才會(huì)執(zhí)行函數(shù)內(nèi)部的代碼腥例。
這里涉及到?函數(shù)表達(dá)式?和?函數(shù)聲明的區(qū)別，后面有文章會(huì)講到酝润。
根據(jù)變量聲明的提前與函數(shù)表達(dá)式的延后性質(zhì)燎竖，上面的代碼的解釋是：
var result = new Array();
//for循環(huán)中：
var i=0; i < 10; i++;
//先聲明變量，因?yàn)楹瘮?shù)表達(dá)式不會(huì)執(zhí)行
result[0] = function(){ return i; };
result[1] = function(){ return i; };
...
result[9] = function(){ return i; };
//此時(shí)要销，i的值已經(jīng)變?yōu)?0了,因?yàn)楸灰霉够兀源酥当淮嬖诹藘?nèi)存中
funcs = result;
result = null;
console.log(i); // funcs[0]()就是執(zhí)行 return i 語(yǔ)句，就是返回10
console.log(i); // funcs[1]()就是執(zhí)行 return i 語(yǔ)句疏咐，就是返回10
...
console.log(i); // funcs[9]()就是執(zhí)行 return i 語(yǔ)句纤掸，就是返回10
為什么只垃圾回收了 result，但卻不收了 i 呢浑塞？ 因?yàn)?i 還在被 function 引用著啊借跪。好比一個(gè)餐廳，盤(pán)子總是有限的酌壕，所以服務(wù)員會(huì)去巡臺(tái)回收空盤(pán)子掏愁，但還裝著菜的盤(pán)子他怎么敢收歇由？ 當(dāng)然，你自己手動(dòng)倒掉了盤(pán)子里面的菜（=null）果港，那盤(pán)子就會(huì)被收走了印蓖，這就是所謂的內(nèi)存回收機(jī)制。
總結(jié)
閉包就是一個(gè)函數(shù)引用另外一個(gè)函數(shù)的變量京腥，因?yàn)樽兞勘灰弥圆粫?huì)被回收赦肃，因此可以用來(lái)封裝一個(gè)私有變量。這是優(yōu)點(diǎn)也是缺點(diǎn)公浪，不必要的閉包只會(huì)徒增內(nèi)存消耗他宛！另外使用閉包也要注意變量的值是否符合你的要求，因?yàn)樗拖褚粋€(gè)靜態(tài)私有變量一樣欠气。閉包通常會(huì)跟很多東西混搭起來(lái)厅各，接觸多了才能加深理解，這里只是開(kāi)個(gè)頭說(shuō)說(shuō)基礎(chǔ)性的東西预柒。
最后队塘，如果有想一起學(xué)習(xí)web前端，HTML5及JavaScript的可以來(lái)一下我的前端群733581373宜鸯，好友都會(huì)在里面交流憔古，分享一些學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，每天也會(huì)準(zhǔn)時(shí)的講一些前端的炫酷特效淋袖，及前端直播課程學(xué)習(xí)
如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注的微信號(hào)：‘web前端技術(shù)圈’或者‘webxh6’關(guān)注后回復(fù)‘2018’可以領(lǐng)取一套完整的學(xué)習(xí)視頻
