判断javascript变量类型的种种方法比较

1. typeof 只能区分出Number,String,Boolean,function,Object等几个原始类型,而Date,Array,Object,RegExp,Function都是Object.


2. instanceof 不能用在Number,String,Boolean上,只能用来判断Object类型具体是Date,Array,Object,RegExp,Function中的哪种.


3. constructor 适用于Number,String,Boolean,Date,Array,Object,RegExp,Funcntion

   缺点是:在检测跨框架(cross-frame)页面中的数组时,会失败。原因就是在不同框架(iframe)中创建的数组不会相互共享其prototype属性。

4. 跨原型链调用toString()方法:Object.prototype.toString()。可以解决上面的跨框架问题。例如:

    var iframe_arr = new window.frames[0].Array;
    console.log( "iframe_arr.toString==='[object Array]':" +                             (Object.prototype.toString.call(iframe_arr)=== "[object Array]" ));
               //output:iframe_arr.toString==='[object Array]':true


Tips:

 //某大牛依据上面这个方法设计的一个很好的获取类型的方法如下所示

function getType(obj) {
return Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1];
}


详细的实验代码如下

<! DOCTYPE HTML>
< html>
< head>
< meta charset= "utf-8" />
< title> 各种检查javascript 变量类型的方法 </title >
</ head>
< body>
        < iframe></ iframe >
</ body>
< script>
        var number = 3.2;
        var string = "789" ;
        var date = new Date();
        var array = [];
        var object = {};
        var regExp = /^a/;
        var func = function () {
              console.log( "func" )
       };
        var bool = false ;

       ( function testTypeOf() {
              console.log( "typeof number :" + (typeof number));
              console.log( "typeof string :" + (typeof string));
              console.log( "typeof bool :" + (typeof bool));
              console.log( "typeof date :" + (typeof date));
              console.log( "typeof array :" + (typeof array));
              console.log( "typeof object :" + (typeof object));
              console.log( "typeof regExp :" + (typeof regExp));
              console.log( "typeof func :" + (typeof func));
               /*
              output:
              typeof number :number
              typeof string :string
              typeof bool :boolean
              typeof date :object
              typeof array :object
              typeof object :object
              typeof regExp :object
              typeof func :function
           typeof 只能区分出Number,String,Boolean,function,Object等几个原始类型,而Date,Array,Object,RegExp,Function都是Object
               */
       }()); //如查这里漏掉了分号,就可能会在其它地方加上分号引发错误,所以不能漏掉分号
       ( function testInstanceof() {
              console.log( "number instanceof Number:" + (number instanceof Number));
              console.log( "string instanceof String:" + (string instanceof String));
              console.log( "bool instanceof Boolean:" + (bool instanceof Boolean));
              console.log( "date instanceof Date:" + (date instanceof Date));
              console.log( "array instanceof Array:" + (array instanceof Array));
              console.log( "object instanceof Object:" + (object instanceof Object));
              console.log( "regExp instanceof RegExp:" + (regExp instanceof RegExp));
              console.log( "func instanceof Function:" + (func instanceof Function));
               /*
              output:
              number instanceof Number:false
              string instanceof String:false
              bool instanceof Boolean:false
              date instanceof Date:true
              array instanceof Array:true
              object instanceof Object:true
              regExp instanceof RegExp:true
              func instanceof Function:true
              instanceof 不能用在Number,String,Boolean上,只能用来判断Object类型具体是Date,Array,Object,RegExp,Function中的哪种
               */
       }());
    
       ( function testconstructor() {
              console.log( "number.constructor === Number:"
                           + (number.constructor === Number));
              console.log( "string.constructor === String:"
                           + (string.constructor === String));
              console.log( "bool.constructor === Boolean:"
                           + (bool.constructor === Boolean));
              console.log( "date.constructor === Date:" + (date.constructor === Date));
              console.log( "array.constructor === Array:"
                           + (array.constructor === Array));
              console.log( "object.constructor === Object:"
                           + (object.constructor === Object));
              console.log( "regExp.constructor === RegExp:"
                           + (regExp.constructor === RegExp));
              console.log( "func.constructor === Function:"
                           + (func.constructor === Function));
               /*
              output:
              number.constructor === Number:true test7.html:68
              string.constructor === String:true test7.html:69
              bool.constructor === Boolean:true test7.html:70
              date.constructor === Date:true test7.html:71
              array.constructor === Array:true test7.html:72
              object.constructor === Object:true test7.html:73
              regExp.constructor === RegExp:true test7.html:74
              func.constructor === Function:true
              constructor 适用于Number,String,Boolean,Date,Array,Object,RegExp,Funcntion
          缺点是:但是检测在跨框架(cross-frame)页面中的数组时,会失败。原因就是在不同框架(iframe)中创建的数组不会相互共享其prototype属性。
               */
       }());
       ( function testCrossFrame() {
               var iframe_arr = new window.frames[0].Array;
              console.log( "[crossframe] typeof iframe_arr:" + ( typeof iframe_arr));
              console.log( "[crossframe] iframe_arr instanceof Array:"
                           + (iframe_arr instanceof Array)); // false
              console.log( "[crossframe] iframe_arr.constructor === Array:"
                           + (iframe_arr.constructor === Array)); // false
               /*
              [crossframe] typeof iframe_arr:object
              [crossframe] iframe_arr instanceof Array:false
              [crossframe] iframe_arr.constructor === Array:false
               */
               var iframe_num = new window.frames[0].Number(22);
              console.log( "[crossframe] typeof iframe_num:" + ( typeof iframe_num));
              console.log( "[crossframe] iframe_num instanceof Array:"
                           + (iframe_num instanceof Number)); // false
              console.log( "[crossframe] iframe_num.constructor === Array:"
                           + (iframe_num.constructor === Number)); // false

               /*
              [crossframe] typeof iframe_num:object
              [crossframe] iframe_num instanceof Array:false
              [crossframe] iframe_num.constructor === Array:false
               */
       }());
       ( function testToString() {
              console .log( "number.toString==='[object Number]':"
                                         + (Object.prototype.toString.call(number) === "[object Number]" ));
              console.log( "string.toString==='[object String]':"
                                         + (Object.prototype.toString.call(string) === "[object String]" ));
              console.log( "bool.toString==='[object Boolean]':"
                                         + (Object.prototype.toString.call(bool) === "[object Boolean]" ));
              console.log( "date.toString==='[object Date]':"
                           + (Object.prototype.toString.call(date) === "[object Date]"));
              console.log( "array.toString==='[object Array]':"
                           + (Object.prototype.toString.call(array) === "[object Array]"));
              console.log( "object.toString==='[object Object]':"
                                         + (Object.prototype.toString.call(object) === "[object Object]" ));
              console.log( "regExp.toString==='[object RegExp]':"
                                         + (Object.prototype.toString.call(regExp) === "[object RegExp]" ));
              console.log( "func.toString==='[object Function]':"
                                         + (Object.prototype.toString.call(func) === "[object Function]" ));
               /*
              number.toString==='[object Number]':true test7.html:134
              string.toString==='[object String]':true test7.html:135
              bool.toString==='[object Boolean]':true test7.html:136
              date.toString==='[object Date]':true test7.html:137
              array.toString==='[object Array]':true test7.html:138
              object.toString==='[object Object]':true test7.html:139
              regExp.toString==='[object RegExp]':true test7.html:140
              func.toString==='[object Function]':true
              可见此方法适用于检查各种类型*/

               var iframe_arr = new window.frames[0].Array;
              console
                           .log( "iframe_arr.toString==='[object Array]':"
                                         + (Object.prototype.toString.call(iframe_arr) === "[object Array]" ));
               //iframe_arr.toString==='[object Array]':true
               //可见跨原型链调用toString()方法:Object.prototype.toString()。可以解决上面的跨框架问题。
       }())
        //某大牛依据上面这个方法设计的一个很好的获取变量类型的方法如下所示
        function getType(obj) {
               return Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1];

       }
</ script>
</ html>


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值