JavaScript变量类型判断及domReady原理

汪星人

我们知道，在开发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。加油！