IT工程師數位筆記本

前面的話

　　本文從執行環境的角度來分析閉包，先用一張圖開宗明義，然后根據圖示內容對代碼進行逐行說明，試圖對閉包進行更直觀的解釋

圖示

說明

　　下面按照代碼執行流的順序對該圖示進行詳細說明

function foo(){
    var a = 2;

    function bar(){
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz();

　　【1】代碼執行流進入全局執行環境，并對全局執行環境中的代碼進行聲明提升(hoisting)

　　【2】執行流執行第9行代碼var baz = foo();，調用foo()函數，此時執行流進入foo()函數執行環境中，對該執行環境中的代碼進行聲明提升過程。此時執行環境棧中存在兩個執行環境，foo()函數為當前執行流所在執行環境

　　【3】執行流執行第2行代碼var a = 2;，對a進行LHS查詢，給a賦值2

　　【4】執行流執行第7行代碼return bar;，將bar()函數作為返回值返回。按理說，這時foo()函數已經執行完畢，應該銷毀其執行環境，等待垃圾回收。但因為其返回值是bar函數。bar函數中存在自由變量a，需要通過作用域鏈到foo()函數的執行環境中找到變量a的值，所以雖然foo函數的執行環境被銷毀了，但其變量對象不能被銷毀，只是從活動狀態變成非活動狀態；而全局執行環境的變量對象則變成活動狀態；執行流繼續執行第9行代碼var baz = foo();，把foo()函數的返回值bar函數賦值給baz

　　【5】執行流執行第10行代碼baz();，通過在全局執行環境中查找baz的值，baz保存著foo()函數的返回值bar。所以這時執行baz()，會調用bar()函數，此時執行流進入bar()函數執行環境中，對該執行環境中的代碼進行聲明提升過程。此時執行環境棧中存在三個執行環境，bar()函數為當前執行流所在執行環境

　　在聲明提升的過程中，由于a是個自由變量，需要通過bar()函數的作用域鏈bar() -> foo() -> 全局作用域進行查找，最終在foo()函數中也就是代碼第2行找到var a = 2;，然后在foo()函數的執行環境中找到a的值是2，所以給a賦值2

　　【6】執行流執行第5行代碼console.log(a);，調用內部對象console，并從console對象中log方法，將a作為參數傳遞進入。從bar()函數的執行環境中找到a的值是2，所以，最終在控制臺顯示2

　　【7】執行流執行第6行代碼}，bar()的執行環境被彈出執行環境棧，并被銷毀，等待垃圾回收，控制權交還給全局執行環境

　　【8】當頁面關閉時，所有的執行環境都被銷毀

總結

　　從上述說明的第5步可以看出，由于閉包bar()函數的原因，雖然foo()函數的執行環境銷毀了，但其變量對象一直存在于內存中，就是為了能夠使得調用bar()函數時，可以通過作用域鏈訪問到父函數foo()，并得到其變量對象中儲存的變量值。直到頁面關閉，foo()函數的變量對象才會和全局的變量對象一起被銷毀，從而釋放內存空間

　　由于閉包占用內存空間，所以要謹慎使用閉包。盡量在使用完閉包后，及時解除引用，以便更早釋放內存

//通過將baz置為null，解除引用
function foo(){
    var a = 2;
    function bar(){
        console.log(a);//2
    }
    return bar;
}
var baz = foo();
baz();        
baz = null;
/*后續代碼*/