教你如何使用firebug调试功能了解javascript闭包和this
对于跟我一样，自学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的属性，以location为例，可以直接在“控制台”运行window.location输出，进一步可以window.location.href输出location的href属性值。当然，一般在引用window对象的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。
言归正传，
回到“脚本”栏，通过打“断点”的方式调试javascript和查看变量值。
有几个概念可以先了解下：断点、单步进入、单步跳过、单步退出。这里就不详叙了。
本次主要是采用设置断点、单步进入的方式。
可以在左侧行标处单击设置断点，断点右键可以正则判断。
可以设置多个断点，“断点”栏内可以删除已设置的断点。
这里就直接在script标签的开始处打断点并刷新页面。
此时
1、右边监控区域原window对象处变成this，并指向window。在“控制台”输出this.location会得到location一样的结果。
2、全局变量max、fl初始化为undefined
3、fn()是函数声明，因为解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）
点击右上角的“单步进入”按钮
逐次执行代码并在监控区域查看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的方法总结了，希望大家能够喜欢
相关文章
这篇文章主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Fetch具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下2019-02-02
本篇文章对javascript中的一些实用函数进行了详细的分析介绍，需要的朋友参考下2013-05-05
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
这篇文章主要介绍了javascript间隔调用和延时调用示例,介绍setInterval方法和clearInterval方法的使用方法，大家参考使用吧2014-01-01
本文给大家汇总介绍的是获取JavaScript 数组中最大最小值的方法和示例，非常的详细和全面，希望对大家学习JavaScript能够有所帮助2016-06-06
JavaScript使用ZeroClipboard操作剪切板
这篇文章主要为大家详细介绍了JavaScript使用ZeroClipboard操作剪切板的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在做一些关于会员在线的问题时，往往我们要根据览器是否关闭来判断用户是否下线，然后再从session和application中将此用户移除，下面与大家分享下具体的捕捉方法2013-06-06
这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下2016-03-03
表单验证正则的代码，大家可以参考下，可以直接拿来使用，也可以用来学习正则。2009-09-09
最新评论