前端基礎進階（四）：詳細圖解作用域鏈與閉包

初學JavaScript的時候，我在學習閉包上，走了很多彎路。而這次重新回過頭來對基礎知識進行梳理，要講清楚閉包，也是一個非常大的挑戰。

閉包有多重要？如果你是初入前端的朋友，我沒有辦法直觀的告訴你閉包在實際開發中的無處不在，但是我可以告訴你，前端面試，必問閉包。面試官們常常用對閉包的瞭解程度來判定面試者的基礎水平，保守估計，10個前端面試者，至少5個都死在閉包上。

可是爲什麼，閉包如此重要，還是有那麼多人沒有搞清楚呢？是因爲大家不願意學習嗎？還真不是，而是我們通過搜索找到的大部分講解閉包的中文文章，都沒有清晰明瞭的把閉包講解清楚。要麼淺嘗輒止，要麼高深莫測，要麼乾脆就直接亂說一通。包括我自己曾經也寫過一篇關於閉包的總結，回頭一看，不忍直視[捂臉]。

因此本文的目的就在於，能夠清晰明瞭得把閉包說清楚，讓讀者朋友們看了之後，就把閉包給徹底學會了，而不是似懂非懂。

一、作用域與作用域鏈

在詳細講解作用域鏈之前，我默認你已經大概明白了JavaScript中的下面這些重要概念。這些概念將會非常有幫助。

• 基礎數據類型與引用數據類型
• 內存空間
• 垃圾回收機制
• 執行上下文
• 變量對象與活動對象

作用域

• 在JavaScript中，我們可以將作用域定義爲一套規則,這套規則用來管理引擎如何在當前作用域以及嵌套的子作用域中根據標識符名稱進行變量查找。

這裏的標識符，指的是變量名或者函數名

• JavaScript中只有全局作用域與函數作用域(因爲eval我們平時開發中幾乎不會用到它，這裏不討論)。
• 作用域與執行上下文是完全不同的兩個概念。我知道很多人會混淆他們，但是一定要仔細區分。

JavaScript代碼的整個執行過程，分爲兩個階段，代碼編譯階段與代碼執行階段。編譯階段由編譯器完成，將代碼翻譯成可執行代碼，這個階段作用域規則會確定。執行階段由引擎完成，主要任務是執行可執行代碼，執行上下文在這個階段創建。

過程

作用域鏈
回顧一下上一篇文章我們分析的執行上下文的生命週期，如下圖。

執行上下文生命週期

我們知道函數在調用激活時，會開始創建對應的執行上下文，在執行上下文生成的過程中，變量對象，作用域鏈，以及this的值會分別被確定。之前一篇文章我們詳細說明了變量對象，而這裏，我們將詳細說明作用域鏈。

作用域鏈，是由當前環境與上層環境的一系列變量對象組成，它保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。

爲了幫助大家理解作用域鏈，我我們先結合一個例子，以及相應的圖示來說明。

var a = 20;

function test() {
    var b = a + 10;

    function innerTest() {
        var c = 10;
        return b + c;
    }

    return innerTest();
}

test();

在上面的例子中，全局，函數test，函數innerTest的執行上下文先後創建。我們設定他們的變量對象分別爲VO(global)，VO(test), VO(innerTest)。而innerTest的作用域鏈，則同時包含了這三個變量對象，所以innerTest的執行上下文可如下表示。

innerTestEC = {
    VO: {...},  // 變量對象
    scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域鏈
}

我們可以直接用一個數組來表示作用域鏈，數組的第一項scopeChain[0]爲作用域鏈的最前端，而數組的最後一項，爲作用域鏈的最末端，所有的最末端都爲全局變量對象。

很多人會誤解爲當前作用域與上層作用域爲包含關係，但其實並不是。以最前端爲起點，最末端爲終點的單方向通道我認爲是更加貼切的形容。如圖。

作用域鏈圖示

注意，因爲變量對象在執行上下文進入執行階段時，就變成了活動對象，這一點在上一篇文章中已經講過，因此圖中使用了AO來表示。Active
Object

是的，作用域鏈是由一系列變量對象組成，我們可以在這個單向通道中，查詢變量對象中的標識符，這樣就可以訪問到上一層作用域中的變量了。

二、閉包

對於那些有一點 JavaScript 使用經驗但從未真正理解閉包概念的人來說，理解閉包可以看作是某種意義上的重生，突破閉包的瓶頸可以使你功力大增。

閉包是一種特殊的對象。

它由兩部分組成。執行上下文(代號A)，以及在該執行上下文中創建的函數（代號B）。

當B執行時，如果訪問了A中變量對象中的值，那麼閉包就會產生。

在大多數理解中，包括許多著名的書籍，文章裏都以函數B的名字代指這裏生成的閉包。而在chrome中，則以執行上下文A的函數名代指閉包。

因此我們只需要知道，一個閉包對象，由A、B共同組成，在以後的篇幅中，我將以chrome的標準來稱呼。

// demo01
function foo() {
    var a = 20;
    var b = 30;

    function bar() {
        return a + b;
    }

    return bar;
}

var bar = foo();
bar();

上面的例子，首先有執行上下文foo，在foo中定義了函數bar，而通過對外返回bar的方式讓bar得以執行。當bar執行時，訪問了foo內部的變量a，b。因此這個時候閉包產生。

在基礎進階（一）中，我總結了JavaScript的垃圾回收機制。JavaScript擁有自動的垃圾回收機制，關於垃圾回收機制，有一個重要的行爲，那就是，當一個值，在內存中失去引用時，垃圾回收機制會根據特殊的算法找到它，並將其回收，釋放內存。

而我們知道，函數的執行上下文，在執行完畢之後，生命週期結束，那麼該函數的執行上下文就會失去引用。其佔用的內存空間很快就會被垃圾回收器釋放。可是閉包的存在，會阻止這一過程。

先來一個簡單的例子。

var fn = null;
function foo() {
    var a = 2;
    function innnerFoo() {
        console.log(a);
    }
    fn = innnerFoo; // 將 innnerFoo的引用，賦值給全局變量中的fn
}

function bar() {
    fn(); // 此處的保留的innerFoo的引用
}

foo();
bar(); // 2

在上面的例子中，foo()執行完畢之後，按照常理，其執行環境生命週期會結束，所佔內存被垃圾收集器釋放。但是通過fn = innerFoo，函數innerFoo的引用被保留了下來，複製給了全局變量fn。這個行爲，導致了foo的變量對象，也被保留了下來。於是，函數fn在函數bar內部執行時，依然可以訪問這個被保留下來的變量對象。所以此刻仍然能夠訪問到變量a的值。

這樣，我們就可以稱foo爲閉包。

下圖展示了閉包foo的作用域鏈。

閉包foo的作用域鏈，圖中標題寫錯了，請無視

我們可以在chrome瀏覽器的開發者工具中查看這段代碼運行時產生的函數調用棧與作用域鏈的生成情況。如下圖。

關於如何在chrome中觀察閉包，以及更多閉包的例子，請閱讀基礎系列（六）

從圖中可以看出，chrome瀏覽器認爲閉包是foo，而不是通常我們認爲的innerFoo

在上面的圖中，紅色箭頭所指的正是閉包。其中Call Stack爲當前的函數調用棧，Scope爲當前正在被執行的函數的作用域鏈，Local爲當前的局部變量。

所以，通過閉包，我們可以在其他的執行上下文中，訪問到函數的內部變量。比如在上面的例子中，我們在函數bar的執行環境中訪問到了函數foo的a變量。個人認爲，從應用層面，這是閉包最重要的特性。利用這個特性，我們可以實現很多有意思的東西。

不過讀者朋友們需要注意的是，雖然例子中的閉包被保存在了全局變量中，但是閉包的作用域鏈並不會發生任何改變。在閉包中，能訪問到的變量，仍然是作用域鏈上能夠查詢到的變量。

對上面的例子稍作修改，如果我們在函數bar中聲明一個變量c，並在閉包fn中試圖訪問該變量，運行結果會拋出錯誤。

var fn = null;
function foo() {
    var a = 2;
    function innnerFoo() {
        console.log(c); // 在這裏，試圖訪問函數bar中的c變量，會拋出錯誤
        console.log(a);
    }
    fn = innnerFoo; // 將 innnerFoo的引用，賦值給全局變量中的fn
}

function bar() {
    var c = 100;
    fn(); // 此處的保留的innerFoo的引用
}

foo();
bar();

關於這一點，很多同學把函數調用棧與作用域鏈沒有分清楚，所以有的大神看了我關於介紹執行上下文的文章時就義正言辭的說我的例子有問題，而這些評論有很大的誤導作用，爲了幫助大家自己擁有能夠辨別的能力，所以我寫了基礎（六），教大家如何在chrome中觀察閉包，作用域鏈，this等。當然我也不敢100%保證我文中的例子就一定正確，所以教大家如何去辨認我認爲纔是最重要的。

閉包的應用場景
除了面試，在實踐中，閉包有兩個非常重要的應用場景。分別是模塊化與柯里化。

柯里化

在函數式編程中，利用閉包能夠實現很多炫酷的功能，柯里化便是其中很重要的一種。點擊瞭解更多關於柯里化的知識
https://www.jianshu.com/p/5e1899fe7d6b

模塊

在我看來，模塊是閉包最強大的一個應用場景。如果你是初學者，對於模塊的瞭解可以暫時不用放在心上，因爲理解模塊需要更多的基礎知識。但是如果你已經有了很多JavaScript的使用經驗，在徹底瞭解了閉包之後，不妨藉助本文介紹的作用域鏈與閉包的思路，重新理一理關於模塊的知識。這對於我們理解各種各樣的設計模式具有莫大的幫助。

(function () {
    var a = 10;
    var b = 20;

    function add(num1, num2) {
        var num1 = !!num1 ? num1 : a;
        var num2 = !!num2 ? num2 : b;

        return num1 + num2;
    }

    window.add = add;
})();

add(10, 20);

在上面的例子中，我使用函數自執行的方式，創建了一個模塊。add是模塊對外暴露的一個公共方法。而變量a，b被作爲私有變量。在面向對象的開發中，我們常常需要考慮是將變量作爲私有變量，還是放在構造函數中的this中，因此理解閉包，以及原型鏈是一個非常重要的事情。模塊十分重要，因此我會在以後的文章專門介紹，這裏就暫時不多說啦。

此圖中可以觀看到當代碼執行到add方法時的調用棧與作用域鏈，此刻的閉包爲外層的自執行函數

爲了驗證自己有沒有搞懂作用域鏈與閉包，這裏留下一個經典的思考題，常常也會在面試中被問到。

利用閉包，修改下面的代碼，讓循環輸出的結果依次爲1， 2， 3， 4， 5

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

點此查看關於此題的詳細解讀
https://www.jianshu.com/p/9b4a54a98660

關於作用域鏈的與閉包我就總結完了，雖然我自認爲我是說得非常清晰了，但是我知道理解閉包並不是一件簡單的事情，所以如果你有什麼問題，可以在評論中問我。你也可以帶着從別的地方沒有看懂的例子在評論中留言。大家一起學習進步。

作者：這波能反殺
鏈接：https://www.jianshu.com/p/21a16d44f150
著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。