教你如何使用firebug調(diào)試功能了解javascript閉包和this
對于跟我一樣,自學(xué)javascript且沒有其他語言學(xué)習(xí)經(jīng)驗的人來說,一開始的時候,javascript的調(diào)試也是一個比較大的難點,很多基礎(chǔ)的東西都需要自己去摸索,這個過程是非??鄲灥?。
想著趁機(jī)會將上面那篇閉包博文的配圖用firebug再來演示一遍,也算是一點調(diào)試經(jīng)驗分享。
示例代碼如下:
function fn(){
var max = 10;
return function bar(x){
if (x > max) {
console.log(x);
}
}
}
var fl = fn(),
max = 100;
fl(15);
選擇firebug——腳本
右側(cè)監(jiān)控欄可以window對象以及變量max、fl、fn。
同時下面也可以看到window的屬性,以location為例,可以直接在“控制臺”運(yùn)行window.location輸出,進(jìn)一步可以window.location.href輸出location的href屬性值。當(dāng)然,一般在引用window對象的屬性和方法時,不需要用“window.xxx”這種形式,而直接使用“xxx”。
言歸正傳,
回到“腳本”欄,通過打“斷點”的方式調(diào)試javascript和查看變量值。
有幾個概念可以先了解下:斷點、單步進(jìn)入、單步跳過、單步退出。這里就不詳敘了。
本次主要是采用設(shè)置斷點、單步進(jìn)入的方式。
可以在左側(cè)行標(biāo)處單擊設(shè)置斷點,斷點右鍵可以正則判斷。
可以設(shè)置多個斷點,“斷點”欄內(nèi)可以刪除已設(shè)置的斷點。
這里就直接在script標(biāo)簽的開始處打斷點并刷新頁面。
此時
1、右邊監(jiān)控區(qū)域原window對象處變成this,并指向window。在“控制臺”輸出this.location會得到location一樣的結(jié)果。
2、全局變量max、fl初始化為undefined
3、fn()是函數(shù)聲明,因為解析器會率先讀取函數(shù)聲明,并使其在執(zhí)行任何代碼之前可用(可以訪問)
點擊右上角的“單步進(jìn)入”按鈕
逐次執(zhí)行代碼并在監(jiān)控區(qū)域查看this、各個變量的值變化以及堆棧的情況??梢院屯扑]的那篇博客相互參照來看。
然后再來一個this的例子
代碼如下:
var name = 'The Window';
var obj = {
name: 'The local',
getNameFunc: function () {
console.log(this.name);
return function () {
console.log(this.name);
};
}
};
var c = obj.getNameFunc();
c();
依然“單步進(jìn)入”,可以看到在執(zhí)行c()這行代碼的時候,進(jìn)入到getNameFunc里面,this從指向window對象變?yōu)閛bj,控制臺輸出‘The local'。
逐步執(zhí)行可以非常清晰的看到整個代碼的運(yùn)行邏輯。
以上就是本文關(guān)于使用Firebug的調(diào)試功能了解javascript閉包和this的方法總結(jié)了,希望大家能夠喜歡
- FireBug 調(diào)試JS入門教程 如何調(diào)試JS
- 使用firebug進(jìn)行調(diào)試javascript的示例
- javascript 在firebug調(diào)試時用console.log的方法
- 使用Firebug對js進(jìn)行斷點調(diào)試的圖文方法
- 使用JavaScript檢測Firefox瀏覽器是否啟用了Firebug的代碼
- Firebug 字幕文件JSON地址獲取代碼
- Javascript 調(diào)試?yán)?Firebug使用詳解六
- js之WEB開發(fā)調(diào)試?yán)?Firebug 下載
- javascript判斷firebug是否開啟的方法
相關(guān)文章
Bootstrap基本樣式學(xué)習(xí)筆記之表格(2)
Bootstrap提供了一個清晰的創(chuàng)建表格的布局,這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表格基本樣式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12javascript Onunload與Onbeforeunload使用小結(jié)
Onunload,onbeforeunload都是在刷新或關(guān)閉時調(diào)用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行,它還可以阻止onunload的執(zhí)行。2009-12-12在JavaScript中對HTML進(jìn)行反轉(zhuǎn)義詳解
下面小編就為大家?guī)硪黄贘avaScript中對HTML進(jìn)行反轉(zhuǎn)義詳解。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05深入理解JavaScript系列(35):設(shè)計模式之迭代器模式詳解
這篇文章主要介紹了深入理解JavaScript系列(35):設(shè)計模式之迭代器模式詳解,迭代器模式(Iterator):提供一種方法順序一個聚合對象中各個元素,而又不暴露該對象內(nèi)部表示,需要的朋友可以參考下2015-03-03ES6 let和const定義變量與常量的應(yīng)用實例分析
這篇文章主要介紹了ES6 let和const定義變量與常量的應(yīng)用,結(jié)合實例形式分析了ES6使用let定義變量以及使用const定義常量的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06