閉包一直是JavaScript中一個(gè)非常重要的概念。以前一直很難理解這個(gè)概念，主要是對(duì) JavaScript 中的執(zhí)行原理不熟悉。通過(guò)對(duì)前面執(zhí)行上下文和垃圾收集的總結(jié)，終于可以對(duì)這個(gè)概念好好進(jìn)行分析了。下面是我的一些理解和總結(jié)。
**定義**
閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的最常見(jiàn)的方式，就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。
我們舉一個(gè)例子：
```text
function outer(){ var a = 1; function inner(){ console.log(a); } inner(); // 1}outer();
```
在 inner 函數(shù)中，我們可以通過(guò)作用域鏈訪問(wèn)到 a 變量，因此這就可以算是構(gòu)成了一個(gè)閉包，因?yàn)?a 變量是其他函數(shù)作用域中的變量。
當(dāng)然這和我們平時(shí)遇到的一些閉包問(wèn)題可能不太一樣，不過(guò)這些問(wèn)題的實(shí)質(zhì)其實(shí)都是在當(dāng)前函數(shù)作用域中訪問(wèn)另一個(gè)函數(shù)作用域中的變量。
**實(shí)例分析**
下面我們來(lái)看一個(gè)經(jīng)典的閉包的例子：
```js
function createFunctions(){
var result = new Array();
for(var i=0; i < 10; i++){
result[i] = function(){
console.log(i);
}
}
return result;
}
var result = createFunctions();
result[0](); // 9
result[1](); // 9
result[2](); // 9
result[3](); // 9
result[4](); // 9
result[5](); // 9
```
我們創(chuàng)建了一個(gè)函數(shù)用來(lái)創(chuàng)建一個(gè)函數(shù)數(shù)組，希望數(shù)組中的每個(gè)函數(shù)都打印自己的索引值，即位置0的函數(shù)打印0，位置1的函數(shù)打印1。但實(shí)際上最終每個(gè)函數(shù)打印的都是10，這是為什么呢？下面我們從程序執(zhí)行開(kāi)始分析。
**全局代碼執(zhí)行**
首先在執(zhí)行全局代碼之前， JavaScript 引擎會(huì)首先對(duì)全局代碼進(jìn)行解析，創(chuàng)建全局執(zhí)行上下文 globalContext 。
1、首先會(huì)創(chuàng)建全局執(zhí)行上下文的第一個(gè)屬性全局變量對(duì)象 globalVO 。
```js
// 省略全局對(duì)象其他屬性globalContext.globalVO = { createFunctions: reference to function createFunctions,};
```
2、然后將 globalVO 壓入全局上下文作用域鏈的頂端。
```js
globalContext.[[Scope]] = [
globalContext.globalVO
];
```
3、然后將全局上下文的作用域鏈賦值給 globalVO 中所有的函數(shù)的 [[Scope]] 屬性。
```js
createFunctions.[[Scope]] = globalContext.[[Scope]];
```
全局執(zhí)行上下文創(chuàng)建好后，進(jìn)入到全局執(zhí)行代碼的執(zhí)行階段，首先將全局執(zhí)行上下文壓入執(zhí)行上下文棧中，然后按順序依次執(zhí)行代碼。
1.在執(zhí)行代碼前判斷得到全局執(zhí)行上下文中的 this 指向 globalVO;
2.執(zhí)行代碼 createFunctions();進(jìn)入createFunctions()函數(shù)執(zhí)行階段。
**createFunctions()** **函數(shù)執(zhí)行階段**
在執(zhí)行 createFunctions() 函數(shù)前，Javascript 引擎會(huì)先對(duì) createFunctions 函數(shù)代碼進(jìn)行解析，創(chuàng)建 createFunctions 函數(shù)的執(zhí)行上下文 createFunctionsContext。
創(chuàng)建 createFunctions 函數(shù)執(zhí)行上下文的活動(dòng)對(duì)象 createFunctionsAO。
```js
createFunctionsContext.createFunctionsAO = {
result: undefined,
i: undefined,
};
```
復(fù)制 createFunctions 函數(shù)的 [[Scope]] 屬性，為函數(shù)執(zhí)行上下文的作用域鏈賦值，然后將函數(shù)執(zhí)行上下文的活動(dòng)對(duì)象壓入作用域鏈頂端。
```js
createFunctionsContext.[[Scope]] = [
createFunctionsContext.createFunctionsAO,
globalContext.globalVO
];
```
createFunctions 函數(shù)執(zhí)行上下文創(chuàng)建后，進(jìn)入函數(shù)代碼的執(zhí)行階段，將 createFunctionsContext 壓入執(zhí)行上下文棧中，按順序依次執(zhí)行代碼。
1、在執(zhí)行代碼前，根據(jù)函數(shù)調(diào)用方式，判斷得到 createFunctionsContext 的 this 指向?yàn)?globalVO。
2、執(zhí)行第一行代碼 var result = new Array(); ，為 createFunctionsAO 的 result 屬性賦值。
```js
createFunctionsContext.createFunctionsAO = {
result: reference to Array result,
i: undefined,
};
```
3、然后執(zhí)行 for 循環(huán)語(yǔ)句代碼，執(zhí)行第一次循環(huán)，i賦值為0，然后為每一個(gè)數(shù)組項(xiàng)創(chuàng)建一個(gè)函數(shù)對(duì)象。
```js
createFunctionsContext.createFunctionsAO = {
result: reference to Array result,
i: 0,
};
```
4、循環(huán)代碼執(zhí)行完后，此時(shí)的 createFunctionsAO 為
```js
createFunctionsContext.createFunctionsAO = { result: reference to Array result, i: 9,};
```
5、然后執(zhí)行代碼return result;，返回函數(shù)數(shù)組。
6、createFunctions 函數(shù)的執(zhí)行上下文彈棧，控制權(quán)交回全局執(zhí)行上下文，接著執(zhí)行代碼 result0; ，進(jìn)入 result[0] 函數(shù)的執(zhí)行階段。
**result[0]函數(shù)執(zhí)行階段**
在執(zhí)行 result0 函數(shù)前，Javascript 引擎會(huì)先對(duì) result[0] 函數(shù)代碼進(jìn)行解析，創(chuàng)建 result[0] 函數(shù)的執(zhí)行上下文 result0Context。
1、創(chuàng)建 result0 函數(shù)執(zhí)行上下文的活動(dòng)對(duì)象 result0AO。
```js
result0Context.result0AO = {
};
```
2、復(fù)制 result0 函數(shù)的 [[Scope]] 屬性，為函數(shù)執(zhí)行上下文的作用域鏈賦值，然后將函數(shù)執(zhí)行上下文的活動(dòng)對(duì)象壓入作用域鏈頂端。
```js
result0Context.[[Scope]] = [
result0Context.result0AO,
createFunctionsContext.createFunctionsAO,
globalContext.globalVO
];
```
result0 函數(shù)執(zhí)行上下文創(chuàng)建后，進(jìn)入函數(shù)代碼的執(zhí)行階段，將 result0Context 壓入執(zhí)行上下文棧中，按順序依次執(zhí)行代碼。
1）在執(zhí)行代碼前，根據(jù)函數(shù)調(diào)用方式，判斷得到 result0Context 的 this 指向?yàn)?globalVO。
2）重點(diǎn)來(lái)了，執(zhí)行代碼 console.log(i); ，首先 Javascript 引擎會(huì)搜尋當(dāng)前函數(shù)變量對(duì)象，當(dāng)前函數(shù)的變量對(duì)象找不到 i 值時(shí)，會(huì)根據(jù)作用域鏈搜尋其他函數(shù)作用域中的變量。
因此我們?cè)?createFunctionsAO 中找到了 i 變量，此時(shí)的 i 變量保存的是 i 疊加后結(jié)果，因此函數(shù)打印的結(jié)果為 9。這里我們還需注意的一點(diǎn)是一般來(lái)說(shuō)。
在 createFunctions 函數(shù)執(zhí)行完后 createFunctionsAO 就應(yīng)該銷毀了，但是由于我們?cè)?result0Context 的作用域鏈中保留了對(duì)它的引用，因此在垃圾收集的時(shí)候，判斷可以通過(guò)引用找到該對(duì)象，因此它就不會(huì)被清除掉，而是繼續(xù)保留在內(nèi)存中，讓我們?cè)L問(wèn)。
3）代碼執(zhí)行完成后，繼續(xù)執(zhí)行后面 result1 函數(shù)執(zhí)行代碼。
**解決辦法**
那么我們?nèi)绻胱屵@個(gè)函數(shù)符合我們的預(yù)期的話，我們應(yīng)該怎么辦呢？我們可以做一下這樣的修改。
```js
function createFunctions(){
var result = new Array();
for(var i=0; i < 10; i++){
result[i] = (function(num){
return function(){
console.log(num);
}
})(i);
}
return result;
}
var result = createFunctions();
result[0](); // 0
result[1](); // 1
result[2](); // 2
result[3](); // 3
result[4](); // 4
result[5](); // 5
```
相信通過(guò)上面的分析，大家應(yīng)該能夠明白這樣寫原因，這里就不再分析了。
**寫在最后**
閉包這個(gè)概念其實(shí)涉及到的知識(shí)點(diǎn)很多，如果執(zhí)行上下文不熟悉，對(duì)垃圾收集機(jī)制不熟悉，理解起來(lái)其實(shí)是很模棱兩可的。通過(guò)這樣一個(gè)整體的分析，對(duì)閉包也有了一個(gè)更好的理解。
**-** **End** **-**
更多關(guān)于“html5培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)