2011
Nov
19

網頁好讀版

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. if(obj instanceof String){
  3. return "instanceof = String";
  4. }
  5. if(obj instanceof Boolean){
  6. return "instanceof = Boolean";
  7. }
  8. if(obj instanceof Number){
  9. return "instanceof = Number";
  10. }
  11. if(obj instanceof RegExp){
  12. return "instanceof = RegExp";
  13. }
  14. if(obj instanceof Date){
  15. return "instanceof = Date";
  16. }
  17. if(obj instanceof Function){
  18. return "instanceof = Function";
  19. }
  20. if(obj instanceof Object){
  21. return "instanceof = Object";
  22. }
  23. return "instanceof no found";
  24. }

上一個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. return "instanceof no found";
  12. }

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

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. var i=0,n=type.length,pro;
  15. for(i ; i<n;i++){
  16. pro=type[i];
  17. if(obj_typeof && obj_typeof==pro){
  18. return "type = "+pro;
  19. }
  20. if(obj_constructor && obj_constructor==pro){
  21. return "type = "+pro;
  22. }
  23. eval("var t=obj instanceof "+pro+";");
  24. if(t){
  25. return "type = "+pro;
  26. }
  27. }
  28. return "type no found";
  29. }

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

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. }

網頁好讀版