相信眾多JS的lovers都聽說過這句話：閉包很重要但是很難理解戏羽。
先看一個閉包的例子：
function foo() {
? ? let a = 2;
? ? function bar() {
? ? ? ? console.log( a );
? ? }
? ? return bar;
}
let baz = foo();
baz();
大家肯定都寫過類似的代碼，相信很多小伙伴也知道這段代碼應(yīng)用了閉包妄讯，我們慢慢分析：
首先必須先知道閉包是什么酷宵，才能分析出閉包為什么產(chǎn)生和閉包到底在哪？
當(dāng)一個函數(shù)能夠記住并訪問到其所在的詞法作用域及作用域鏈炕置，特別強調(diào)是在其定義的作用域外進行的訪問，此時該函數(shù)和其上層執(zhí)行上下文共同構(gòu)成閉包默垄。
需要明確的幾點：
閉包一定是函數(shù)對象（wintercn大大的閉包考證）
閉包和詞法作用域仍劈，作用域鏈寡壮，垃圾回收機制息息相關(guān)
當(dāng)函數(shù)一定是在其定義的作用域外進行的訪問時，才產(chǎn)生閉包
閉包是由該函數(shù)和其上層執(zhí)行上下文共同構(gòu)成（這點稍后我會說明）
閉包是什么这溅，我們說清楚了棒仍，下面我們看下閉包是如何產(chǎn)生的莫其。
接下來，我默認(rèn)你已經(jīng)讀過我之前的兩篇文章 原來JavaScript內(nèi)部是這樣運行的 和 徹底搞懂JavaScript作用域 , 建議先進行閱讀理解JS執(zhí)行機制和作用域等相關(guān)知識浇揩，再理解閉包憨颠，否則可能會理解的不透徹。
現(xiàn)在我假設(shè)JS引擎執(zhí)行到這行代碼
let baz = foo();
這個時候foo函數(shù)已經(jīng)執(zhí)行完养盗，JS的垃圾回收機制應(yīng)該會自動將其標(biāo)記為"離開環(huán)境",等待回收機制下次執(zhí)行适篙，將其內(nèi)存進行釋放（標(biāo)記清除）。
但是聂儒，我們仔細(xì)看圖中粉色的箭頭丹喻，我們將bar的引用指向baz碍论，正是這種引用賦值，阻止了垃圾回收機制將foo進行回收税娜，從而導(dǎo)致bar的整條作用域鏈都被保存下來。
接下來概行，baz()執(zhí)行弧岳，bar進入執(zhí)行棧，閉包（foo）形成涧卵，此時bar中依舊可以訪問到其父作用域氣泡中的變量a腹尖。
這樣說可能不是很清晰热幔，接下來我們借助chrome的調(diào)試工具看下閉包產(chǎn)生的過程。
當(dāng)JS引擎執(zhí)行到這行代碼let baz = foo();時：let baz = foo();已經(jīng)執(zhí)行完近尚，即將執(zhí)行baz();认烁，此時Call Stack中只有全局上下文。
接下來baz();執(zhí)行：
此時bar進入Call Stack中舶沛，并且Closure(foo)形成窗价。
針對上面我提到的幾點進行下說明：
上述第二點（閉包和詞法作用域撼港，作用域鏈，垃圾回收機制息息相關(guān)）大家應(yīng)該都清楚了
上述第三點往毡，當(dāng)函數(shù)baz執(zhí)行時靶溜，閉包才生成
上述第四點懒震，閉包是foo嗤详，并不是bar葱色，很多書（《you dont know JavaScript》《JavaScript高級程序設(shè)計》）中，都強調(diào)保存下來的引用办龄，即上例中的bar是閉包舞痰，而chrome認(rèn)為被保存下來的封閉空間foo是閉包响牛，針對這點我贊同chrome的判斷（僅為自己的理解赫段，如有不同意見，歡迎來討論）
閉包不是很神秘贬丛，反而是在我們的程序中隨處可見给涕，當(dāng)我們靜下心來，品味閉包的味道恭应，發(fā)現(xiàn)它散發(fā)出一種藝術(shù)的美耘眨，樸實剔难、精巧又不失優(yōu)雅。
細(xì)想非迹，在我們作用域氣泡模型中纯趋，作用域鏈讓我們的內(nèi)部bar氣泡能夠"看到"外面的世界，而閉包則讓我們的外部作用域能夠"關(guān)注到"內(nèi)部的情況成為可能唇兑。可見蔫耽，只要我們愿意，內(nèi)心世界和外面世界是可以相通的留夜。
閉包的應(yīng)用的注意事項
閉包匙铡，在JS中絕對是一個高貴的存在，它讓很多不可能實現(xiàn)的代碼成為可能碍粥，但是物雖好鳖眼，也要合理使用，不然不但不能達(dá)到我們想要的效果嚼摩，有的時候可能還會適得其反钦讳。
內(nèi)存泄漏（Memory Leak)
JavaScript分配給Web瀏覽器的可用內(nèi)存數(shù)量通常比分配給桌面應(yīng)用程序的少，這樣做主要是防止JavaScript的網(wǎng)頁耗盡全部系統(tǒng)內(nèi)存而導(dǎo)致系統(tǒng)崩潰枕面。
因此愿卒，要想使頁面具有更好的性能，就必須確保頁面占用最少的內(nèi)存資源琼开，也就是說，我們應(yīng)該保證執(zhí)行代碼只保存有用的數(shù)據(jù)枕荞，一旦數(shù)據(jù)不再有用柜候，我們就應(yīng)該讓垃圾回收機制對其進行回收，釋放內(nèi)存躏精。
我們現(xiàn)在都知道了閉包阻止了垃圾回收機制對變量進行回收渣刷，因此變量會永遠(yuǎn)存在內(nèi)存中，即使當(dāng)變量不再被使用時玉控，這樣會造成內(nèi)存泄漏飞主，會嚴(yán)重影響頁面的性能。因此當(dāng)變量對象不再適用時高诺，我們要將其釋放碌识。
我們拿上面代碼舉例：
function foo() {
? ? let a = 2;
? ? function bar() {
? ? ? ? console.log( a );
? ? }
? ? return bar;
}
let baz = foo();
baz(); //baz指向的對象會永遠(yuǎn)存在堆內(nèi)存中
baz = null; //如果baz不再使用，將其指向的對象釋放
關(guān)于內(nèi)存泄漏虱而，推薦 阮一峰老師博客筏餐。
閉包的應(yīng)用
1.模塊
一個模塊應(yīng)該具有私有屬性、私有方法和公有屬性牡拇、公有方法魁瞪。
而閉包能很好的將模塊的公有屬性穆律、方法暴露出來。
var myModule = (function (window, undefined) {
let name = "echo";
function getName() {
return name;
}
return {
name,
getName
}
})(window);
console.log( myModule.name ); // echo
console.log( myModule.getName() ); // echo
"return"關(guān)鍵字將對象引用導(dǎo)出賦值給myModule导俘，從而應(yīng)用到閉包峦耘。
2.延時器(setTimeout)、計數(shù)器(setInterval)
這里簡單寫一個常見的關(guān)于閉包的面試題旅薄。
for( var i = 0; i < 5; i++ ) {
setTimeout(() => {
console.log( i );
}, 1000 * i)
}
答案大家都知道：每秒鐘輸出一個5辅髓，一共輸出5次。
那么如何做到每秒鐘輸出一個數(shù)少梁，以此為0洛口，1，2凯沪，3第焰，4呢？
我們這里只介紹閉包的解決方法妨马，其他類似塊作用域等等的解決方法挺举，我們這里不討論。
for( var i = 0; i < 5; i++ ) {
((j) => {
setTimeout(() => {
console.log( j );
}, 1000 * j)
})(i)
}
"setTimeout"方法里應(yīng)用了閉包身笤，使其內(nèi)部能夠記住每次循環(huán)所在的詞法作用域和作用域鏈豹悬。
由于setTimeout中的回調(diào)函數(shù)會在當(dāng)前任務(wù)隊列的尾部進行執(zhí)行，因此上面第一個例子中每次循環(huán)中的setTimeout回調(diào)函數(shù)記住的i的值是for循環(huán)作用域中的值液荸，此時都是5，而第二個例子記住的i的數(shù)為setTimeout的父級作用域自執(zhí)行函數(shù)中的j的值脱篙，依次為0娇钱，1，2绊困，3文搂，4。
3.監(jiān)聽器
var oDiv = document.querySeletor("#div");
oDiv.addEventListener('click', function() {
console.log( oDiv.id );
})
