利用firebug调试功能辅助了解闭包和this
算一算,有段时间没写博客。
上午的时候翻看以前收藏的一个系列博文《深入理解javascript原型和闭包》,
讲闭包那节:http://www.cnblogs.com/wangfupeng1988/p/3994065.html
上面对闭包的一步步讲解比较详细而且配图细致,非常适合初学者。
对于跟我一样,自学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调试功能辅助了解闭包和this的更多相关文章
- YUV422蓝屏显示输出功能辅助调试
YUV422蓝屏显示输出功能辅助调试 YUV422有YUYV,YVYU,UYVY,VYUY四种,以下笔者就就以UYVY为例介绍一下数据构成.因为常常要跟视频输入打交道,所以YUV422这种常见的视频信 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...
- IE浏览器中用Firebug调试网站的方法
对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效.不过对于很多不喜欢使用Firefox浏览器的 ...
- VC使用CRT调试功能来检测内存泄漏
信息来源:csdn C/C++ 编程语言的最强大功能之一便是其动态分配和释放内存,但是中国有句古话:“最大的长处也可能成为最大的弱点”,那么 C/C++ 应用程序正好印证了这句话.在 C/C+ ...
- Eclipse的调试功能的10个小窍门[转]
原文链接:http://www.importnew.com/6164.html 你可能已经看过一些类似“关于调试的N件事”的文章了.但我想我每天大概在调试上会花掉1个小时,这是非常多的时间了.所以非常 ...
- Eclipse的调试功能的10个小窍门
你可能已经看过一些类似“关于调试的N件事”的文章了.但我想我每天大概在调试上会花掉1个小时,这是非常多的时间了.所以非常值得我们来了解一些用得到的功能,可以帮我们节约很多时间.所以在这个主题上值得我再 ...
- C语言编译环境中的 调试功能及常见错误提示
文章目录 1 .调试功能 2 . 编译中的常见错误例析 3 .常见错误信息语句索引 1 .调试功能 1.常用健 <F10> : 激活系统菜单 <F6> : 将光标在编辑窗口和. ...
- Intellij IDEA调试功能使用总结
Intellij IDEA调试功能使用总结 这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的 ...
随机推荐
- Win10 UWP系列:更新UWP时注意的问题——TargetDeviceFamily
前几天把CurrencyExchanger提交到微软参加Master认证,结果没有通过,反馈了一些错误,看来微软检查还是比较仔细的. 错误主要有: Visual feedback helps user ...
- 用c#开发微信(5)自定义菜单设置工具 (在线创建)
读目录 1 使用 2 原理 3. 错误 上次写了<用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)>,有园友问到如何创建菜单的问题,今天就介绍下 ...
- [WCF编程]12.事务:服务事务编程(上)
一.设置环境事务 默认情况下,服务类和操作没有环境事务,即使客户端事务传播到服务端也是如此. 尽管强制事务流从客户端传播过来,但服务端的环境事务依旧为null.为了启用环境事务,每个操作必须告诉WCF ...
- 服务器Config文件不能查看的问题
由于某种需求,需要从IIS发布的服务中下载扩展名为config的文件,但是发布文件后,在浏览器无法查看文件.根据反馈的的错误提示,大致说config属于配置文件,处于安全考虑,不能随便浏览. 如果 ...
- 使用 Visual Studio Online 进行协同开发
Visual Studio Online(原来的 Team Foundation Service),是项目数据在云中的主页.在我们的云基础架构中只需数分钟便可启动并运行,无需安装或配置任何服务器.设置 ...
- Python 3.4 Library setup
matplotlib: https://pypi.python.org/pypi/matplotlib/1.4.3 Unofficial Windows Binaries for Python Ex ...
- javaweb学习总结(三十八)——事务
一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句 update from account set mone ...
- c中使用gets() 提示warning: this program uses gets(), which is unsafe.
今天在C代码中使用gets()时提示“warning: this program uses gets(), which is unsafe.”,然后这个程序还能运行,无聊的我开始查阅资料,为啥gets ...
- python征程2.0(python基础)
1.python中有一些基本规则的特殊字符. (1)#表示这后的字符为python注释. (2)\n标准的行分隔符. (3)\继续上一行.(也就是过长的语句可以使用反斜杠(\)分解成几行) ) and ...
- samba共享服务
方法一 1.安装samba:可以先检查下是否已经安装:rpm -qa | grep samba,没有的话自己安装下,这里介绍下基于RPM包的一种在线安装模式yumyum是一种快速安装模式,它会自动解决 ...
