详解JavaScript变量类型判断及domReady原理 写得很好
原文：详解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原理 写得很好相关推荐
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- 详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- python变量定义大全_详解python变量与数据类型
这篇文章我们学习 Python 变量与数据类型 变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念,变量可以通过变量名访问.在 Python 中 变量命名规定,必须是大小写英文,数字 ...
- js php 数据类型判断,【js基础】变量类型判断
类型判断方法比较: 如果需要想详细了解,请看下文: 注:原封不动复制备份,防止删帖 在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, B ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
- 详解JavaScript对象深拷贝
详解JavaScript对象深拷贝 在几乎所有编程语言中,对象都以引用形式保存给变量.复制给其他变量.JavaScript语言也是如此.因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个 ...
- 详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
- 详解 JavaScript 的 IIFE 语法
详解 JavaScript 的 IIFE 语法 IIFE 语法 IIFE 语法的一些变体 小括号去哪儿了? 命名的 IIFE 防止连接文件时出现问题 使用箭头函数代替函数表达式 一些不推荐的立即调用函 ...
最新文章
- js、jQuery、layer实现弹出层的打开、关闭
- 打破认知：程序设计 #x3D; 算法 + 数据结构？
- 下一跳网关和转发接口的使用情况
- 如何编写与非贪婪匹配的正则表达式？ [重复]
- 别在被骗了！！！！！！
- 【渝粤题库】陕西师范大学200751 《操作系统》作业
- python生成表达式_说说 Python 的生成器表达式
- Merkle Patricia Tree 详解
- C/C++文件字符串处理
- python中if name == main_python中if __name__ == '__main__': 的解析
- gpio能测Linux启动时间,linux – 如何自动测量新建图像的启动时间...
- linux安装包安装nginx,Linux tar包安装Nginx
- 二元二次方程例题_二元二次方程组解法例题
- allgro pcb铜皮编辑_干货技巧-Allegro如何设置整体铜皮连接或设置单个管脚连接方式...
- firefox渗透安全插件汇总
- 单像空间后方交会的程序实现
- Beautiful Soup 4.2.0 文档¶
- 如何看待程序员“面试造火箭、工作拧螺丝”？| 畅言
- 跳槽or裸辞？2022年真不建议···
- torch把存放tensor的整个list都转为tensor ValueError}only one element tensors can be converted to Python scal