摘要：在的開發(fā)者工具中，通過斷點調(diào)試，我們能夠非常方便的一步一步的觀察的執(zhí)行過程，直觀感知函數(shù)調(diào)用棧，作用域鏈，變量對象，閉包，等關(guān)鍵信息的變化。其中表示當前的局部變量對象，表示當前作用域鏈中的閉包。

在前端開發(fā)中，有一個非常重要的技能，叫做斷點調(diào)試。

在chrome的開發(fā)者工具中，通過斷點調(diào)試，我們能夠非常方便的一步一步的觀察JavaScript的執(zhí)行過程，直觀感知函數(shù)調(diào)用棧，作用域鏈，變量對象，閉包，this等關(guān)鍵信息的變化。因此，斷點調(diào)試對于快速定位代碼錯誤，快速了解代碼的執(zhí)行過程有著非常重要的作用，這也是我們前端開發(fā)者必不可少的一個高級技能。

當然如果你對JavaScript的這些基礎(chǔ)概念（執(zhí)行上下文，變量對象，閉包，this等）了解還不夠的話，想要透徹掌握斷點調(diào)試可能會有一些困難。但是好在在前面幾篇文章，我都對這些概念進行了詳細的概述，因此要掌握這個技能，對大家來說，應(yīng)該是比較輕松的。

這篇文章的主要目的在于借助對于斷點調(diào)試的學習，來進一步加深對閉包的理解。

一、基礎(chǔ)概念回顧

函數(shù)在被調(diào)用執(zhí)行時，會創(chuàng)建一個當前函數(shù)的執(zhí)行上下文。在該執(zhí)行上下文的創(chuàng)建階段，變量對象、作用域鏈、閉包、this指向會分別被確定。而一個JavaScript程序中一般來說會有多個函數(shù)，JavaScript引擎使用函數(shù)調(diào)用棧來管理這些函數(shù)的調(diào)用順序。函數(shù)調(diào)用棧的調(diào)用順序與棧數(shù)據(jù)結(jié)構(gòu)一致。

二、認識斷點調(diào)試工具

在盡量新版本的chrome瀏覽器中（不確定你用的老版本與我的一致），調(diào)出chrome瀏覽器的開發(fā)者工具。

瀏覽器右上角豎著的三點 -> 更多工具 -> 開發(fā)者工具 -> Sources

界面如圖。

在我的demo中，我把代碼放在app.js中，在index.html中引入。我們暫時只需要關(guān)注截圖中紅色箭頭的地方。在最右側(cè)上方，有一排圖標。我們可以通過使用他們來控制函數(shù)的執(zhí)行順序。從左到右他們依次是：

resume/pause script execution
恢復(fù)/暫停腳本執(zhí)行

step over next function call

跨過，實際表現(xiàn)是不遇到函數(shù)時，執(zhí)行下一步。遇到函數(shù)時，不進入函數(shù)直接執(zhí)行下一步。

step into next function call

跨入，實際表現(xiàn)是不遇到函數(shù)時，執(zhí)行下一步。遇到到函數(shù)時，進入函數(shù)執(zhí)行上下文。

step out of current function

跳出當前函數(shù)

deactivate breakpoints

停用斷點

don‘t pause on exceptions

不暫停異常捕獲

其中跨過，跨入，跳出是我使用最多的三個操作。

上圖右側(cè)第二個紅色箭頭指向的是函數(shù)調(diào)用棧（call Stack），這里會顯示代碼執(zhí)行過程中，調(diào)用棧的變化。

右側(cè)第三個紅色箭頭指向的是作用域鏈（Scope），這里會顯示當前函數(shù)的作用域鏈。其中Local表示當前的局部變量對象，Closure表示當前作用域鏈中的閉包。借助此處的作用域鏈展示，我們可以很直觀的判斷出一個例子中，到底誰是閉包，對于閉包的深入了解具有非常重要的幫助作用。

三、斷點設(shè)置

在顯示代碼行數(shù)的地方點擊，即可設(shè)置一個斷點。斷點設(shè)置有以下幾個特點：

在多帶帶的變量聲明(如果沒有賦值)，函數(shù)聲明的那一行，無法設(shè)置斷點。

設(shè)置斷點后刷新頁面，JavaScript代碼會執(zhí)行到斷點位置處暫停執(zhí)行，然后我們就可以使用上邊介紹過的幾個操作開始調(diào)試了。

當你設(shè)置多個斷點時，chrome工具會自動判斷從最早執(zhí)行的那個斷點開始執(zhí)行，因此我一般都是設(shè)置一個斷點就行了。

四、實例

接下來，我們借助一些實例，來使用斷點調(diào)試工具，看一看，我們的demo函數(shù)，在執(zhí)行過程中的具體表現(xiàn)。

// demo01

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

foo();
bar(); // 2

在向下閱讀之前，我們可以停下來思考一下，這個例子中，誰是閉包？

這是來自《你不知道的js》中的一個例子。由于在使用斷點調(diào)試過程中，發(fā)現(xiàn)chrome瀏覽器理解的閉包與該例子中所理解的閉包不太一致，因此專門挑出來，供大家參考。我個人更加傾向于chrome中的理解。

第一步：設(shè)置斷點，然后刷新頁面。

第二步：點擊上圖紅色箭頭指向的按鈕（step into），該按鈕的作用會根據(jù)代碼執(zhí)行順序，一步一步向下執(zhí)行。在點擊的過程中，我們要注意觀察下方call stack 與 scope的變化，以及函數(shù)執(zhí)行位置的變化。

一步一步執(zhí)行，當函數(shù)執(zhí)行到上例子中

我們可以看到，在chrome工具的理解中，由于在foo內(nèi)部聲明的baz函數(shù)在調(diào)用時訪問了它的變量a，因此foo成為了閉包。這好像和我們學習到的知識不太一樣。我們來看看在《你不知道的js》這本書中的例子中的理解。

書中的注釋可以明顯的看出，作者認為fn為閉包。即baz，這和chrome工具中明顯是不一樣的。

而在備受大家推崇的《JavaScript高級編程》一書中，是這樣定義閉包。

這里chrome中理解的閉包，與我所閱讀的這幾本書中的理解的閉包不一樣。其實在之前對于閉包分析的文章中，我已經(jīng)有對這種情況做了一個解讀。閉包詳解

閉包是一個特殊對象，它由執(zhí)行上下文(代號A)與在該執(zhí)行上下文中創(chuàng)建的函數(shù)(代號B)共同組成。

當B執(zhí)行時，如果訪問了A中變量對象中的值，那么閉包就會產(chǎn)生。

那么在大多數(shù)理解中，包括許多著名的書籍，文章里都以函數(shù)B的名字代指這里生成的閉包。而在chrome中，則以執(zhí)行上下文A的函數(shù)名代指閉包。

我們修改一下demo01中的例子，來看看一個非常有意思的變化。

// demo02
var fn;
var m = 20;
function foo() {
    var a = 2;
    function baz(a) {
        console.log(a);
    }
    fn = baz;
}
function bar() {
    fn(m);
}

foo();
bar(); // 20

這個例子在demo01的基礎(chǔ)上，我在baz函數(shù)中傳入一個參數(shù)，并打印出來。在調(diào)用時，我將全局的變量m傳入。輸出結(jié)果變?yōu)?0。在使用斷點調(diào)試看看作用域鏈。

是不是結(jié)果有點意外，閉包沒了，作用域鏈中沒有包含foo了。我靠，跟我們理解的好像又有點不一樣。所以通過這個對比，我們可以確定閉包的形成需要兩個條件。

在函數(shù)內(nèi)部創(chuàng)建新的函數(shù)；

新的函數(shù)在執(zhí)行時，訪問了函數(shù)的變量對象；

還有更有意思的。

我們繼續(xù)來看看一個例子。

// demo03

function foo() {
    var a = 2;

    return function bar() {
        var b = 9;

        return function fn() {
            console.log(a);
        }
    }
}

var bar = foo();
var fn = bar();
fn();

在這個例子中，fn只訪問了foo中的a變量，因此它的閉包只有foo。

修改一下demo03，我們在fn中也訪問bar中b變量試試看。

// demo04

function foo() {
    var a = 2;

    return function bar() {
        var b = 9;

        return function fn() {
            console.log(a, b);
        }
    }
}

var bar = foo();
var fn = bar();
fn();

這個時候，閉包變成了兩個。分別是bar，foo。

我們知道，閉包在模塊中的應(yīng)用非常重要。因此，我們來一個模塊的例子，也用斷點工具來觀察一下。

// demo05
(function() {

    var a = 10;
    var b = 20;

    var test = {
        m: 20,
        add: function(x) {
            return a + x;
        },
        sum: function() {
            return a + b + this.m;
        },
        mark: function(k, j) {
            return k + j;
        }
    }

    window.test = test;

})();

test.add(100);
test.sum();
test.mark();

var _mark = test.mark;
_mark();

注意：這里的this指向顯示為Object或者Window，大寫開頭，他們表示的是實例的構(gòu)造函數(shù)，實際上this是指向的具體實例
test.mark能形成閉包，跟下面的補充例子（demo07）情況是一樣的。

我們還可以結(jié)合點斷調(diào)試的方式，來理解那些困擾我們很久的this指向。隨時觀察this的指向，在實際開發(fā)調(diào)試中非常有用。

// demo06

var a = 10;
var obj = {
    a: 20
}

function fn () {
    console.log(this.a);
}

fn.call(obj); // 20

最后繼續(xù)補充一個例子。

// demo07
function foo() {
    var a = 10;

    function fn1() {
        return a;
    }

    function fn2() {
        return 10;
    }

    fn2();
}

foo();

這個例子，和其他例子不太一樣。雖然fn2并沒有訪問到foo的變量，但是foo執(zhí)行時仍然變成了閉包。而當我將fn1的聲明去掉時，閉包便不會出現(xiàn)了。

那么結(jié)合這個特殊的例子，我們可以這樣這樣定義閉包。

閉包是指這樣的作用域(foo)，它包含有一個函數(shù)(fn1)，這個函數(shù)(fn1)可以調(diào)用被這個作用域所封閉的變量(a)、函數(shù)、或者閉包等內(nèi)容。通常我們通過閉包所對應(yīng)的函數(shù)來獲得對閉包的訪問。

更多的例子，大家可以自行嘗試，總之，學會了使用斷點調(diào)試之后，我們就能夠很輕松的了解一段代碼的執(zhí)行過程了。這對快速定位錯誤，快速了解他人的代碼都有非常巨大的幫助。大家一定要動手實踐，把它給學會。

最后，根據(jù)以上的摸索情況，再次總結(jié)一下閉包：

閉包是在函數(shù)被調(diào)用執(zhí)行的時候才被確認創(chuàng)建的。

閉包的形成，與作用域鏈的訪問順序有直接關(guān)系。

只有內(nèi)部函數(shù)訪問了上層作用域鏈中的變量對象時，才會形成閉包，因此，我們可以利用閉包來訪問函數(shù)內(nèi)部的變量。

大家也可以根據(jù)我提供的這個方法，對其他的例子進行更多的測試，如果發(fā)現(xiàn)我的結(jié)論有不對的地方，歡迎指出，大家相互學習進步，謝謝大家。

前端基礎(chǔ)進階系列目錄