原文：詳解JavaScript變量類型判斷及domReady原理

我們知道，在開發JavaScript時候，經常要判斷JavaScript變量類型，此 JavaScript教程 詳細介紹JS變量的判斷方法及相關原理。

1.JavaScript類型的判斷：

　　js五種簡單數據類型有:null, undefined, boolean, number, string。

　　還有復雜的數據類型：Object,Function，RegExp,Date,自定義的對象，比如：Person等。

　　typeof一般用來判斷boolean,number,string，instanceof一般用來判斷對象類型。但它們都有缺陷。比如：firame里面的數組實例就不是父窗口的Array的實例，調用instanceof會返回false。（這題360校招時問過）。

　　typeof new Boolean(true)? ???// "object"? ?，包裝對象。boolean,number,string三種包裝對象，js高級程序編程里面有講。

　　有很多人使用typeof document.all來判斷是否為IE，其實這是很危險的，因為此屬性谷歌和火狐也喜歡，所以在谷歌瀏覽器下出現了這個情況：

typeof document.all? ? //undefined??但是，document.all? ? //HTMLAllCollection，用typeof判斷是undefined，但是可以讀取此屬性值。

　　但是現在可以使用Object.prototype.toString.call方法判斷類型。此方法可以直接輸出對象內部的[[Class]].但IE8及以下的window對象不能使用此方法。

可以使用? ?window == document??//??true? ?? ?document == window??// false? ?? ?IE6,7,8下。

　　nodeType? ???（ 1:元素 Element? ?? ???2:屬性 attribute? ?? ???3：文本??Text? ?? ???9：document）

　　jquery中判斷類型使用的方法：

　　class2type ={}

　　jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){

? ?? ???　　class2type [ "[object " + name + "]"??] = name.toLowerCase();

　　　　//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object 　　　　Array ]":array ......}

　　　　});

　　　　jQuery.type = function(obj){? ?? ?? ?? ? //如果obj是null，undefined等，就返回字符串"null","undefined"。如果不是，就調用toString方法，如果可以調用就判斷，出錯就返回object（IE低版本下的window,Dom等ActiveXobject對象）

　　　　return obj == null ? String(obj)??: class2type [ toString.call(obj) ]??|| "object";

　　}

2.domReady

js操作dom節點時，頁面必須構建好dom樹才行。因此，通常使用window.onload方法。但是onload方法是等所有資源加載結束后才會執行。而為了讓頁面能更快的響應用戶的操作，我們只需要dom樹構建完畢，就應該使用js操作。而不需要等待所有資源都加載結束（圖片,flash）。

因此出現了DOMContentLoaded事件，Dom樹構建完成后觸發。但是舊版本IE不支持，因此就有了hack。

if(document.readyState === "complete"){? ?//以防Dom文檔加載完成后才加載js文件。這時通過此判斷來執行fn方法（你要執行的方法）。因為文檔加載完成后，document.readyState的值為complete

? ?? ?? ?setTimeout(fn);? ?? ?//異步執行，可以讓它后面的代碼先執行。這里是jQuery里面的用法，可以不用理解。

}

else if(document.addEventListener){//支持DOMContentLoaded事件

? ?? ?? ?? ?document.addEventListener("DOMContentLoaded",fn,false);? ?//冒泡

　　　　window.addEventListener("load",fn,false);? ?//以防DOM樹構建好之后才加載js文件。這時不會觸發DOMContentLoaded事件（已經觸發結束了），只會觸發load事件

}

else{

　　document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全，有時會優先onload執行，有時不會。

　　　　if(document.readyState ==="complete"){

　　　　　　fn();

　　　　}

　　});

　　window.attachEvent("onload",fn);? ?//總會起到作用，以防其他監聽事件沒獲取到，這樣至少可以通過onload事件觸發fn方法。

　　var top = false;//看是否在iframe中

? ???try{//window.frameElement即為包含本頁面的iframe或frame對象。沒有則為null。

? ?? ?? ? top = window.frameElement == null && document.documentElement;

? ?? ?}catch(e){}

? ???if(top && top.doScroll){??//如果沒有iframe，并且是IE

? ?? ?? ?? ?(function doScrollCheck(){

? ?? ?? ?? ?? ?? ?? ?try{

　　　　　　　　　　top.doScroll("left");//IE下，如果Dom樹構建好，就可以調用html的doScroll方法　　　　　　　　　

　　　　　　　　}catch(e){

? ?? ?? ?? ?? ?? ?? ?? ?? ? return setTimeout(doScrollCheck,50);??//如果還沒構建好，則繼續監聽

? ?? ?? ?? ?? ?? ???}

? ?? ?? ?? ?? ?? ???fn();

? ?? ?? ?? ?})()

? ? }

}

fn方法中必須包含移除所有的綁定事件。

當然IE還可以使用script defer hack，原理就是：指定了defer的script會在DOM樹構建完后才執行。但是這需要添加額外的js文件，很少在單獨的庫里面用到。

使用原理：在文檔中添加script標簽，并用script.src = "xxx.js"，監聽script的onreadystatechange事件，當this.readyState == "complete"時，就執行fn方法。

也就是說，DOM構建好之后，xxx.js才會執行，它的this.readyState才會變成complete。加油！

本文來源：http://www.17javascript.com/

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的详解JavaScript变量类型判断及domReady原理 写得很好的全部內容，希望文章能夠幫你解決所遇到的問題。

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