Javascript 变数型态剖析

Tags:

javascript

繁中版

网页好读版

JS 基本变数型态

Array : 阵列 [0,1,2,3,4]
Boolean : 布林值 true ,false
Date : 日期
Number : 数字
String : 字串

JS 基本变数型态宣告 Typeof 测试

Example

var str="String";
var bool=true;
var date=new Date();
var num=5;
var ay=[0,1,2,3];
 
alert(typeof(str)); //string
alert(typeof(bool)); //boolean
alert(typeof(date)); //object
alert(typeof(num)); // number
alert(typeof(ay)); //object

测试的结果 Date与 Array 的type都是object，很奇怪吧，本来以为他会印出 Array 跟 Date，想知道为什么吗?那就一起往下看吧。

JS 基本变数宣告方式2 Typeof 测试

接著我们使用 New 的方式，去建立所有的变数，来测试一下会有什么结果。

Example

var str=new String("String");
var bool=new Boolen(true);
var num=new Number(5);
var ay=new Array(0,1,2,3);
alert(typeof(str)); //object
alert(typeof(bool)); //object
alert(typeof(num)); // object
alert(typeof(ay)); //object

哇哩例!!! 全部都是 object ，JS 也太夸张，这样根本没办法判定型态呀。

JS 基本变数型态 Instanceof 测试

看来只好出大绝招了，instanceof 的目的，在於找到变数的 object constructor，也就是找出变数是从那一个 class new出来的，先给你看个使用范例。

Example

function MyObject(){
 
}
var s= new MyObject();
if(s instanceof MyObject){
   alert("object is MyObject");
}
else{
   alert('fail');
}
//output object is MyObject

太好了，那我们就来测试一下 String物件，使用 instanceof 会不会抓到 String class呢，

Example

var str=new String("String");
if(str instanceof String){
   alert("object is String");
}
//output object is String
if(str instanceof Object){
   alert("object is Object");
}
//output object is Object

JS 又来了，[Object],[String]两个都成立，太神奇，那到底 new String是什么东西哩! 我直接去看String最原始的class好了，不要用New物件的方式。

Example

alert(String.constructor);
alert(String.prototype.constructor);
 
//这行Firefox才能跑
alert(String.prototype.__proto__.constructor);
 
/*output
Function
String
Object
*/

喔! 懂了吧，原来 String本身是一个function，不过继承了String，又继承了 Object !，看到 JS所有的变数物件最后都会继承 Object，难怪查询 Typeof 都会印出 object。

实作 getInstanceofType

接著我写一个自动去判定 instaceof 抓型别的 function ，这边要注意把判定 Function与 Object放在最后面，还有内建型别的第一个字母要大写喔。

Example

var getInstanceofType=function(obj){
   
   if(obj instanceof String){   
      return "instanceof = String";
   }
   if(obj instanceof Boolean){   
      return "instanceof = Boolean";
   }
   if(obj instanceof Number){   
      return "instanceof = Number";
   }
   if(obj instanceof RegExp){   
      return "instanceof = RegExp";
   }
   if(obj instanceof Date){   
      return "instanceof = Date";
   }
   if(obj instanceof Function){   
      return "instanceof = Function";
   }
   if(obj instanceof Object){   
      return "instanceof = Object";
   }
   return "instanceof no found";
}

上一个function写得又臭又长，太不专业了，身为一个专业的宅男工程师，要改善一下，增加型别比对要更容易些。

Example

var getInstanceofType=function(obj){
   var type=["String","Boolean","Number","RegExp","Date","Function","Object"];
   var i=0,n=type.length,pro;
   for(i ; i<n;i++){
      pro=type[i];
      eval("var t=obj instanceof "+pro+";");
      if(t){   
         return "instanceof = "+pro;
      }
   }
   
   return "instanceof no found";
}

测试一些数据，看看合不合味口

Example

alert(getInstanceofType(String)); //Fucntion
alert(getInstanceofType(func)); //Function
alert(getInstanceofType(reg)); //RegExp
alert(getInstanceofType([0,1,2])); //Object
alert(getInstanceofType(5)); // not found

String => Function , Array => Object , 5=> not found ，好像还是怪怪的，似乎有点棘手。

使用 instanceof+typeof+constructor 判定型别

Example

var getType=function(obj){
   var type=["String","Boolean","Number","Array","RegExp","Date","Function","Object"];
   var obj_constructor="",obj_typeof="";
   if(obj.prototype && obj.prototype.constructor ){
      var constructor = obj.prototype.constructor.toString();
      var m=constructor.match(/function ([a-z]+)/i);
      if(m && m[1])
         return "type = class ["+m[1]+"]";
   }
   else{
      obj_typeof = typeof(obj);
      obj_typeof = obj_typeof.substr(0,1).toUpperCase()+obj_typeof.substring(1,obj_typeof.length);
      
   }
   
   var i=0,n=type.length,pro;
   for(i ; i<n;i++){
      pro=type[i];
      if(obj_typeof && obj_typeof==pro){
         return "type = "+pro;
      }
      if(obj_constructor && obj_constructor==pro){
         return "type = "+pro;
      }
      eval("var t=obj instanceof "+pro+";");
      if(t){   
         return "type = "+pro;
      }
   }
   
   return "type no found";
}

测试一下，看起来不错喔!!

Example

function parent(){
}
function func(){
}
var p=new parent();
var f=new func();
 
alert(getType(String)); //type = class [String]
alert(getType(Number)); //type = class [Number]
alert(getType(Date)); //type = class [Date]
alert(getType(Array)); //type = class [Array]
 
 
alert(getType("string")); //type = String
alert(getType(5)); //type = Number
alert(getType(5.123)); //type = Number
alert(getType(/[a-z]/)); //type = RegExp
alert(getType([1,2,3])); //type = Array
alert(getType({"t":[1,2]})); //type = Object
 
alert(getType(parent)); //type = class [parent]
alert(getType(func)); //type = class [parent]
alert(getType(p)); //type = Object
alert(getType(f)); //type = Object

网路上看到的，另一种判断变数 type 方式。

Example

function getType2(a) {
    var b = typeof a;
    if ("object" == b)
        if (a) {
            if (a instanceof Array) return "array";
            if (a instanceof Object) return b;
            var c = Object.prototype.toString.call(a);
            if ("[object Window]" == c) return "object";
            if ("[object Array]" == c || "number" == typeof a.length && "undefined" != typeof a.splice && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("splice")) return "array";
            if ("[object Function]" == c || "undefined" != typeof a.call && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("call")) return "function"
        } else return "null";
    else if ("function" == b && "undefined" == typeof a.call) return "object";
    return b
}

网页好读版

This post was last modified by puritys 2014/10/17

Javascript 指標物件

Javascript ECMA 1