JS框架设计之对象类型判断一种子模块

Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型。基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型,object是复杂数据类型,其中Object,Array,Function属于引用类型(对象数据类型)。

基于这么多数据类型,所以JS就自带有类型判定的方法,typeof  用来检测基本数据类型,instanceof 用来检测对象数据类型,但是JS自带的这两套识别机制并不靠谱,所以产生了isXXX一系列来判断数据类型的方法,就拿typeof来说,他只能粗略的识别出string、number、boolean、function、undefined、object这6中数据类型,无法识别Null,RegExpAragument等细分对象类型

     /*
     Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型。基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型,
     object是复杂数据类型,其中Object,Array,Function属于引用类型(对象数据类型)。基于这么多数据类型,所以JS就自带有类型判定的方法,typeof  用来检测基本数据类型,
     instanceof 用来检测对象数据类型,但是JS自带的这两套识别机制并不靠谱,所以产生了isXXX一系列来判断数据类型的方法,就拿typeof来说,
     他只能粗略的识别出string、number、boolean、function、undefined、object这6中数据类型,无法识别Null,RegExpAragument等细分对象类型
     */
    //下面就是自带的Js识别系统所带的坑

    console.log(typeof null);//输出:object
    console.log(typeof document.childNodes);//safari 输出:function
    console.log(document.createElement("embed"));//ff3-10  输出:function,其他浏览器都输出object
    console.log(document.createElement("object"));//ff3-10  输出:function,其他浏览器都输出object
    console.log(document.createElement("applet"));//ff3-10  输出:function,其他浏览器都输出object
    console.log(typeof /\d/i);//在实现了ecma262v4的浏览器上输出:function
    console.log(typeof window.alert);//IE678  输出:object, 其他浏览器输出:function
    //以上就是typeof的坑

    var iframe=document.createElement("iframe");
    document.body.appendChild(iframe);
    xArray=window.frames[window.frames.length-1].Array;
    var arr=new xArray(1,2,3);
    console.log(arr);//输出:1,2,3
    console.log(arr instanceof Array);//输出:false
    console.log(arr.constructor===Array);//输出:false
    //以上是instnceof的坑,只要原型上存在此对象的构造函数,那么就返回true,但是如果跨文档比较,iframe里面的数组实例就不是父窗口里面的Array的实例

    window.onload=function () {
        console.log(window.constructor);//IE67 undefined 其他object
        console.log(document.constructor);//IE67 undefined 其他object
        console.log(document.body.constructor);//IE67 undefined 其他object
        console.log((new ActiveXObject("Microsoft.XMLHttp")).constructor);//IE6789 undefined
    }
    //以上是constructor的坑,产生以上问题的原因是在旧版本IE下DOM和BOM是没有暴露出来的

     console.log(isNaN("aaa"));//输出:true
     console.log(isNaN(new Object()));//输出:true
    //isNaN这个方法非常不靠谱,当我们传入字符串和对象时,输出也是true，这对我们的序列化是非常不利的

    if(typeof window.ActiveXObject!="undefined")
    {
        var  xhr=new ActiveXObject("Msxml2.XMLHTTP");
        console.log(typeof xhr.abort);//输出:unknown
    }
    //以上是在IE下的typeof返回unknown的情况

    /*
    之前大多数人用document.all是否存在来判定IE,因为用document.all来取得页面中的元素是不错的注意,但是这个方法其他浏览器也觊觎了好久,
    于是就有了Chrome下的闹剧
     */
    console.log(typeof document.all); //IE78中输出:object,在Chrome中输出:undefined
    console.log(document.all);//在Chrome中,虽然typeof输出的是:undefined，但是document.all却能获取到所有的网页元素,输出:HTMLAllCollection[6]

   /*
    以下是jQuery判断js数据类型的方法$.type
     */
    var jQuery={};
    var class2Type={};
    var dataType=["Boolean","Number","String","Function","Array","Date","RegExpObject","Function"];
    for(var i=0;i<dataType.length;i++)
    {
        class2Type["[object "+dataType[i]+"]"]=dataType[i].toLowerCase();
    }
    jQuery.type=function (obj) {
        return obj==null?obj+"":class2Type[Object.prototype.toString.call(obj)] || "object";
    }

    var aa=false;
    function bb(){}
    alert(Object.prototype.toString.call(aa))//输出:[object Number]
    alert(jQuery.type(bb))//输出:number

    var mass={};
    var class2Type={
        "[objectHTMLDocument]":"Document",
        "[objectHTMLCollection]":"NodeList",
        "[objectStaticNodeList]":"NodeList",
        "[obejctIXMLDOMNodeList]":"NodeList",
        "[objectDOMWindow]":"Window",
        "null":"Null",
        "NaN":"NaN",
        "undefined":"Undefined"
    }
    var toString=class2Type.toString;
    var AllDataType=["Boolean","Number","String","Function","Array","Date","RegExp","Error","Symbol","Arguements","Window","Document"];
    //填充class2Type集合用于判断js数据类型,通过Object.prototype.toString.call()来判断解决typeof和instanceof"不靠谱"的问题
    //class2Type这个映射几乎将所有的对象类型一网打尽
    for(var i=0;i<AllDataType.length;i++)
    {
        class2Type["[object "+AllDataType[i]+"]"]=AllDataType[i];
    }
    mass.type=function (obj,str) {
        //1、当传入的对象不等于null或者自己的类型不等于自己的时候,直接去class2Type中找自己的类型,
        // 2、如果找不到做Object.prototype.toString转换,再去class2type中找
        //3、如果在class2type中找不到类型,那么找传入对象的nodeName(传入的参数可能是html元素节点)
        //4、如果上面的条件都不满足那么就把result设为"#"
        var result=class2Type[(obj==null || obj!==obj?obj:toString.call(obj))] || obj.nodeName || "#";
        //兼容旧版本浏览器处理个别情况,如window,opera
        //利用IE678中window==document为true,document==window为false的神奇特性
        if(result.charAt(0)=="#")
        {
            if(obj==obj.document && obj.document!=obj)
            {
                result="Window";
            }
            else if(obj.nodeType===9)
            {
                result="Document";
            }
            else if(obj.callee)
            {
                result="Arguements";
            }
            else if(isFinite(obj.length) && obj.item)
            {
                result="NodeList";
            }else
            {
                result=toString.call(obj).slice(8,-1);
            }
        }
        if(str)
        {
            return str===result;
        }
        return result;
    }
    //type方法直接用toString.call(obj)做键,直接从事先存好的映射中取出。只有在IE6、IE7、IE8中才废一些周折处理window、document
    //Arguement、nodeList等模块