快捷導(dǎo)航

舉例講解如何判斷JavaScript中對(duì)象的類(lèi)型

更新時(shí)間：2016年04月22日 17:12:20 投稿：goldensun

這篇文章主要介紹了如何判斷JavaScript中對(duì)象的類(lèi)型,舉例講解了使用typeof和instanceof等操作符來(lái)進(jìn)行判斷的方法,需要的朋友可以參考下

在編寫(xiě)js程序的過(guò)程中，可能常常需要判斷一個(gè)對(duì)象的類(lèi)型，例如你寫(xiě)了一個(gè)函數(shù)，需要通過(guò)判斷不同的參數(shù)類(lèi)型來(lái)編寫(xiě)不同的代碼。
首先可能會(huì)想到typeof操作符，看下面的這個(gè)例子:

 <script type="text/javascript"> 
var object = {}; 
var b = true; 
alert(typeof object + " " + typeof b); 
 </script>

得到的結(jié)果如下：

2016422170645689.png (377×220)

從上面的結(jié)果可以看到，用typeof操作符可以顯示對(duì)象的類(lèi)型，那么typeof操作符作用域null和undefined的結(jié)果會(huì)是什么呢？

/*var object = {}; 
var b = true; 
alert(typeof object + " " + typeof b);*/ 
alert(typeof null + " " + typeof undefined)

2016422170716617.png (239×143)

typeof 操作符作用于null居然顯示”object“（這個(gè)好像不科學(xué)，我還以為會(huì)顯示”null'“），作用于undefined顯示”undefined“（這個(gè)符合我們希望的結(jié)果），所以當(dāng)用typeof操作符來(lái)判斷一個(gè)對(duì)象的類(lèi)型時(shí)，特別要小心，因?yàn)檫@個(gè)對(duì)象有可能是null。上面只是給了一部分typeof作用于這些對(duì)象的結(jié)果，下面的表列出了typeof操作符作用于Boolean, Number, String, Array, Date, RegExp, Object, Function, null, undefined的結(jié)果（有興趣的讀者可以自行測(cè)試）:

2016422170736411.png (504×291)

從上表的結(jié)果可以看出Array, Date, RegExp顯示的都是object，為什么不是直接的顯示對(duì)象的類(lèi)型呢？這就要引出js的另外一個(gè)操作符了:instanceof操作符，這個(gè)操作符用來(lái)判斷一個(gè)對(duì)象是否為某種類(lèi)型的對(duì)象，計(jì)算的值為true或者false。先來(lái)看下：

var now = new Date(); 
var pattern = /^[\s\S]*$/; 
var names = ['zq', 'john']; 
alert((now instanceof Date) + " " 
 + (pattern instanceof RegExp) + " " + (names instanceof Array));

2016422170805336.png (385×281)

很顯然通過(guò)這個(gè)instanceof是能判斷對(duì)象的類(lèi)型的，但是這個(gè)只能判斷除了基本類(lèi)型（包含String類(lèi)型）的其它類(lèi)型，他是不能判斷基本類(lèi)型的。但是instanceof不是總是能正常判斷的，考慮一個(gè)框架的情形，要判斷其類(lèi)型的對(duì)象是另外一個(gè)frame傳遞過(guò)來(lái)的對(duì)象，首先來(lái)看下下面的例子。
main.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <title>Main</title> 
 </head> 
 <frameset cols="45%,*"> 
  <frame name="frame1" src="frame1.html"/> 
  <frame name="frame2" src="frame2.html"/> 
 </frameset> 
</html>

frame1.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame1</title> 
 </head> 
 <script type="text/javascript"> 
 var names = ['riccio zhang', 'zq', 'john']; 
 </script> 
 <body style="background: #ccc"> 
 
 </body> 
</html>

frame2.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame2</title> 
 <script type="text/javascript"> 
 document.write("top.frame1.names instanceof Array:" 
  + (top.frame1.names instanceof Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.names instanceof top.frame1.Array:" 
  + (top.frame1.names instanceof top.frame1.Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); 
 </script> 
 </head> 
 <body style="background: #747474"> 
 
 </body> 
</html>

2016422170849229.png (1365×215)

names對(duì)象是在frame1框架中的，此時(shí)是通過(guò)frame1框架的Array來(lái)創(chuàng)建的，如果把names對(duì)象拿到frame2中的Array作比較，很顯然names不是frame2中的Array的實(shí)例，以為frame1和frame2壓根就不是同一和Array，從第2個(gè)現(xiàn)實(shí)結(jié)果可以很明顯的看出names是他本身所在的frame的實(shí)例，從第3個(gè)輸出可以看出frame1的Array和frame2的Array是不同的。那么遇到上面這種跨frame的比較該怎么辦呢？我們總不能每次都拿框架對(duì)應(yīng)的Array來(lái)做比較吧，有一種必須的辦法可以解決上面的問(wèn)題，看下面的代碼：

var toString = {}.toString; 
var now = new Date(); 
alert(toString.call(now))

2016422170910729.png (345×186)

{}.toString表示獲取Object對(duì)象上的toString方法（這個(gè)方法時(shí)Object對(duì)象的基本方法之一）,toString.call(now)表示調(diào)用toString方法。調(diào)用Date對(duì)象最原生的toString()（這個(gè)方法是Object上面的方法）方法可以顯示[object Date]類(lèi)型的字符串，假如是Array，則會(huì)產(chǎn)生[object Array]的字樣，也就是說(shuō)進(jìn)行上面的操作會(huì)顯示類(lèi)似[object Class]的字樣，那么我們只要判斷這個(gè)字符串不就可以知道其類(lèi)型了嗎？由此可以寫(xiě)出如下的工具類(lèi)：
tools.js

var tools = (function(undefined){ 
 var class2type = {}, 
  toString = {}.toString; 
  
 var fun = { 
  type: function (obj){ 
   return obj === null || obj === undefined ? 
      String(obj) : class2type[toString.call(obj)] 
  }, 
  isArray: function (obj){ 
   return fun.type(obj) === "array"; 
  }, 
  isFunction: function (obj){ 
   return fun.type(obj) === "function"; 
  }, 
  each: function (arr, callback){ 
   var i = 0, 
    hasLength = arr.length ? true : false; 
   if(!callback || (typeof callback !== 'function') || !hasLength){ 
    return; 
   } 
   for(i = 0; i< arr.length; i++){ 
    if(callback.call(arr[i], i, arr[i]) === false){ 
      break; 
    } 
   } 
  } 
 }; 
 fun.each("Boolean Number String Array Date RegExp Object Function".split(" "), function(i, name){ 
  class2type["[object "+ name +"]"] = name.toLowerCase(); 
 }); 
 return fun; 
})();

tools提供了type,isArray,isFunction等方法用來(lái)判斷對(duì)象的類(lèi)型，根據(jù)實(shí)際的需要可以自己添加需要判斷類(lèi)型的方法。type接受一個(gè)obj參數(shù)，它將對(duì)象的實(shí)際類(lèi)型以小寫(xiě)的形式返回，比如你的需要判斷對(duì)象的類(lèi)型是Array，那么此方法將會(huì)返回array.
根據(jù)上面提供的工具類(lèi)，再重新改寫(xiě)上面的例子：
fram2.html

<!doctype html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>frame2</title> 
 <script type="text/javascript" src="tools.js"></script> 
 <script type="text/javascript"> 
 document.write("top.frame1.names instanceof Array:" 
  + (top.frame1.names instanceof Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.names instanceof top.frame1.Array:" 
  + (top.frame1.names instanceof top.frame1.Array)); 
 document.write("<br/>"); 
 document.write("top.frame1.Array === top.frame2.Array?" + (top.frame1.Array === top.frame2.Array)); 
 document.write("<br/>"); 
 document.write("tools.isArray(top.frame1.names)?" + tools.isArray(top.frame1.names)); 
 </script> 
 </head> 
 <body style="background: #747474"> 
 
 </body> 
</html>

2016422171011812.png (1363×189)