教你如何使用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 相关文章推荐
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JSON的parse()方法介绍
Jan 31 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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中检查文件或目录是否存在的代码小结
2012/10/22 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Python使用pymysql小技巧
2017/06/04 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python和JavaScript哪个容易上手
2020/06/23 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
八一建军节活动方案
2014/02/10 职场文书
小班开学寄语
2014/04/04 职场文书
安全横幅标语
2014/06/09 职场文书
个人授权委托书格式
2014/08/30 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
英语邀请函范文
2015/02/02 职场文书
银行先进个人总结
2015/02/15 职场文书
公司规章制度范本
2015/08/03 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
Python如何使用循环结构和分支结构
2022/04/13 Python