閉包(Closure)的定義

閉包是一個讓初級JavaScript使用者既熟悉又陌生的一個概念。因為閉包在我們書寫JavaScript代碼時，隨處可見，但是我們又不知道哪里用了閉包。

關于閉包的定義，網上(書上)的解釋總是千奇百怪，我們也只能“取其精華去其糟粕”去總結一下。

1. 即使函數在當前作用域外調用，但是還能訪問當前作用域中的變量和函數
2. 有權訪問另一個函數作用域中的變量(函數)的函數。
3. 閉包是指那些能夠訪問自由變量的函數

ECMAScript中，閉包指的是：

1. 從理論角度：所有的函數都是閉包。因為它們都在創(chuàng)建的時候就將上層上下文的數據保存起來了。哪怕是簡單的全局變量也是如此，因為函數中訪問全局變量也就相當于是在訪問自由變量，這個時候使用最外層的作用域。

2. 從實踐角度：一下才算是閉包：

   • 即使創(chuàng)建它的上下文已經銷毀，它仍然存在。
   • 在代碼中引用了自由變量。

閉包跟詞法作用域，作用域鏈，執(zhí)行上下文這幾個JavaScript中重要的概念都有關系，因此要想真的理解閉包，至少要對那幾個概念不陌生。

閉包的優(yōu)點：

1. 可以是用函數內部的變量(函數)，也可以說是可以訪問函數作用域。
2. 擁有私有變量，避免污染全局變量

閉包的缺點：

1. 私有變量一直存在，占用內存。

我們來一步一步引出閉包。

自執(zhí)行函數 ( IIFE )

自執(zhí)行函數也叫立即調用函數(IIFE)，是一個在定義時就執(zhí)行的函數。

var a=1;
(function() { console.log(a)
})()

上述代碼是一個最簡單的自執(zhí)行函數。

在ES6之前，是沒有塊級作用域的，只有全局作用域和函數作用域，因此自執(zhí)行函數還能在ES6之前實現(xiàn)塊級作用域。

// ES6 塊級作用域 var a = 1; if(true) { let a=111; console.log(a); // 111 } console.log(a); // 1 

這里 if{} 中用let聲明了一個 a。這個 a 就具有塊級作用域，在這個 {} 中訪問 a ，永遠訪問的都是 let 聲明的a，跟全局作用域中的a沒有關系。如果我們把 let 換成 var ，就會污染全局變量 a 。

如果用自執(zhí)行函數來實現(xiàn)：

var a = 1;
(function() { if(true) { var a=111; console.log(a); // 111 }
})() console.log(a); // 1

為什么要在這里要引入自執(zhí)行函數的概念呢？因為通常我們會用自執(zhí)行函數來創(chuàng)建閉包，實現(xiàn)一定的效果。

來看一個基本上面試提問題：

for(var i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

在理想狀態(tài)下我們期望輸出的是 0 ，1 ，2 ，3 ，4。但是實際上輸出的是5 ，5 ，5 ，5 ，5。為什么是這樣呢？其實這里不僅僅涉及到作用域，作用域鏈還涉及到Event Loop、微任務、宏任務。但是在這里不講這些。

下面我們先解釋它為什么會輸出 5個5，然后再用自執(zhí)行函數來修改它，以達到我們預期的結果。

提示：for 循環(huán)中，每一次的都聲明一個同名變量，下一個變量的值為上一次循環(huán)執(zhí)行完同名變量的值。

首先用var聲明變量 for 是不會產生塊級作用域的，所以在 () 中聲明的 i 為全局變量。相當于：

// 偽代碼 var i; for(i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

setTimeout中的第一個參數為一個全局的匿名函數。相當于：

// 偽代碼 var i; var f = function() { console.log(i);
} for(i=0;i<5;i++) {
    setTimeout(f,1000)
}

由于setTimeout是在1秒之后執(zhí)行的，這個時候for循環(huán)已經執(zhí)行完畢，此時的全局變量 i 已經變成了 5 。1秒后5個setTimeout中的匿名函數會同時執(zhí)行，也就是5個 f 函數執(zhí)行。這個時候 f 函數使用的變量 i 根據作用域鏈的查找規(guī)則找到了全局作用域中的 i 。因此會輸出 5 個5。

那我們怎樣來修改它呢？

• 思路1：讓setTimeout匿名函數中訪問的變量 i 不再訪問全局作用域中的 i 。因此把它包裹在一個函數作用域中。這時 匿名函數訪問變量 i 時，會先去包裹它的函數作用域中查找。

for(var i=0;i<5;i++) {
    (function (){ setTimeout(function() { console.log(i);
        },1000)
    })();
}

上述例子會輸出我們期望的值嗎？答案是否。為什么呢？我們雖然把 setTimeout 包裹在一個匿名函數中了，但是當setTimeout中匿名函數執(zhí)行時，首先去匿名函數中查找 i 的值，找不到還是會找到全局作用域中，最終 i 的值仍然是全局變量中的 i ，仍然為 5個5.

那我們把外層的匿名函數中聲明一個變量 j 讓setTimeout中的匿名函數訪問這個 j 不就找不到全局變量中的變量了嗎。

for(var i=0;i<5;i++) {
    (function (){ var j = i;
        setTimeout(function() { console.log(j);
        },1000)
    })();
}

這個時候才達到了我們預期的結果：0 1 2 3 4。

我們來優(yōu)化一下：

for(var i=0;i<5;i++) {
    (function (i){ setTimeout(function() { console.log(i);
        },1000)
    })(i);
}

*思路2：用 let 聲明變量，產生塊級作用域。

for(let i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

這時for循環(huán)5次，產生 5 個塊級作用域，也會聲明 5 個具有塊級作用域的變量 i ，因此setTimeout中的匿名函數每次執(zhí)行時，訪問的 i 都是當前塊級作用域中的變量 i 。

理論中的閉包

什么是理論中的閉包？就是看似像閉包，其實并不是閉包。它只是類似于閉包。

 function foo() { var a=2; function bar() { console.log(a); // 2 }
    bar();
}
foo();

上述代碼根據最上面我們對閉包的定義，它并不完全是閉包，雖然是一個函數可以訪問另一個函數中的變量，但是被嵌套的函數是在當前詞法作用域中被調用的。

實踐中的閉包

我們怎樣把上述代碼foo 函數中的bar函數，在它所在的詞法作用域外執(zhí)行呢？

下面的代碼就清晰的展示了閉包：

function foo() { var a=2; function bar() { console.log(a);
    } return bar;
} var baz=foo();
baz(); // 2 —— 朋友，這就是閉包的效果。

上述代碼中 bar 被當做 foo函數返回值。foo函數執(zhí)行后把返回值也就是 bar函數 賦值給了全局變量 baz。當 baz 執(zhí)行時，實際上也就是 bar 函數的執(zhí)行。我們知道 foo 函數在執(zhí)行后，foo 的內部作用域會被銷毀，因為引擎有垃圾回收期來釋放不再使用的內存空間。所以在bar函數執(zhí)行時，實際上foo函數內部的作用域已經不存在了，理應來說 bar函數 內部再訪問 a 變量時是找不到的。但是閉包的神奇之處就在這里。由于 bar 是在 foo 作用域中被聲明的，所以 bar函數 會一直保存著對 foo 作用域的引用。這時就形成了閉包。

我們先看個例子：

var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope;
    } return f;
} var foo = checkscope();
foo();

我們用偽代碼來解釋JavaScript引擎在執(zhí)行上述代碼時的步驟：

1. 當JavaScript引擎遇到可執(zhí)行代碼時，就會進入一個執(zhí)行上下文(環(huán)境)
2. 首先遇到的是全局代碼，因此進入全局執(zhí)行上下文，把全局執(zhí)行上下文壓入執(zhí)行上下文棧。
3. 全局上下文創(chuàng)建時會先在內部創(chuàng)建VO/AO，作用域鏈，this。然后執(zhí)行代碼。
4. 當遇到 checkscope 函數執(zhí)行時，進入checkscope的執(zhí)行上下文，然后壓入執(zhí)行上下文棧。
5. checkscope 執(zhí)行上下文創(chuàng)建時會先在內部創(chuàng)建VO/AO，作用域鏈，this。然后執(zhí)行代碼。
6. 當checkscope 函數執(zhí)行完畢時，會從執(zhí)行上下文棧中彈出，此時它的AO也會被瀏覽器回收。(這是理想狀態(tài)下)
7. 執(zhí)行foo函數，向上查找foo的值，發(fā)現(xiàn)foo的值為checkscope函數內部函數f。因此這一步為執(zhí)行 checkscope 內部函數f。
8. 執(zhí)行f函數同執(zhí)行 checkscope 的步驟一致。
9. f 函數執(zhí)行完畢，從執(zhí)行上下文棧中彈出。

但是我們想一個問題，checkscope函數執(zhí)行完畢，它的執(zhí)行上下文從棧中彈出，也就是銷毀了不存在了，f 函數還能訪問包裹函數的作用域中的變量(scope)嗎？答案是可以。

理由是在第6步，我們說過當checkscope 執(zhí)行函數執(zhí)行完畢時，它的執(zhí)行上下文會從棧中彈出，此時活動對象也會被回收，按理說當 f 在訪問checkscope的活動對象時是訪問不到的。

其實這里還有個概念，叫做作用域鏈：當 checkscope 函數被創(chuàng)建時，會創(chuàng)建對應的作用域鏈，里面值存放著包裹它的作用域對應執(zhí)行上下文的變量對象，在這里只是全局執(zhí)行上下文的變量對象，當checkscope執(zhí)行時，此時的作用域鏈變化了 ，里面存放的是變量對象(活動對象)的集合，最頂端是當前函數的執(zhí)行上下文的活動對象。端是全局執(zhí)行上下文的變量對象。類似于：

checkscope.scopeChain = [
    checkscope.AO
    global.VO
] 

當checkscope執(zhí)行碰到了 f 函數的創(chuàng)建，因此 f 函數也會創(chuàng)建對應的作用域鏈，默認以包裹它的函數執(zhí)行時對應的作用域鏈為基礎。因此此時 f 函數創(chuàng)建時的作用域鏈如下：

checkscope.scopeChain = [
    checkscope.AO
    global.VO
]

當 f 函數執(zhí)行時，此時的作用域鏈變化如下：

checkscope.scopeChain = [
    f.AO
    checkscope.AO
    global.VO
]

當checkscope函數執(zhí)行完畢，內部作用域會被回收，但是 f函數 的作用域鏈還是存在的，里面存放著 checkscope函數的活動對象，因此在f函數執(zhí)行時會從作用域鏈中查找內部使用的 scope 標識符，從而在作用域鏈的第二位找到了，也就是在 checkscope.AO 找到了變量scope的值。

正是因為JavaScript做到了這一點，因此才會有閉包的概念。還有人說閉包并不是為了擁有它采取設計它的，而是設計作用域鏈時的副作用產物。

閉包是JavaScript中最難的點，也是平常面試中常問的問題，我們必須要真正的去理解它，如果只靠死記硬背是經不起考驗的。