一、引子
閉包（closure）是 Javascript 語言的一個難點，面試時常被問及，也是它的特色，很多高階應用都要依靠閉包實現。本文儘可能用簡單易懂的話，講清楚閉包的概念、形成條件及其常見的面試題。
我們先來看一個例子：
var n = 999;
function f1() {
console.log(n);
}
f1() // 999上面程式碼中，函式f1可以讀取全域性變數n。但是，函式外部無法讀取函式內部宣告的變數。
function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined上面程式碼中，函式f1內部宣告的變數n，函式外是無法讀取的。
如果有時需要得到函式內的區域性變數。正常情況下，這是辦不到的，只有通過變通方法才能實現。那就是在函式的內部，再定義一個函式。
function f1() {
var n = 999;
function f2() {
console.log(n); // 999
}
}上面程式碼中，函式f2就在函式f1內部，這時f1內部的所有區域性變數，對f2都是可見的。既然f2可以讀取f1的區域性變數，那麼只要把f2作為返回值，我們不就可以在f1外部讀取它的內部變數了嗎！
二、閉包是什麼
我們可以對上面程式碼進行如下修改：
function f1(){
var a = 999;
function f2(){
console.log(a);
}
return f2; // f1返回了f2的引用
}
var result = f1(); // result就是f2函式了
result(); // 執行result，全域性作用域下沒有a的定義，
//但是函式閉包，能夠把定義函式的時候的作用域一起記住，輸出999 上面程式碼中，函式f1的返回值就是函式f2，由於f2可以讀取f1的內部變數，所以就可以在外部獲得f1的內部變數了。
閉包就是函式f2，即能夠讀取其他函式內部變數的函式。由於在JavaScript語言中，只有函式內部的子函式才能讀取內部變數，因此可以把閉包簡單理解成“定義在一個函式內部的函式”。閉包最大的特點，就是它可以“記住”誕生的環境，比如f2記住了它誕生的環境f1，所以從f2可以得到f1的內部變數。在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。
那到底什麼是閉包呢？
當函式可以記住並訪問所在的詞法作用域，即使函式是在當前詞法作用域之外執行，這就產生了閉包。 —-《你不知道的Javascript上卷》
我個人理解，閉包就是函式中的函式(其他語言不能函式再套函式),裡面的函式可以訪問外面函式的變數，外面的變數的是這個內部函式的一部分。
閉包形成的條件
- 函式巢狀
- 內部函式引用外部函式的區域性變數
三、閉包的特性
每個函式都是閉包，每個函式天生都能夠記憶自己定義時所處的作用域環境。把一個函式從它定義的那個作用域，挪走，執行。這個函式居然能夠記憶住定義時的那個作用域。不管函式走到哪裡，定義時的作用域就帶到了哪裡。接下來我們用兩個例子來說明這個問題：
//例題1
var inner;
function outer(){
var a=250;
inner=function(){
alert(a);//這個函式雖然在外面執行，但能夠記憶住定義時的那個作用域，a是250
}
}
outer();
var a=300;
inner();//一個函式在執行的時候，找閉包裡面的變數，不會理會當前作用域。//例題2
function outer(x){
function inner(y){
console.log(x+y);
}
return inner;
}
var inn=outer(3);//數字3傳入outer函式後，inner函式中x便會記住這個值
inn(5);//當inner函式再傳入5的時候，只會對y賦值，所以最後彈出8四、閉包的記憶體洩漏
棧記憶體提供一個執行環境，即作用域，包括全域性作用域和私有作用域,那他們什麼時候釋放記憶體的？
- 全域性作用域—-只有當頁面關閉的時候全域性作用域才會銷燬
- 私有的作用域—-只有函式執行才會產生
一般情況下，函式執行會形成一個新的私有的作用域，當私有作用域中的程式碼執行完成後，我們當前作用域都會主動的進行釋放和銷燬。但當遇到函式執行返回了一個引用資料型別的值，並且在函式的外面被一個其他的東西給接收了，這種情況下一般形成的私有作用域都不會銷燬。
如下面這種情況：
function fn(){
var num=100;
return function(){
}
}
var f=fn();//fn執行形成的這個私有的作用域就不能再銷燬了也就是像上面這段程式碼，fn函式內部的私有作用域會被一直佔用的，發生了記憶體洩漏。所謂記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。閉包不能濫用，否則會導致記憶體洩露，影響網頁的效能。閉包使用完了後，要立即釋放資源，將引用變數指向null。
接下來我們看下有關於記憶體洩漏的一道經典面試題：
function outer(){
var num=0;//內部變數
return function add(){//通過return返回add函式，就可以在outer函式外訪問了
num++;//內部函式有引用，作為add函式的一部分了
console.log(num);
};
}
var func1=outer();
func1();//實際上是呼叫add函式， 輸出1
func1();//輸出2 因為outer函式內部的私有作用域會一直被佔用
var func2=outer();
func2();// 輸出1 每次重新引用函式的時候，閉包是全新的。
func2();// 輸出2 五、閉包的作用
1.可以讀取函式內部的變數。
2.可以使變數的值長期儲存在記憶體中，生命週期比較長。因此不能濫用閉包，否則會造成網頁的效能問題
3.可以用來實現JS模組。
JS模組:具有特定功能的js檔案,將所有的資料和功能都封裝在一個函式內部(私有的),只向外暴露一個包信n個方法的物件或函式,模組的使用者,只需要通過模組暴露的物件呼叫方法來實現對應的功能。
具體請看下面的例子:
//index.html檔案
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
myModule2.doSomething()
myModule2.doOtherthing()
</script>//myModule.js檔案
(function () {
var msg = `Beijing`//私有資料
//運算元據的函式
function doSomething() {
console.log(`doSomething() `+msg.toUpperCase())
}
function doOtherthing () {
console.log(`doOtherthing() `+msg.toLowerCase())
}
//向外暴露物件(給外部使用的兩個方法)
window.myModule2 = {
doSomething: doSomething,
doOtherthing: doOtherthing
}
})()六、閉包的運用
我們要實現這樣的一個需求: 點選某個按鈕, 提示”點選的是第n個按鈕”,此處我們先不用事件代理:
.....
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<script type="text/javascript">
var btns = document.getElementsByTagName(`button`)
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log(`第` + (i + 1) + `個`)
}
}
</script> 萬萬沒想到，點選任意一個按鈕，後臺都是彈出“第四個”,這是因為i是全域性變數,執行到點選事件時，此時i的值為3。那該如何修改，最簡單的是用let宣告i
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log(`第` + (i + 1) + `個`)
}
}另外我們可以通過閉包的方式來修改:
for (var i = 0; i < btns.length; i++) {
(function (j) {
btns[j].onclick = function (i) {
console.log(`第` + (i + 1) + `個`)
}
})(i)
}如果覺得文章對你有些許幫助，歡迎在我的GitHub部落格點贊和關注，感激不盡！
ps:文章於2018.11.16重新修改,希望對你們有所收穫！