閉包一直是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)夢想。