爬蟲逆向 | 通過斷點(diǎn)調(diào)試觀察JS執(zhí)行過程
點(diǎn)擊“Python編程與實(shí)戰(zhàn)”，選擇“置頂公眾號(hào)”
第一時(shí)間獲取 Python 技術(shù)干貨！
前端開發(fā)中，有一個(gè)重要的技能，叫做斷點(diǎn)調(diào)試。
利用chrome開發(fā)者工具中的斷點(diǎn)調(diào)試，我們能夠一步步觀察JavaScript的執(zhí)行過程，直觀感知函數(shù)調(diào)用棧、作用域鏈、變量對(duì)象、閉包、this等關(guān)鍵信息的變化。因此，斷點(diǎn)調(diào)試對(duì)于快速定位代碼錯(cuò)誤，以及快速了解代碼的執(zhí)行過程有著非常重要的作用，這也是我們前端開發(fā)必不可少的一個(gè)高級(jí)技能。
當(dāng)然如果你對(duì)JavaScript的基礎(chǔ)概念（執(zhí)行上下文，變量對(duì)象，閉包，this等）了解還不夠的話，想要透徹掌握斷點(diǎn)調(diào)試可能會(huì)有一些困難。好在前面幾篇文章中，我都對(duì)這些概念進(jìn)行了詳細(xì)的概述，因此要掌握這個(gè)技能，對(duì)大家來說，應(yīng)該是比較輕松的。
這篇文章的另一個(gè)目的在于借助對(duì)于斷點(diǎn)調(diào)試的學(xué)習(xí)，進(jìn)一步加深對(duì)閉包的理解。
一、基礎(chǔ)概念回顧
函數(shù)在被調(diào)用執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)當(dāng)前函數(shù)的執(zhí)行上下文。在該執(zhí)行上下文的創(chuàng)建階段，變量對(duì)象、作用域鏈、閉包、this指向會(huì)分別被確定。一個(gè)JavaScript程序中一般來說會(huì)有多個(gè)函數(shù)，JavaScript引擎使用函數(shù)調(diào)用棧來管理這些函數(shù)的調(diào)用順序。函數(shù)調(diào)用棧的調(diào)用順序與棧數(shù)據(jù)結(jié)構(gòu)一致。
二、認(rèn)識(shí)斷點(diǎn)調(diào)試工具
在盡量新版本的chrome瀏覽器中（不確定你用的版本與我的一致），調(diào)出chrome瀏覽器的開發(fā)者工具。
瀏覽器右上角豎著的三點(diǎn) -> 更多工具 -> 開發(fā)者工具 -> Sources
界面如圖。
在我的demo中，我把代碼放在app.js，并在index.html中引入。我們暫時(shí)只需要關(guān)注截圖中紅色箭頭的地方。在最右側(cè)上方，有一排圖標(biāo)。我們可以通過使用他們來控制函數(shù)的執(zhí)行順序。從左到右他們依次是：
resume/pause script execution
恢復(fù)/暫停腳本執(zhí)行
step over next function call
跨過，實(shí)際表現(xiàn)是不遇到函數(shù)時(shí)，執(zhí)行下一步。遇到函數(shù)時(shí)，不進(jìn)入函數(shù)直接執(zhí)行下一步。
step into next function call
跨入，實(shí)際表現(xiàn)是不遇到函數(shù)時(shí)，執(zhí)行下一步。遇到到函數(shù)時(shí)，進(jìn)入函數(shù)執(zhí)行上下文。
step out of current function
跳出當(dāng)前函數(shù)
deactivate breakpoints
停用斷點(diǎn)
don‘t pause on exceptions
不暫停異常捕獲
其中跨過，跨入，跳出是我使用最多的三個(gè)操作。
上圖右側(cè)第二個(gè)紅色箭頭指向的是函數(shù)調(diào)用棧（call Stack），這里會(huì)顯示代碼執(zhí)行過程中，調(diào)用棧的變化。
右側(cè)第三個(gè)紅色箭頭指向的是作用域鏈（Scope），這里會(huì)顯示當(dāng)前函數(shù)的作用域鏈。其中Local表示當(dāng)前的局部變量對(duì)象，Closure表示當(dāng)前作用域鏈中的閉包。借助此處的作用域鏈展示，我們可以很直觀的判斷出一個(gè)例子中，到底誰(shuí)是閉包，對(duì)于閉包的深入了解具有非常重要的幫助作用。
三、斷點(diǎn)設(shè)置
在顯示代碼行數(shù)的地方點(diǎn)擊，即可設(shè)置一個(gè)斷點(diǎn)。斷點(diǎn)設(shè)置有以下幾個(gè)特點(diǎn)：
?在單獨(dú)的變量聲明(如果沒有賦值)，函數(shù)聲明的那一行，無法設(shè)置斷點(diǎn)。?設(shè)置斷點(diǎn)后刷新頁(yè)面，JavaScript代碼會(huì)執(zhí)行到斷點(diǎn)位置處暫停執(zhí)行，然后我們就可以使用上邊介紹過的幾個(gè)操作開始調(diào)試了。?當(dāng)你設(shè)置多個(gè)斷點(diǎn)時(shí)，chrome工具會(huì)自動(dòng)判斷從最早執(zhí)行的那個(gè)斷點(diǎn)開始執(zhí)行，因此我一般都是設(shè)置一個(gè)斷點(diǎn)就行了。
四、實(shí)例
接下來，我們借助一些實(shí)例，來使用斷點(diǎn)調(diào)試工具，看一看，我們的demo函數(shù)，在執(zhí)行過程中的具體表現(xiàn)。
// demo01var fn;function foo() {var a = 2;function baz() {console.log(a);}fn = baz;}function bar() {fn();}foo();bar(); // 2
在向下閱讀之前，我們可以停下來思考一下，這個(gè)例子中，誰(shuí)是閉包？
這是來自《你不知道的js》中的一個(gè)例子。由于在使用斷點(diǎn)調(diào)試過程中，發(fā)現(xiàn)chrome瀏覽器理解的閉包與該例子中所理解的閉包不太一致，因此專門挑出來，供大家參考。我個(gè)人更加傾向于chrome中的理解。
第一步：設(shè)置斷點(diǎn)，然后刷新頁(yè)面。
第二步：點(diǎn)擊上圖紅色箭頭指向的按鈕（step into），該按鈕的作用會(huì)根據(jù)代碼執(zhí)行順序，一步一步向下執(zhí)行。在點(diǎn)擊的過程中，我們要注意觀察下方call stack 與 scope的變化，以及函數(shù)執(zhí)行位置的變化。
一步一步執(zhí)行，當(dāng)函數(shù)執(zhí)行到上例子中
我們可以看到，在chrome工具的理解中，由于在foo內(nèi)部聲明的baz函數(shù)在調(diào)用時(shí)訪問了它的變量a，因此foo成為了閉包。這好像和我們學(xué)習(xí)到的知識(shí)不太一樣。我們來看看在《你不知道的js》這本書中的例子中的理解。
書中的注釋可以明顯的看出，作者認(rèn)為fn為閉包。即baz，這和chrome工具中明顯是不一樣的。
而在備受大家推崇的《JavaScript高級(jí)編程》一書中，是這樣定義閉包。
這里chrome中理解的閉包，與我所閱讀的這幾本書中的理解的閉包不一樣。其實(shí)在之前對(duì)于閉包分析的文章中，我已經(jīng)有對(duì)這種情況做了一個(gè)解讀。閉包詳解[1]
閉包是一個(gè)特殊對(duì)象，它由執(zhí)行上下文(代號(hào)A)與在該執(zhí)行上下文中創(chuàng)建的函數(shù)(代號(hào)B)共同組成。
當(dāng)B執(zhí)行時(shí)，如果訪問了A中變量對(duì)象中的值，那么閉包就會(huì)產(chǎn)生。
在大多數(shù)理解中，包括許多著名的書籍，文章里都以函數(shù)B的名字代指這里生成的閉包。而在chrome中，則以執(zhí)行上下文A的函數(shù)名代指閉包。
我們修改一下demo01中的例子，來看看一個(gè)非常有意思的變化。
// demo02var fn;var m = 20;function foo() {var a = 2;function baz(a) {console.log(a);}fn = baz;}function bar() {fn(m);}foo();bar(); // 20
這個(gè)例子在demo01的基礎(chǔ)上，我在baz函數(shù)中傳入一個(gè)參數(shù)，并打印出來。在調(diào)用時(shí)，我將全局的變量m傳入。輸出結(jié)果變?yōu)?0。在使用斷點(diǎn)調(diào)試看看作用域鏈。
是不是結(jié)果有點(diǎn)意外，閉包沒了，作用域鏈中沒有包含foo了。我靠，跟我們理解的好像又有點(diǎn)不一樣。所以通過這個(gè)對(duì)比，我們可以確定閉包的形成需要兩個(gè)條件。
?在函數(shù)內(nèi)部創(chuàng)建新的函數(shù)；?新的函數(shù)在執(zhí)行時(shí)，訪問了函數(shù)的變量對(duì)象；
還有更有意思的。
我們繼續(xù)來看看一個(gè)例子。
// demo03function foo() {var a = 2;return function bar() {var b = 9;return function fn() {console.log(a);}}}var bar = foo();var fn = bar();fn();
在這個(gè)例子中，fn只訪問了foo中的a變量，因此它的閉包只有foo。
修改一下demo03，我們?cè)趂n中也訪問bar中b變量試試看。
// demo04function foo() {var a = 2;return function bar() {var b = 9;return function fn() {console.log(a, b);}}}var bar = foo();var fn = bar();fn();
這個(gè)時(shí)候，閉包變成了兩個(gè)。分別是bar，foo。
我們知道，閉包在模塊中的應(yīng)用非常重要。因此，我們來一個(gè)模塊的例子，也用斷點(diǎn)工具來觀察一下。
// 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，大寫開頭，他們表示的是實(shí)例的構(gòu)造函數(shù)，實(shí)際上this是指向的具體實(shí)例
test.mark能形成閉包，跟下面的補(bǔ)充例子（demo07）情況是一樣的。
我們還可以結(jié)合斷點(diǎn)調(diào)試的方式，來理解那些困擾我們很久的this指向。隨時(shí)觀察this的指向，在實(shí)際開發(fā)調(diào)試中非常有用。
// demo06var a = 10;var obj = {a: 20}function fn() {console.log(this.a);}fn.call(obj); // 20
最后繼續(xù)補(bǔ)充一個(gè)例子。
// demo07function foo() {var a = 10;function fn1() {return a;}function fn2() {return 10;}fn2();}foo();
這個(gè)例子，和其他例子不太一樣。雖然fn2并沒有訪問到foo的變量，但是foo執(zhí)行時(shí)仍然變成了閉包。而當(dāng)我將fn1的聲明去掉時(shí)，閉包便不會(huì)出現(xiàn)了。
那么結(jié)合這個(gè)特殊的例子，我們可以這樣這樣定義閉包。
閉包是指這樣的作用域(foo)，它包含有一個(gè)函數(shù)(fn1)，這個(gè)函數(shù)(fn1)可以調(diào)用被這個(gè)作用域所封閉的變量(a)、函數(shù)、或者閉包等內(nèi)容。通常我們通過閉包所對(duì)應(yīng)的函數(shù)來獲得對(duì)閉包的訪問。
更多的例子，大家可以自行嘗試，總之，學(xué)會(huì)了使用斷點(diǎn)調(diào)試之后，我們就能夠很輕松的了解一段代碼的執(zhí)行過程了。這對(duì)快速定位錯(cuò)誤，快速了解他人的代碼都有非常巨大的幫助。大家一定要?jiǎng)邮謱?shí)踐，把它給學(xué)會(huì)。
最后，根據(jù)以上的摸索情況，再次總結(jié)一下閉包：
?閉包是在函數(shù)被調(diào)用執(zhí)行的時(shí)候才被確認(rèn)創(chuàng)建的。?閉包的形成，與作用域鏈的訪問順序有直接關(guān)系。?只有內(nèi)部函數(shù)訪問了上層作用域鏈中的變量對(duì)象時(shí)，才會(huì)形成閉包，因此，我們可以利用閉包來訪問函數(shù)內(nèi)部的變量。
大家也可以根據(jù)我提供的這個(gè)方法，對(duì)其他的例子進(jìn)行更多的測(cè)試。以加強(qiáng)對(duì)閉包的理解
推薦閱讀
19 個(gè)接私活平臺(tái)匯總升級(jí)版，你有技術(shù)就有錢
一個(gè)普通程序員，靠 GitHub 打賞就年入 70 萬(wàn)，要不你也試試
THANKS
- End -