教你如何使用firebug调试功能了解javascript闭包和this


Posted in Javascript onMarch 04, 2015

对于跟我一样,自学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——脚本

教你如何使用firebug调试功能了解javascript闭包和this

右侧监控栏可以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()是函数声明,因为解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)

教你如何使用firebug调试功能了解javascript闭包和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的方法总结了,希望大家能够喜欢

Javascript 相关文章推荐
javascript进行四舍五入方法汇总
Dec 16 Javascript
javascript中数组方法汇总
Jul 07 Javascript
js微信分享API
Oct 11 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
jQuery插件开发的五种形态小结
Mar 04 #Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 #Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 #Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 #Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 #Javascript
JS实现文字放大效果的方法
Mar 03 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP 上传文件大小限制
2009/07/05 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
Jquery性能优化详解
2014/05/15 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
什么是会话Bean
2015/05/14 面试题
2014婚礼司仪主持词
2014/03/14 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
文秘个人求职信范文
2014/04/22 职场文书
项目合作意向书模板
2014/07/29 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL