閉包一直是JavaScript中一個非常重要的概念。以前一直很難理解這個概念，主要是對 JavaScript 中的執行原理不熟悉。通過對前面執行上下文和垃圾收集的總結，終于可以對這個概念好好進行分析了。下面是我的一些理解和總結。

**定義**

閉包是指有權訪問另一個函數作用域中的變量的函數。創建閉包的最常見的方式，就是在一個函數內部創建另一個函數。

我們舉一個例子：

```text
function outer(){    var a = 1;    function inner(){        console.log(a);    }    inner(); // 1}outer();
```

在 inner 函數中，我們可以通過作用域鏈訪問到 a 變量，因此這就可以算是構成了一個閉包，因為 a 變量是其他函數作用域中的變量。

當然這和我們平時遇到的一些閉包問題可能不太一樣，不過這些問題的實質其實都是在當前函數作用域中訪問另一個函數作用域中的變量。

**實例分析**

下面我們來看一個經典的閉包的例子：

```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
```

我們創建了一個函數用來創建一個函數數組，希望數組中的每個函數都打印自己的索引值，即位置0的函數打印0，位置1的函數打印1。但實際上最終每個函數打印的都是10，這是為什么呢？下面我們從程序執行開始分析。

**全局代碼執行**

首先在執行全局代碼之前， JavaScript 引擎會首先對全局代碼進行解析，創建全局執行上下文 globalContext 。

1、首先會創建全局執行上下文的第一個屬性全局變量對象 globalVO 。

```js
// 省略全局對象其他屬性globalContext.globalVO = {    createFunctions: reference to function createFunctions,};
```

2、然后將 globalVO 壓入全局上下文作用域鏈的頂端。

```js
globalContext.[[Scope]] = [
    globalContext.globalVO
];
```

3、然后將全局上下文的作用域鏈賦值給 globalVO 中所有的函數的 [[Scope]] 屬性。

```js
createFunctions.[[Scope]] = globalContext.[[Scope]];
```

全局執行上下文創建好后，進入到全局執行代碼的執行階段，首先將全局執行上下文壓入執行上下文棧中，然后按順序依次執行代碼。

1.在執行代碼前判斷得到全局執行上下文中的 this 指向 globalVO;

2.執行代碼 createFunctions();進入createFunctions()函數執行階段。

**createFunctions()** **函數執行階段**

在執行 createFunctions() 函數前，Javascript 引擎會先對 createFunctions 函數代碼進行解析，創建 createFunctions 函數的執行上下文 createFunctionsContext。

創建 createFunctions 函數執行上下文的活動對象 createFunctionsAO。

```js
createFunctionsContext.createFunctionsAO = {
    result: undefined,
    i: undefined,
};
```

復制 createFunctions 函數的 [[Scope]] 屬性，為函數執行上下文的作用域鏈賦值，然后將函數執行上下文的活動對象壓入作用域鏈頂端。

```js
createFunctionsContext.[[Scope]] = [
    createFunctionsContext.createFunctionsAO,
    globalContext.globalVO
];
```

createFunctions 函數執行上下文創建后，進入函數代碼的執行階段，將 createFunctionsContext 壓入執行上下文棧中，按順序依次執行代碼。

1、在執行代碼前，根據函數調用方式，判斷得到 createFunctionsContext 的 this 指向為 globalVO。

2、執行第一行代碼 var result = new Array(); ，為 createFunctionsAO 的 result 屬性賦值。

```js
createFunctionsContext.createFunctionsAO = {
    result: reference to Array result,
    i: undefined,
};
```

3、然后執行 for 循環語句代碼，執行第一次循環，i賦值為0，然后為每一個數組項創建一個函數對象。

```js
createFunctionsContext.createFunctionsAO = {
    result: reference to Array result,
    i: 0,
};
```

4、循環代碼執行完后，此時的 createFunctionsAO 為

```js
createFunctionsContext.createFunctionsAO = {    result: reference to Array result,    i: 9,};
```

5、然后執行代碼return result;，返回函數數組。

6、createFunctions 函數的執行上下文彈棧，控制權交回全局執行上下文，接著執行代碼 result0; ，進入 result[0] 函數的執行階段。

**result[0]函數執行階段**

在執行 result0 函數前，Javascript 引擎會先對 result[0] 函數代碼進行解析，創建 result[0] 函數的執行上下文 result0Context。

1、創建 result0 函數執行上下文的活動對象 result0AO。

```js
result0Context.result0AO = {
};
```

2、復制 result0 函數的 [[Scope]] 屬性，為函數執行上下文的作用域鏈賦值，然后將函數執行上下文的活動對象壓入作用域鏈頂端。

```js
result0Context.[[Scope]] = [
    result0Context.result0AO,
    createFunctionsContext.createFunctionsAO,
    globalContext.globalVO
];
```

result0 函數執行上下文創建后，進入函數代碼的執行階段，將 result0Context 壓入執行上下文棧中，按順序依次執行代碼。

1）在執行代碼前，根據函數調用方式，判斷得到 result0Context 的 this 指向為 globalVO。

2）重點來了，執行代碼 console.log(i); ，首先 Javascript 引擎會搜尋當前函數變量對象，當前函數的變量對象找不到 i 值時，會根據作用域鏈搜尋其他函數作用域中的變量。

因此我們在 createFunctionsAO 中找到了 i 變量，此時的 i 變量保存的是 i 疊加后結果，因此函數打印的結果為 9。這里我們還需注意的一點是一般來說。

在 createFunctions 函數執行完后 createFunctionsAO 就應該銷毀了，但是由于我們在 result0Context 的作用域鏈中保留了對它的引用，因此在垃圾收集的時候，判斷可以通過引用找到該對象，因此它就不會被清除掉，而是繼續保留在內存中，讓我們訪問。

3）代碼執行完成后，繼續執行后面 result1 函數執行代碼。

**解決辦法**

那么我們如果想讓這個函數符合我們的預期的話，我們應該怎么辦呢？我們可以做一下這樣的修改。

```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
```

相信通過上面的分析，大家應該能夠明白這樣寫原因，這里就不再分析了。

**寫在最后**

閉包這個概念其實涉及到的知識點很多，如果執行上下文不熟悉，對垃圾收集機制不熟悉，理解起來其實是很模棱兩可的。通過這樣一個整體的分析，對閉包也有了一個更好的理解。

**-** **End** **-**

更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。