本文通过Firebug工具演示JavaScript闭包与this关键字的调试过程。详细讲解如何设置断点、使用单步进入功能监控变量变化,并通过两个具体代码示例,直观展示全局作用域与函数作用域中this指向的差异,帮助开发者掌握利用调试器理解复杂JS逻辑的方法。
Firebug调试JavaScript入门
对于自学JavaScript且无其他编程语言基础的学习者而言,初期掌握调试技巧往往是一大挑战,许多基础知识需自行摸索,这一过程充满艰辛。
本文旨在结合此前关于闭包的文章配图,利用Firebug进行演示,以此分享相关的调试经验。
首先展示示例代码:
代码如下:
function fn(){
var max = 10;
return function bar(x){
if (x > max) {
console.log(x);
}
}
}
var fl = fn(),
max = 100;
fl(15);
监控面板与变量观察
在Firebug中选择“脚本”面板。

右侧监控栏可观察window对象以及变量max、fl、fn的状态。
下方控制台亦可见window属性,例如直接运行window.location可输出location对象,进一步通过window.location.href可获取href属性值。通常引用window属性时无需显式使用“window.xxx”,直接写“xxx”即可。
接下来回到核心内容,
断点与单步调试技巧
利用“脚本”面板设置断点来调试JavaScript并查看变量值。
需了解几个基本概念:断点、单步进入、单步跳过、单步退出,此处不再赘述。
本次演示主要采用设置断点配合单步进入的方式。
可在左侧行号处单击设置断点,右键断点可配置正则判断。
支持设置多个断点,并在“断点”栏中删除已设断点。
此处直接在script标签起始处设置断点并刷新页面。
此时
1、右侧监控区原window对象处变为this,且指向window。在控制台输出this.location结果与location一致。
2、全局变量max、fl初始化为undefined。
3、fn()为函数声明,解析器会优先读取并使其在执行前可用。

点击右上角“单步进入”按钮。
逐行执行代码,并在监控区观察this、各变量值及堆栈变化。可结合推荐博客对照阅读。
闭包中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();
继续“单步进入”,执行c()时进入getNameFunc内部,此时this从指向window变为指向obj,控制台输出‘The local'。
逐步执行能清晰展示代码运行逻辑。
以上即为利用Firebug调试功能理解JavaScript闭包和this的方法总结,希望读者有所收获。