前端基礎進階(四):詳細圖解做用域鏈與閉包

攻克閉包難題
初學JavaScript的時候,我在學習閉包上,走了不少彎路。而此次從新回過頭來對基礎知識進行梳理,要講清楚閉包,也是一個很是大的挑戰。javascript

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

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

所以本文的目的就在於,可以清晰明瞭得把閉包說清楚,讓讀者朋友們看了以後,就把閉包給完全學會了,而不是似懂非懂。面試

1、做用域與做用域鏈

在詳細講解做用域鏈以前,我默認你已經大概明白了JavaScript中的下面這些重要概念。這些概念將會很是有幫助。算法

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

若是你暫時尚未明白,能夠去看本系列的前三篇文章,本文文末有目錄連接。爲了講解閉包,已經爲你們作好了基礎知識的鋪墊哦。chrome

做用域編程

  • 在JavaScript中,咱們能夠將做用域定義爲一套規則,這套規則用來管理引擎如何在當前做用域以及嵌套的子做用域中根據標識符名稱進行變量查找。
這裏的標識符,指的是變量名或者函數名
  • JavaScript中只有全局做用域與函數做用域(由於eval咱們平時開發中幾乎不會用到它,這裏不討論)。
  • 做用域與執行上下文是徹底不一樣的兩個概念。我知道不少人會混淆他們,可是必定要仔細區分。
JavaScript代碼的整個執行過程,分爲兩個階段,代碼編譯階段與代碼執行階段。編譯階段由編譯器完成,將代碼翻譯成可執行代碼,這個階段做用域規則會肯定。執行階段由引擎完成,主要任務是執行可執行代碼,執行上下文在這個階段建立。

過程

做用域鏈segmentfault

回顧一下上一篇文章咱們分析的執行上下文的生命週期,以下圖。
執行上下文生命週期設計模式

咱們知道函數在調用激活時,會開始建立對應的執行上下文,在執行上下文生成的過程當中,變量對象,做用域鏈,以及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

是的,做用域鏈是由一系列變量對象組成,咱們能夠在這個單向通道中,查詢變量對象中的標識符,這樣就能夠訪問到上一層做用域中的變量了。

2、閉包

對於那些有一點 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%保證我文中的例子就必定正確,因此教你們如何去辨認我認爲纔是最重要的。

閉包的應用場景

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

  • 柯里化

在函數式編程中,利用閉包可以實現不少炫酷的功能,柯里化即是其中很重要的一種。點擊瞭解更多關於柯里化的知識

  • 模塊

在我看來,模塊是閉包最強大的一個應用場景。若是你是初學者,對於模塊的瞭解能夠暫時不用放在心上,由於理解模塊須要更多的基礎知識。可是若是你已經有了不少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 );
}

點此查看關於此題的詳細解讀

關於做用域鏈的與閉包我就總結完了,雖然我自認爲我是說得很是清晰了,可是我知道理解閉包並非一件簡單的事情,因此若是你有什麼問題,能夠在評論中問我。你也能夠帶着從別的地方沒有看懂的例子在評論中留言。你們一塊兒學習進步。

前端基礎進階系列目錄

clipboard.png

相關文章
相關標籤/搜索