JS 类型检测

昵称10504424 2016-01-13

展开全文

在javascript中，typeof 和 instanceof 是用来判断数据类型比较通用的两个方法，这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案。

typeof

typeof 返回一个表达式的数据类型的字符串，返回结果为javascript中的基本数据类型，包括：number、boolean、string、object、undefined、function等6种数据类型。

typeof 100; //number
typeof (1==1); //boolean
typeof 'onepixel'; //string
typeof {} ; //object
typeof onepixel; // undefined
typeof parseInt; // function
typeof [];//object
typeof new Date(); //object

可以看出，typeof 可以准确的判断除object以外的基础数据类型，但不能区分object类型的具体类型，比如 Array 、Date 以及自定义类。

instanceof

instanceof 本意是用来判断 A 是否为 B 的实例对象，表达式为：A instanceof B，如果A是B的实例，则返回true,否则返回false。在这里需要特别注意的是：instanceof检测的是原型，那它是怎么检测的呢，我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        //A的内部属性__proto__指向B的原型对象
        return true;
    }
    return false;
}

从上述过程可以看出，当A的__proto__ 指向B的prototype时，就认为A就是B的实例对象，我们再来看几个例子：

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true

function Person(){};
new Person() instanceof Person;

[] instanceof Object; //true
new Date() instanceof Object;//tru
new Person instanceof Object;//true

从上面的例子中，我们发现虽然instanceof能够正确判断[] 是Array的实例对象，但不能辨别 [] 不是Object的实例对象，为什么呢，这还需要从javascript的原型链说起，我们首先来分析一下[]、Array、Object 三者之间的关系，从instanceof判断能够得出：[].__proto__ ->Array.prototype，而Array.prototype.__proto__指向了Object.prototype，Object.prototype.__proto__ 指向了null,标志着原型链的结束。（ps:关于JS原型链请阅读：浅谈javascript原型和原型链）因此，[]、Array、Object就形成了一条原型链：

从原型链可以看出，[]的__proto__最终指向了Object.prototype，类似的new Date()、new Person() 也会形成这样一条原型链，因此，我们用 instanceof 也不能完全精确的判断object类的具体数据类型。

优化方案

对于这个问题，在阅读jQuery源码时，发现了一个比较好的解决方案，由于源码之间存在相互调用不便于阅读和理解，因此，按照其思路进行了整理和封装，代码如下：

(function(){

    var class2type = {};
    var typeList = "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " );

    typeList.eachEach(function(item){
        class2type[ "[object " + item + "]" ] = item.toLowerCase();
    }

    return {
        getObjType:function(obj) {
            if ( obj == null ) {
                return obj + "";
            }
            
            if(typeof obj === "object" || typeof obj === "function"){

                class2type[ toString.call( obj ) ] || "object"

            }else {
                return typeof obj;
            }
        }
    }
})()