这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了教你如何使用 firebug 调试功能了解 javascript 闭包和 this,javascript 的调试也是一个比较大的难点,很多基础的东西都需要自己去摸索,这里将自己的经验分享给大家,希望对大家能够有所帮助
对于跟我一样,自学 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'。
逐步执行可以非常清晰的看到整个代码的运行逻辑。
来源: http://www.phperz.com/article/17/0412/272485.html