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