使用Firebug或chrome-devToolBar深入学习javascript语言核心

使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事。这个开发神器到底能给我们带来哪些更神奇的帮助呢？这几天看的一些资料中给了我启发，能不通过Firebug和chrome-devToolBar发现JS的全局对象的全部属性呢？能不能发现document对象中含有哪些不常用而又需要深刻理解的属性呢？

我们在此开8！

原创博文，转载请标明出处：http://www.cnblogs.com/dereksunok/p/4884460.html。

 

一.浅析for-in语句

for-in循环也被称为“枚举”，用在非数组对象的遍历上，这个语句可以返回对象中的属性或属性对应的值。

从技术上将，你可以使用for-in循环数组（因为JavaScript中数组也是对象），但这是不推荐的。因为如果数组对象已被自定义的功能增强，就可能发生逻辑错误。另外，在for-in中，属性列表的顺序（序列）是不能保证的。所以最好数组使用正常的for循环，对象使用for-in循环。

有个很重要的 hasOwnProperty() 方法，当遍历对象属性的时候可以滤掉从原型链上扩展或继承的属性。

这里来看一个例子：

// 对象
var obj = {
    a: 2,
    b: 2,
    c: 1
 };
 
 // 给所有对象扩展了一个方法
 if (typeof Object.prototype.other === "undefined") {
    Object.prototype.other = function () { };
 }

我们现在输入 obj.other，得到的是一个自定义的扩展方法。

 

二.一个极简单对象的遍历方法

1.案例代码（1）

var num = 0;
for( var myattr in obj){
    console.log(myattr);
    num++;
}
console.log(num);

在firebug中运行这段代码得到如下结果：

 

代码解释：

我们在for-in中创建一个名为myattr的变量来枚举出 对象obj中所有的属性。从我们写这段代码的出发点来讲，希望得的是 obj.a，obj.b，obj.c 三个属性，结果却多出一个obj.other，且对象obj有四个属性。这时如果我们提出这样的需求：我只要obj字面上定义的属性，该如何处理呢？

现在我们使用 hasOwnProperty() 方法介入 for-in 循环，看看有什么结果。

 

2.案例代码（2）

var num = 0;
for( var myattr in obj){
   if (obj.hasOwnProperty(myattr)) { // 过滤
      console.log(myattr);
   } 
    num++;
}
console.log(num);

这时我们得到了我们想要的结果：

这里我们使用hasOwnProperty() 方法滤掉从原型链上扩展或继承的属性。至于得到的 num = 4这个这个结果，细节请参考 Object.prototype 相关资料。

 

三.Javascript中内置对象和宿主对象

1.内置对象JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。有如下：

JS 对象 object
JS 数字
JS 字符串
JS 日期
JS 数组
JS 逻辑
JS 算数
JS 正则表达式

2.宿主对象可以理解为window 对象，基于计算机系统或浏览器能够支持的功能，不同的浏览器支持的window对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一。有如下

JS Window
JS Screen
JS Location
JS History
JS Navigator
JS PopupAlert
JS Timing
JS Cookies

这里属于概念性的介绍，可以参考 http://www.w3school.com.cn/js/js_objects.asp

 

四.全新的参考手册：使用Firebug或chrome-devToolBar深入学习javascript语言

再简单的了解了for-in语句和js对象之后，我们自己来整理一点干货！打开浏览器创建一个新标签页，华丽的按下F12键。

1.看代码，window对象里面到底有些啥。

var num = 0;
for(var myproto in window){
    num++;
    if(window.hasOwnProperty(myproto )){
       console.log(myproto);
    }
}
console.log(num);

此处注意：chrome浏览器下的结果和firebug下得到的略有不同，但这无伤大雅，毕竟不同浏览器厂商的需求出发点略有区别嘛。

2.再看document下面有哪些方法或属性。这里生成的数据比较多，大家自己可以在本地写写看下。

var num = 0;
for(var myproto in document){
    num++;
    console.log(myproto);
}
console.log(num);

这里之所以没有使用hasOwnProperty()，因为document下有大量顶层对象继承或扩展来的方法或属性。

3.再看location。

var num = 0;
for(var myproto in location){
    num++;
    console.log(myproto);
}
console.log(num);

 

六.小结

我们从for-in说起，再聊到hasOwnProperty()和js的对象，通过一些简单的代码就能够轻松获得javascript的“参考手册”。想到这里，再也不愿去看什么JScript.chm这个艹淡的文档了！

当然，如上所述确实有些玩笑之意，但是不得不再给自己一些勉励，书要多看，多练，多想，说不定哪天理想实现了呢？

粮食大米已经分享完毕，大家炖着吃，蒸着吃，随便！

 

原创博文，转载请标明出处：http://www.cnblogs.com/dereksunok/p/4884460.html。