专栏首页GreenLeavesJS框架设计之对象类型判断一种子模块

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等模块

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linq基础知识小记三

    1、子查询 Linq中的子查询思想和Sql中的子查询其实差不多, 对于方法语法,一个子查询包含在另一个子查询的Lambda表达式中,代码如下: string[]...

    郑小超.
  • Oracle 快速插入1000万条数据的实现方式

    1、使用dual配合connect by level create table BigTable as select rownum as id from du...

    郑小超.
  • Javascript深拷贝

    var oOriginal = { memNum: 1, // number ...

    郑小超.
  • 爬虫0050:selenium & phantomJS 无界神器selenium和phantomJS

    selenium是一套web网站自动化测试工具,主要通过命令行的操作完成常规可视化界面下的用户各种操作行为,因为其简单易学成本低,并且执行测试效率较高而在web...

    大牧莫邪
  • 2018-06-06selenium和phantomJS

    selenium是一套web网站自动化测试工具,主要通过命令行的操作完成常规可视化界面下的用户各种操作行为,因为其简单易学成本低,并且执行测试效率较高而在web...

    大牧莫邪
  • WDK驱动编译错误CN=WDKTestCert>

    rror Invalid argument <CN="WDKTestCert Qis,132035943314435562" | 25C85585...

    战神伽罗
  • 101岁黑人女数学家去世,美国登月幕后功臣曾被誉为“穿裙子的 computer”

    我们从小都听说过,新中国的第一颗人造卫星的各种数据,是通过工程师们“徒手”用算盘计算出来的。

    新智元
  • 超级 PowerBI 来了 各种外挂开启

    Power BI Premium 已经作为 Analysis Service 的超集存在。

    BI佐罗
  • 机器学习面试问题集(2018-3-13更新)

    http://blog.csdn.net/u011239443/article/details/76360294

    用户1621453
  • [机器学习算法]聚类学习

    在无监督学习中unsupervised learning中,训练样本的标记信息是未知的,其目标是通过对无标记训练样本的学习来揭示数据的内在性质及规律,为进一步的...

    TOMOCAT

扫码关注云+社区

领取腾讯云代金券