千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > JavaScript深入理解之閉包

JavaScript深入理解之閉包

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-01 15:49:00 1654069740

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

JavaScript深入理解之閉包

**定義**

閉包是指有權(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)夢想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT