类型识别

  • typeof
  • Object.prototype.toString
  • constructor
  • instanceof

typeof：

  • 可以是标准类型（Null 除外）
  • 不可识别具体的对象类型（Function 除外）

Object.prototype.toString：

  • 可是识别标准类型及内置对象类型（例如，Object, Date, Array）
  • 不能识别自定义对象类型

constructor：

  • 可以识别标准类型（Undefined/Null 除外）
  • 可识别内置对象类型
  • 可识别自定义对象类型
  1. function getConstructiorName(obj) {
  2.   return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1];
  3. }
  4. getConstructiorName([]) === "Array"; // true

instanceof：

  • 不可判别原始类型
  • 可判别内置对象类型
  • 可判别自定义对象类型

JavaScript的数据类型可以分为：标准类型和对象类型。

标准类型有：undefined Null Boolean Date Number Object

对象类型（构造器类型）：Boolean Date Number Object Array Date Error Function RegExp

用来判断数据类型的一般有四种方式，分别是：

  • typeof
  • Prototype.toString()
  • constructor
  • instanceof

下面我们写一个HTML来检验一下：

  1. <html>
  2. <head>
  3.     <title>JavaScript类型判断</title>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.         .red{
  7.             background-color:red;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <script type="text/javascript">
  13.         /* Standard Type */
  14.         var a;    //undefined
  15.         var b = document.getElementById("no_exist_element"); //null
  16.         var c = true;    //Boolean
  17.         var d = 1;    //Number
  18.         var e = "str";     //String
  19.         var f = {name : "Tom"};    //Object
  21.         /* Object Type */
  22.         var g = new Boolean(true);    //Boolean Object
  23.         var h = new Number(1);    //Number Object
  24.         var i = new String("str");    //String Object
  25.         var j = new Object({name : "Tom"}); //Object Object
  26.         var k = new Array([1, 2, 3, 4]);    //Array Object
  27.         var l = new Date();    //Date Object
  28.         var m = new Error();
  29.         var n = new Function();
  30.         var o = new RegExp("\\d");
  32.         /* Self-Defined Object Type */
  33.         function Point(x, y) {
  34.           this.x = x;
  35.           this.y = y;
  36.         }
  38.         Point.prototype.move = function(x, y) {
  39.           this.x += x;
  40.           this.y += y;
  41.         }
  43.         var p = new Point(1, 2);
  45.         /* Use the Prototype.toString() to judge the type */
  46.         function type(obj){
  47.             return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  48.         }
  49.     </script>
  50.     <table border="1" cellspacing="0">
  51.         <tr>
  52.             <td></td>
  53.             <td>typeof</td>
  54.             <td>toString</td>
  55.             <td>constructor</td>
  56.             <td>instanceof</td>
  57.         </tr>
  58.         <tr>
  59.             <td>undefined</td>
  60.             <td><script type="text/javascript">document.write(typeof a)</script></td>
  61.             <td><script type="text/javascript">document.write(type(a))</script></td>
  62.             <td class="red"><script type="text/javascript">document.write(a.constructor)</script></td>
  63.             <td class="red"><script type="text/javascript">document.write(a instanceof "undefined")</script></td>
  64.         </tr>
  65.         <tr>
  66.             <td>Null</td>
  67.             <td class="red"><script type="text/javascript">document.write(typeof b);</script></td>
  68.             <td><script type="text/javascript">document.write(type(b));</script></td>
  69.             <td class="red"><script type="text/javascript">document.write(b.constructor);</script></td>
  70.             <td class="red"><script type="text/javascript">document.write(b instanceof "null");</script></td>
  71.         </tr>
  72.         <tr>
  73.             <td>Boolean</td>
  74.             <td><script type="text/javascript">document.write(typeof c);</script></td>
  75.             <td><script type="text/javascript">document.write(type(c));</script></td>
  76.             <td><script type="text/javascript">document.write(c.constructor);</script></td>
  77.             <td class="red"><script type="text/javascript">document.write(c instanceof "boolean");</script></td>
  78.         </tr>
  79.         <tr>
  80.             <td>Number</td>
  81.             <td><script type="text/javascript">document.write(typeof d);</script></td>
  82.             <td><script type="text/javascript">document.write(type(d));</script></td>
  83.             <td><script type="text/javascript">document.write(d.constructor);</script></td>
  84.             <td class="red"><script type="text/javascript">document.write(d instanceof "number");</script></td>
  85.         </tr>
  86.         <tr>
  87.             <td>String</td>
  88.             <td><script type="text/javascript">document.write(typeof e);</script></td>
  89.             <td><script type="text/javascript">document.write(type(e));</script></td>
  90.             <td><script type="text/javascript">document.write(e.constructor);</script></td>
  91.             <td class="red"><script type="text/javascript">document.write(e instanceof "string");</script></td>
  92.         </tr>
  93.         <tr>
  94.             <td>Object</td>
  95.             <td><script type="text/javascript">document.write(typeof f);</script></td>
  96.             <td><script type="text/javascript">document.write(type(f));</script></td>
  97.             <td><script type="text/javascript">document.write(f.constructor);</script></td>
  98.             <td class="red"><script type="text/javascript">document.write(f instanceof "object");</script></td>
  99.         </tr>
  100.         <tr><td colspan="5">-----------------------</td></tr>
  101.         <tr>
  102.             <td>Boolean Object</td>
  103.             <td class="red"><script type="text/javascript">document.write(typeof g);</script></td>
  104.             <td><script type="text/javascript">document.write(type(g));</script></td>
  105.             <td><script type="text/javascript">document.write(g.constructor);</script></td>
  106.             <td><script type="text/javascript">document.write(g instanceof Boolean);</script></td>
  107.         </tr>
  108.         <tr>
  109.             <td>Number Object</td>
  110.             <td class="red"><script type="text/javascript">document.write(typeof h);</script></td>
  111.             <td><script type="text/javascript">document.write(type(h));</script></td>
  112.             <td><script type="text/javascript">document.write(h.constructor);</script></td>
  113.             <td><script type="text/javascript">document.write(h instanceof Number);</script></td>
  114.         </tr>
  115.         <tr>
  116.             <td>String Object</td>
  117.             <td class="red"><script type="text/javascript">document.write(typeof i);</script></td>
  118.             <td><script type="text/javascript">document.write(type(i));</script></td>
  119.             <td><script type="text/javascript">document.write(i.constructor);</script></td>
  120.             <td><script type="text/javascript">document.write(i instanceof String);</script></td>
  121.         </tr>
  122.         <tr>
  123.             <td>Object Object</td>
  124.             <td class="red"><script type="text/javascript">document.write(typeof j);</script></td>
  125.             <td><script type="text/javascript">document.write(type(j));</script></td>
  126.             <td><script type="text/javascript">document.write(j.constructor);</script></td>
  127.             <td><script type="text/javascript">document.write(j instanceof Object);</script></td>
  128.         </tr>
  129.         <tr>
  130.             <td>Array Object</td>
  131.             <td class="red"><script type="text/javascript">document.write(typeof k);</script></td>
  132.             <td><script type="text/javascript">document.write(type(k));</script></td>
  133.             <td><script type="text/javascript">document.write(k.constructor);</script></td>
  134.             <td><script type="text/javascript">document.write(k instanceof Array);</script></td>
  135.         </tr>
  136.         <tr>
  137.             <td>Date Object</td>
  138.             <td class="red"><script type="text/javascript">document.write(typeof l);</script></td>
  139.             <td><script type="text/javascript">document.write(type(l));</script></td>
  140.             <td><script type="text/javascript">document.write(l.constructor);</script></td>
  141.             <td><script type="text/javascript">document.write(l instanceof Date);</script></td>
  142.         </tr>
  143.         <tr>
  144.             <td>Error Object</td>
  145.             <td class="red"><script type="text/javascript">document.write(typeof m);</script></td>
  146.             <td><script type="text/javascript">document.write(type(m));</script></td>
  147.             <td><script type="text/javascript">document.write(m.constructor);</script></td>
  148.             <td><script type="text/javascript">document.write(m instanceof Error);</script></td>
  149.         </tr>
  150.         <tr>
  151.             <td>Function Object</td>
  152.             <td><script type="text/javascript">document.write(typeof n);</script></td>
  153.             <td><script type="text/javascript">document.write(type(n));</script></td>
  154.             <td><script type="text/javascript">document.write(n.constructor);</script></td>
  155.             <td><script type="text/javascript">document.write(n instanceof Function);</script></td>
  156.         </tr>
  157.         <tr>
  158.             <td>RegExp Object</td>
  159.             <td class="red"><script type="text/javascript">document.write(typeof o);</script></td>
  160.             <td><script type="text/javascript">document.write(type(o));</script></td>
  161.             <td><script type="text/javascript">document.write(o.constructor);</script></td>
  162.             <td><script type="text/javascript">document.write(o instanceof RegExp);</script></td>
  163.         </tr>
  164.         <tr><td colspan="5">-----------------------</td></tr>
  165.         <tr>
  166.             <td>Point Objct</td>
  167.             <td class="red"><script type="text/javascript">document.write(typeof p);</script></td>
  168.             <td class="red"><script type="text/javascript">document.write(type(p));</script></td>
  169.             <td><script type="text/javascript">document.write(p.constructor);</script></td>
  170.             <td><script type="text/javascript">document.write(p instanceof Point);</script></td>
  171.         </tr>
  172.     </table>
  173. </body>
  174. </html>

执行的结果如下：

类型判断 - 图1

其中红色的单元格表示该判断方式不支持的类型。