使用Firebug和chrome-devToolBar調(diào)試頁面樣式或腳本是前端開發(fā)每天必做之事。這個開發(fā)神器到底能給我們帶來哪些更神奇的幫助呢？這幾天看的一些資料中給了我啟發(fā)，能不通過Firebug和chrome-devToolBar發(fā)現(xiàn)JS的全局對象的全部屬性呢？能不能發(fā)現(xiàn)document對象中含有哪些不常用而又需要深刻理解的屬性呢？

我們在此開8！

原創(chuàng)博文，轉(zhuǎn)載請標(biāo)明出處：http://www.cnblogs.com/dereksunok/p/4884460.html。

?

一.淺析for-in語句

for-in循環(huán)也被稱為“枚舉”，用在非數(shù)組對象的遍歷上，這個語句可以返回對象中的屬性或?qū)傩詫?yīng)的值。

從技術(shù)上將，你可以使用for-in循環(huán)數(shù)組（因為JavaScript中數(shù)組也是對象），但這是不推薦的。因為如果數(shù)組對象已被自定義的功能增強(qiáng)，就可能發(fā)生邏輯錯誤。另外，在for-in中，屬性列表的順序（序列）是不能保證的。所以最好數(shù)組使用正常的for循環(huán)，對象使用for-in循環(huán)。

有個很重要的?hasOwnProperty()?方法，當(dāng)遍歷對象屬性的時候可以濾掉從原型鏈上擴(kuò)展或繼承的屬性。

這里來看一個例子：

// 對象 var obj = {a: 2,b: 2,c: 1};// 給所有對象擴(kuò)展了一個方法if (typeof Object.prototype.other === "undefined") {Object.prototype.other = function () { };}

我們現(xiàn)在輸入?obj.other，得到的是一個自定義的擴(kuò)展方法。

?

二.一個極簡單對象的遍歷方法

1.案例代碼（1）

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

在firebug中運(yùn)行這段代碼得到如下結(jié)果：

?

代碼解釋：

我們在for-in中創(chuàng)建一個名為myattr的變量來枚舉出 對象obj中所有的屬性。從我們寫這段代碼的出發(fā)點(diǎn)來講，希望得的是 obj.a，obj.b，obj.c 三個屬性，結(jié)果卻多出一個obj.other，且對象obj有四個屬性。這時如果我們提出這樣的需求：我只要obj字面上定義的屬性，該如何處理呢？

現(xiàn)在我們使用?hasOwnProperty()?方法介入 for-in 循環(huán)，看看有什么結(jié)果。

?

2.案例代碼（2）

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

這時我們得到了我們想要的結(jié)果：

這里我們使用hasOwnProperty()?方法濾掉從原型鏈上擴(kuò)展或繼承的屬性。至于得到的 num = 4這個這個結(jié)果，細(xì)節(jié)請參考 Object.prototype 相關(guān)資料。

?

三.Javascript中內(nèi)置對象和宿主對象

1.內(nèi)置對象JavaScript 提供多個內(nèi)建對象，比如 String、Date、Array 等等。 對象只是帶有屬性和方法的特殊數(shù)據(jù)類型。有如下：

JS 對象 object
JS 數(shù)字
JS 字符串
JS 日期
JS 數(shù)組
JS 邏輯
JS 算數(shù)
JS 正則表達(dá)式

2.宿主對象可以理解為window?對象，基于計算機(jī)系統(tǒng)或瀏覽器能夠支持的功能，不同的瀏覽器支持的window對象。所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。 全局變量是 window 對象的屬性。 全局函數(shù)是 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深入學(xué)習(xí)javascript語言

再簡單的了解了for-in語句和js對象之后，我們自己來整理一點(diǎn)干貨！打開瀏覽器創(chuàng)建一個新標(biāo)簽頁，華麗的按下F12鍵。

1.看代碼，window對象里面到底有些啥。

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

此處注意：chrome瀏覽器下的結(jié)果和firebug下得到的略有不同，但這無傷大雅，畢竟不同瀏覽器廠商的需求出發(fā)點(diǎn)略有區(qū)別嘛。

2.再看document下面有哪些方法或?qū)傩浴＿@里生成的數(shù)據(jù)比較多，大家自己可以在本地寫寫看下。

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

這里之所以沒有使用hasOwnProperty()，因為document下有大量頂層對象繼承或擴(kuò)展來的方法或?qū)傩浴?/p>

3.再看location。

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

?

六.小結(jié)

我們從for-in說起，再聊到hasOwnProperty()和js的對象，通過一些簡單的代碼就能夠輕松獲得javascript的“參考手冊”。想到這里，再也不愿去看什么JScript.chm這個艸淡的文檔了！

當(dāng)然，如上所述確實有些玩笑之意，但是不得不再給自己一些勉勵，書要多看，多練，多想，說不定哪天理想實現(xiàn)了呢？

糧食大米已經(jīng)分享完畢，大家燉著吃，蒸著吃，隨便！

?

原創(chuàng)博文，轉(zhuǎn)載請標(biāo)明出處：http://www.cnblogs.com/dereksunok/p/4884460.html。

轉(zhuǎn)載于:https://www.cnblogs.com/dereksunok/p/4884460.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。