JavaScript深入理解之閉包

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

**定義**

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的最常見的方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。

我們舉一個例子：

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

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

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

**實例分析**

下面我們來看一個經(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)建了一個函數(shù)用來創(chuàng)建一個函數(shù)數(shù)組，希望數(shù)組中的每個函數(shù)都打印自己的索引值，即位置0的函數(shù)打印0，位置1的函數(shù)打印1。但實際上最終每個函數(shù)打印的都是10，這是為什么呢？下面我們從程序執(zhí)行開始分析。

**全局代碼執(zhí)行**

首先在執(zhí)行全局代碼之前， JavaScript 引擎會首先對全局代碼進行解析，創(chuàng)建全局執(zhí)行上下文 globalContext 。

1、首先會創(chuàng)建全局執(zhí)行上下文的第一個屬性全局變量對象 globalVO 。

```js
// 省略全局對象其他屬性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)建好后，進入到全局執(zhí)行代碼的執(zhí)行階段，首先將全局執(zhí)行上下文壓入執(zhí)行上下文棧中，然后按順序依次執(zhí)行代碼。

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

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

**createFunctions()** **函數(shù)執(zhí)行階段**

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

創(chuàng)建 createFunctions 函數(shù)執(zhí)行上下文的活動對象 createFunctionsAO。

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

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

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

createFunctions 函數(shù)執(zhí)行上下文創(chuàng)建后，進入函數(shù)代碼的執(zhí)行階段，將 createFunctionsContext 壓入執(zhí)行上下文棧中，按順序依次執(zhí)行代碼。

1、在執(zhí)行代碼前，根據(jù)函數(shù)調(diào)用方式，判斷得到 createFunctionsContext 的 this 指向為 globalVO。

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

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

3、然后執(zhí)行 for 循環(huán)語句代碼，執(zhí)行第一次循環(huán)，i賦值為0，然后為每一個數(shù)組項創(chuàng)建一個函數(shù)對象。

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

4、循環(huán)代碼執(zhí)行完后，此時的 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; ，進入 result[0] 函數(shù)的執(zhí)行階段。

**result[0]函數(shù)執(zhí)行階段**

在執(zhí)行 result0 函數(shù)前，Javascript 引擎會先對 result[0] 函數(shù)代碼進行解析，創(chuàng)建 result[0] 函數(shù)的執(zhí)行上下文 result0Context。

1、創(chuàng)建 result0 函數(shù)執(zhí)行上下文的活動對象 result0AO。

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

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

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

result0 函數(shù)執(zhí)行上下文創(chuàng)建后，進入函數(shù)代碼的執(zhí)行階段，將 result0Context 壓入執(zhí)行上下文棧中，按順序依次執(zhí)行代碼。

1）在執(zhí)行代碼前，根據(jù)函數(shù)調(diào)用方式，判斷得到 result0Context 的 this 指向為 globalVO。

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

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

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

3）代碼執(zhí)行完成后，繼續(xù)執(zhí)行后面 result1 函數(shù)執(zhí)行代碼。

**解決辦法**

那么我們?nèi)绻胱屵@個函數(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
```

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

**寫在最后**

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

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

更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實現(xiàn)夢想。