JavaScript中基本类型包含Undefined、Null、Boolean、Number、String以及Object引用类型。
基本类型可以通过typeof来进行检测,对象类型可以通过instanceof来检测。
但这两检测方式本身存在大量的陷阱,因此需要进行兼容处理。

对于typeof,只能识别出undefined、object、boolean、number、string、function这6种数据类型,无法识别Null等细分的对象类型。
typeof本身存在的陷阱:
typeof null; 结果为"object"
typeof document.all; 在IE外的其他现代浏览器下会返回"undefined",但实际上是可用的(该方法被大量用作判断IE,因此浏览器厂商也有对应规则)。
typeof document.childNodes; 在safari下结果为"function"
typeof document.createElement('embed'); 在firefox下结果为"function"
typeof document.createElement('object'); 在firefox下结果为"function"
typeof document.createElement('applet'); 在firefox下结果为"function"
typeof window.alert; 在IE678下为"object",
IE678下有个HACK技巧:window==document 在IE678下为true(而document==window为false)。

对于typeof,在IE下判断ActiveX对象的方法时还会返回unknow的情况,例如:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script>
window.onload=function(){
if(window.ActiveXObject){
var xhr=new ActiveXObject("Msxml2.XMLHTTP");
document.body.innerHTML=(typeof xhr.abort);
}
}
</script>
</head>
<body><div class="show">HELLO</div></body>
</html>

typeof在IE下判断ActiveX方法的时候会返回unknow

对于如上的这个IE特性,可以用来判断VBScript方法是否存在:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script type="text/VBScript">
function vbf(a,b)
vbf = a+b
end function
</script>
<script type="text/javascript">
window.onload=function(){
// 如下在IE下为"unknow"
document.body.innerHTML=(typeof vbf);
}
</script>
</head>
<body><div class="show">HELLO</div></body>
</html>

判断VBScript方法

对于instanceof,原型上存在此对象的构造器就会返回true,但有如下陷阱:
跨文档的iframe里的数组实例不是父窗口的Array的实例:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script>
window.onload=function(){
document.body.appendChild(document.createElement("iframe"));
var frame=window.frames[window.frames.length-1];
// IE678无法获取
if("Array" in frame){
var fArray = frame.Array;
var a=new fArray(1);
alert(a instanceof Array); // false
alert(a.constructor == Array); // false
}
}
</script>
</head>
<body><div class="show">HELLO</div></body>
</html>

测试跨文档Array实例的类型判断

对于对象的constructor方法的陷阱:
在IE67下window.constructor、document.constructor等BOM与DOM对象的constructor属性是未暴露的。
在IE6789下ActiveXObject对象的constructor方法也是未暴露的。

通过如上的分析,先定义一个对象用于内建对象的字符串名称的类型映射:

     var class2type={
"[object Array]":"array",
"[object Boolean]":"boolean",
"[object Date]":"date",
"[object Function]":"function",
"[object Number]":"number",
"[object Object]":"object",
"[object RegExp]":"regexp",
"[object String]":"string"
};

然后通过Object.prototype.toString这个方法来输出对象内部对应的字符串名称来判断:

     function type(obj){
return obj == null ? String(obj) : class2type[Object.prototype.toString.call(obj)] || "object";
}

对于数字的判断,首先要判断是否为数字类型(isNaN),其次还要判断是否为数字中的极值(isFinite):

 // 只要可以转换为运算数字.
function isNumberic(obj){
return !isNaN(parseFloat(obj)) && isFinite(obj);
}

在Jquery2.1中,对数字的判断更加精简,如下所示:

 function isNumberic(obj){
return obj - parseFloat(obj) >= 0;
}

对于window对象的判断,在JQuery 1.7.2中判断比较简单,通过检查obj.window==obj来判断,
如果使用Object.prototype.toString,因为window对象是宿主对象,非ECMA规范对象,因此返回的字符串名可能如下:
IE678      返回[object Object]
IE9、FF   返回[object Window]
Chrome   返回[object global]
Safari      返回[object DOMWindow]
再通过如上的对于IE678的 (obj===obj.document&&obj.document!==obj) 来判断IE678下的window对象,最后实现如下:

 // 通过Object.prototype.toString判断,但IE678下通过HACK判断.
function isWindow(obj){
return obj != null && (/Window|global/.test(Object.prototype.toString.call(obj))||(obj==obj.document&&obj.document!=obj));
}

另外通常需要实现一个方法,判断一个参数是否为字面量{}创建的对象或new Object()创建的对象,
需要先排除原生对象,排除DOM对象,排除window对象,
再需要判断对象的原型是否存在isPrototypeOf方法,不存在也排除(注意捕获异常)。

综上所述,整理后的代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script type="text/javascript">
var class2type={
"[object Array]":"array",
"[object Boolean]":"boolean",
"[object Date]":"date",
"[object Function]":"function",
"[object Number]":"number",
"[object Object]":"object",
"[object RegExp]":"regexp",
"[object String]":"string"
};
function type(obj){
return obj == null ? String(obj) : class2type[Object.prototype.toString.call(obj)] || "object";
}
function isFunction(obj){
// 这样判断解决了FF下对embed、object、applet的typeof返回"function"的陷阱.
return type(obj) === "function";
}
function isArray(obj){
// 解决了instanceof Array不能对iframe中的Array对象正确判断的陷阱.
return type(obj) === "array";
}
function isNaN(obj){
return obj !== obj;
}
function isNull(obj){
return obj === null;
}
function isNull2(obj){
return type(obj) === "null";
}
function isUndefined(obj){
return obj === void 0;
}
function isUndefined2(obj){
return type(obj) === "undefined";
}
// 只要可以转换为运算数字.
function isNumberic(obj){
return !isNaN(parseFloat(obj)) && isFinite(obj);
}
// Number.NEGATIVE_INFINITY-Number.NEGATIVE_INFINITY为NaN,经过判断后返回false.
function isNumberic2(obj){
return obj - parseFloat(obj) >= 0;
}
// 通过Object.prototype.toString判断,但IE678下通过HACK判断.
function isWindow(obj){
return obj != null && (/Window|global/.test(Object.prototype.toString.call(obj))||(obj==obj.document&&obj.document!=obj));
}
function isPlainObject(obj){
if(!obj||type(obj)!=="object"||obj.nodeType||isWindow(obj)){
return;
}
try{
// 存在构造函数但最近的原型对象中不存在isPrototypeOf这个Object原型特有属性。
if(obj.constructor&&!Object.prototype.hasOwnProperty.call(obj.constructor.prototype,"isPrototypeOf")){
return false;
}
}
catch(e){
// IE678都有可能在这里抛出异常,当obj为一些没有暴露constructor的原生对象的时候.
return false;
}
var key;
for(key in obj){}
// for in 循环先枚举非继承属性,再枚举继承属性.
// 如果对象的最后一个属性是非继承属性,那么所有属性都是非继承属性.
return key === undefined || Object.prototype.call(obj,key);
}
window.onload=function(){
/* 进行一些测试 */
var br="<br/>"
var nframe=document.body.appendChild(document.createElement("iframe"));
var frame=window.frames[window.frames.length-1];
nframe.style.display="none";
// IE678无法获取
if("Array" in frame){
var fArray = frame.Array;
var a=new fArray(1);
document.body.innerHTML += "instanceof判断Array在跨框架下的结果:" + (a instanceof Array) + br; // false.
document.body.innerHTML += "通过原型的toString方法判断的结果:" + isArray(a) + br; // true.
}
document.body.innerHTML += "window:" + isWindow(window) + br; // true.
document.body.innerHTML += "new Object:" + isPlainObject({}) + br;
}
</script>
</head>
<body><div class="show">HELLO</div></body>
</html>

JavaScript 类型判断 —— typeof 以及 instanceof 中的陷阱的更多相关文章

  1. JavaScript类型判断instanceof与typeof对比

    经常有人会在JavaScript里写如下的方法: function checkType() { var s1 = 123; var s2 = "OK"; if (s1 instan ...

  2. JS类型判断typeof PK {}.toString.call(obj)

    参考链接:https://www.talkingcoder.com/article/6333557442705696719 先看typeof <!doctype html> <htm ...

  3. JavaScript类型判断

    几种方法:typeof,instanceof,Object.prototype.toString,constructor,duck type ES6引入了一种新的原始数据类型Symbol,表示独一无二 ...

  4. JavaScript类型判断详解(Object.prototype.toString.call()方法进行数据类型的可靠判断)

    前言 在编写一些类库中,我们经常需要判断一些未知的用户的输入和配置,故而需要进行一系列的类型判断.故而总结下JS是如何进行类型判断的 typeof typeof操作符返回一个字符串,表示未经计算的操作 ...

  5. JS基础-数据类型判断typeof、instanceof、Object.prototype.toString

    typeof用在基本数据类型和函数时,返回其对应类型的描述,对于引用类型都返回为object. instanceof无法判断基本数据类型,对于引用类型数据,返回其其对应类型. Object.proto ...

  6. javascript类型判断方法

    判断javascript中的类型,共有四种常用的方法 var a=6; var b="str"; var c=true; var arr=[]; typeof 用于基本类型的判断 ...

  7. javascript类型判断最佳实践

    javascript有8种数据类型 值类型 Number Null Undefined String Symbol Boolean BigInt 引用类型 Object Array Function ...

  8. javaScript 类型判断

    直接上例子: 1 判断是否为数组类型 2 判断是否为字符串类型 3 判断是否为数值类型 4 判断是否为日期类型 5 判断是否为函数 6 判断是否为对象 1 判断是否为数组类型 linenum < ...

  9. JavaScript 类型判断的那些事

    先准备几个变量 var a = "abcde."; var b = 222; var c= [1,2,3]; // 或者 new Array() var d = new Date( ...

随机推荐

  1. java中获得IP地址

    public class IPTest { public static void main(String[] args) { try{ // 获取计算机名 String name = InetAddr ...

  2. C#调用cmd程序,读取结果

    示例,调用cmd执行PING命令,读取结果,代码如下: using System; using System.Collections.Generic; using System.Linq; using ...

  3. 3.SQL*Plus命令

    3.1SQL*Plus与数据库的交互 主要用来数据库查询和数据处理的工具. 3.2SQL*Plus运行环境设置 3.2.1SET命令概述 用户可以使用SET命令设置SQL*Plus的运行环境,SET命 ...

  4. UITextField 对输入金额的约束

    [2016/1/18更新] -- 五个人辛辛苦苦干了一年的项目终于上线了,今天有空看了一下正则表达式教程,然后开始rebuild之前的种种对字符串的约束,首先就从这个金额输入框开始吧,修改后的代码如下 ...

  5. c#equals相关

    1.==是直接比较值类型的值或引用类型的引用地址,但==不能用于struct,struct只能用equals来比较.==一般情况下与object.equals得到的结果是相等的. 2.Referenc ...

  6. 关于Java中的选择排序法和冒泡排序法

    一,这种方法是直接传入一个数组进行排序(选择排序法) public static void selectSort(int arr[]){ for (int i = 0; i < arr.leng ...

  7. java_设计模式_状态模式_State Pattern(2016-08-16)

    定义: 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 类图: 状态模式所涉及到的角色有: ● 环境(Context)角色,也成上下文:定义客户端所感兴趣的接口,同时维护一个 ...

  8. (转)Android开发:性能最佳实践-管理应用内存

    翻自:http://developer.android.com/training/articles/memory.html 在任何软件开发环境中,RAM都是宝贵的资源,但在移动操作系统中更加珍贵.尽管 ...

  9. jsp页面 使用c 标签的 varStatus 属性和 index 解决一行显示多少个 然后进行自动换行

    jsp页面显示,一行有三条记录,自动换行 <c:forEach items="${slist}" var="s" varStatus="stat ...

  10. svn服务器时间与本地时间不同步解决

    在用svn的时候,由于svn的时间与本地不同步,导致每次看log总是需要对时间. 今天修改了svn服务器时间与本地同步.只需要修改svn服务器时间与本地时间相同即可,但要主要修改时区,不然会出现时间又 ...