使用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。

轉載于:https://www.cnblogs.com/dereksunok/p/4884460.html

總結

以上是生活随笔為你收集整理的使用Firebug或chrome-devToolBar深入学习javascript语言核心的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。