2011
Nov
19

Javascript 變數型態剖析

Tags:
簡中版

JS 基本變數型態

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

JS 基本變數型態宣告 Typeof 測試

Example 
  1. var str="String";
  2. var bool=true;
  3. var date=new Date();
  4. var num=5;
  5. var ay=[0,1,2,3];
  6.  
  7. alert(typeof(str)); //string
  8. alert(typeof(bool)); //boolean
  9. alert(typeof(date)); //object
  10. alert(typeof(num)); // number
  11. alert(typeof(ay)); //object

測試的結果 Date與 Array 的type都是object，很奇怪吧，本來以為他會印出 Array 跟 Date，想知道為什麼嗎?那就一起往下看吧。

JS 基本變數宣告方式2 Typeof 測試

接著我們使用 New 的方式，去建立所有的變數，來測試一下會有什麼結果。

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

哇哩例!!! 全部都是 object ，JS 也太誇張，這樣根本沒辦法判定型態呀。

JS 基本變數型態 Instanceof 測試

看來只好出大絕招了，instanceof 的目的，在於找到變數的 object constructor，也就是找出變數是從那一個 class new出來的，先給你看個使用範例。

Example 
  1. function MyObject(){
  2.  
  3. }
  4. var s= new MyObject();
  5. if(s instanceof MyObject){
  6.    alert("object is MyObject");
  7. }
  8. else{
  9.    alert('fail');
  10. }
  11. //output object is MyObject

太好了，那我們就來測試一下 String物件，使用 instanceof 會不會抓到 String class呢，

Example 
  1. var str=new String("String");
  2. if(str instanceof String){
  3.    alert("object is String");
  4. }
  5. //output object is String
  6. if(str instanceof Object){
  7.    alert("object is Object");
  8. }
  9. //output object is Object

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

Example 
  1. alert(String.constructor);
  2. alert(String.prototype.constructor);
  3.  
  4. //這行Firefox才能跑
  5. alert(String.prototype.__proto__.constructor);
  6.  
  7. /*output
  8. Function
  9. String
  10. Object
  11. */

喔! 懂了吧，原來 String本身是一個function，不過繼承了String，又繼承了 Object !，看到 JS所有的變數物件最後都會繼承 Object， 難怪查詢 Typeof 都會印出 object。

實作 getInstanceofType

接著我寫一個自動去判定 instaceof 抓型別的 function ，這邊要注意把 判定 Function與 Object放在最後面，還有內建型別的第一個字母要大寫喔。

Example 
  1. var getInstanceofType=function(obj){
  2.    
  3.    if(obj instanceof String){   
  4.       return "instanceof = String";
  5.    }
  6.    if(obj instanceof Boolean){   
  7.       return "instanceof = Boolean";
  8.    }
  9.    if(obj instanceof Number){   
  10.       return "instanceof = Number";
  11.    }
  12.    if(obj instanceof RegExp){   
  13.       return "instanceof = RegExp";
  14.    }
  15.    if(obj instanceof Date){   
  16.       return "instanceof = Date";
  17.    }
  18.    if(obj instanceof Function){   
  19.       return "instanceof = Function";
  20.    }
  21.    if(obj instanceof Object){   
  22.       return "instanceof = Object";
  23.    }
  24.    return "instanceof no found";
  25. }

上一個function寫得又臭又長，太不專業了，身為一個專業的宅男工程師，要改善一下，增加型別比對要更容易些。

Example 
  1. var getInstanceofType=function(obj){
  2.    var type=["String","Boolean","Number","RegExp","Date","Function","Object"];
  3.    var i=0,n=type.length,pro;
  4.    for(i ; i<n;i++){
  5.       pro=type[i];
  6.       eval("var t=obj instanceof "+pro+";");
  7.       if(t){   
  8.          return "instanceof = "+pro;
  9.       }
  10.    }
  11.    
  12.    return "instanceof no found";
  13. }

測試一些數據，看看合不合味口

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

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

使用 instanceof+typeof+constructor 判定型別

Example 
  1. var getType=function(obj){
  2.    var type=["String","Boolean","Number","Array","RegExp","Date","Function","Object"];
  3.    var obj_constructor="",obj_typeof="";
  4.    if(obj.prototype && obj.prototype.constructor ){
  5.       var constructor = obj.prototype.constructor.toString();
  6.       var m=constructor.match(/function ([a-z]+)/i);
  7.       if(m && m[1])
  8.          return "type = class ["+m[1]+"]";
  9.    }
  10.    else{
  11.       obj_typeof = typeof(obj);
  12.       obj_typeof = obj_typeof.substr(0,1).toUpperCase()+obj_typeof.substring(1,obj_typeof.length);
  13.       
  14.    }
  15.    
  16.    var i=0,n=type.length,pro;
  17.    for(i ; i<n;i++){
  18.       pro=type[i];
  19.       if(obj_typeof && obj_typeof==pro){
  20.          return "type = "+pro;
  21.       }
  22.       if(obj_constructor && obj_constructor==pro){
  23.          return "type = "+pro;
  24.       }
  25.       eval("var t=obj instanceof "+pro+";");
  26.       if(t){   
  27.          return "type = "+pro;
  28.       }
  29.    }
  30.    
  31.    return "type no found";
  32. }

測試一下，看起來不錯喔!!

Example 
  1. function parent(){
  2. }
  3. function func(){
  4. }
  5. var p=new parent();
  6. var f=new func();
  7.  
  8. alert(getType(String)); //type = class [String]
  9. alert(getType(Number)); //type = class [Number]
  10. alert(getType(Date)); //type = class [Date]
  11. alert(getType(Array)); //type = class [Array]
  12.  
  13.  
  14. alert(getType("string")); //type = String
  15. alert(getType(5)); //type = Number
  16. alert(getType(5.123)); //type = Number
  17. alert(getType(/[a-z]/)); //type = RegExp
  18. alert(getType([1,2,3])); //type = Array
  19. alert(getType({"t":[1,2]})); //type = Object
  20.  
  21. alert(getType(parent)); //type = class [parent]
  22. alert(getType(func)); //type = class [parent]
  23. alert(getType(p)); //type = Object
  24. alert(getType(f)); //type = Object

網路上看到的，另一種判斷變數 type 方式。

Example 
  1. function getType2(a) {
  2.     var b = typeof a;
  3.     if ("object" == b)
  4.         if (a) {
  5.             if (a instanceof Array) return "array";
  6.             if (a instanceof Object) return b;
  7.             var c = Object.prototype.toString.call(a);
  8.             if ("[object Window]" == c) return "object";
  9.             if ("[object Array]" == c || "number" == typeof a.length && "undefined" != typeof a.splice && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("splice")) return "array";
  10.             if ("[object Function]" == c || "undefined" != typeof a.call && "undefined" != typeof a.propertyIsEnumerable && !a.propertyIsEnumerable("call")) return "function"
  11.         } else return "null";
  12.     else if ("function" == b && "undefined" == typeof a.call) return "object";
  13.     return b
  14. }

This post was last modified by puritys


回應 (Leave a comment)

javascript 相關

類別 Javascript

Copyright &copy; 2014 PURITYS.COM. All rights reserved.