JS--JavaScript数据类型检测（typeof、constructor）详解

忘是亡心i 2021-08-14 02:46 560阅读 0赞

#### 检测数据类型 ####

typeof运算符能够检测数据类型，其返回一个用于识别操作数类型的字符串。对于任何变量来说，typeof运算符总是以字符串的形式返回以下6种类型之一：

*  “number"
 *  “string”
 *  “boolean”
 *  “objcet”
 *  “function”
 *  “undefined”

不幸的是，在使用typeof检测null值时，返回的是"object"，而不是"null"。  
可以定义一个简单的检测方法：

function type(o){ 
    	return ( o === null) ? "null" : (typeof o);
    }

这样就可以避开null值影响基本数据的类型检测。

另外，typeof不能够拣择复杂的数据类型，以及各种特殊用途的对象，如正则表达式对象、日期对象、数学对象等。

对于对象或数组，可以使用constructor属性，该属性值引用的是原来构造该对象的函数。如果结合typeof运算符和constructor属性，基本能能够完成数据类型的检测。

**不同类型数据的检测结果：**

<table> 
 <thead> 
  <tr> 
   <th align="center">值（value）</th> 
   <th align="center">typeof value（表达式返回值）</th> 
   <th align="center">value.constructor（构造函数的属性值）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">var value = 1</td> 
   <td align="center">“number”</td> 
   <td align="center">Number</td> 
  </tr> 
  <tr> 
   <td align="center">var value = “a”</td> 
   <td align="center">“string”</td> 
   <td align="center">String</td> 
  </tr> 
  <tr> 
   <td align="center">var value = true</td> 
   <td align="center">“boolean”</td> 
   <td align="center">Boolean</td> 
  </tr> 
  <tr> 
   <td align="center">var value = {}</td> 
   <td align="center">“object”</td> 
   <td align="center">Object</td> 
  </tr> 
  <tr> 
   <td align="center">var value = new Object()</td> 
   <td align="center">“object”</td> 
   <td align="center">Object</td> 
  </tr> 
  <tr> 
   <td align="center">var value = []</td> 
   <td align="center">“objcet”</td> 
   <td align="center">Array</td> 
  </tr> 
  <tr> 
   <td align="center">var value = new Array()</td> 
   <td align="center">“object”</td> 
   <td align="center">Array</td> 
  </tr> 
  <tr> 
   <td align="center">var value = function(){}</td> 
   <td align="center">“function”</td> 
   <td align="center">Function</td> 
  </tr> 
  <tr> 
   <td align="center">function className(){};</td> 
   <td align="center">”object"</td> 
   <td align="center">className</td> 
  </tr> 
 </tbody> 
</table>

使用constructor属性可以判断绝大部分数据的类型。但是，对于undefined和null特殊值，就不能使用constructor属性，如果使用constructor则会抛出异常。此时可以先把值转换为布尔值，如果为true，则说明不是iundefined和null值，然后再调用constructor属性。

var value = undefined;
    alert(typeof value);	//"undefined"
    alert(value && value.constructor);		//undefined
    var value = null;
    alert(typeof value);	//"object"
    alert(value && value.constructor);		//null

对于数值直接量，也不能使用constructor属性，需要加上一个小括号，这时因为小括号运算符能够把数值转换为对象：

alert((10).constructor);

使用toString()方法检测对象类型是最安全、最准确的。调用toString()方法把对象转换为字符串，然后通过检测字符串中是否包含特有的标识字符可以确定对象的类型。toString()方法返回的字符串格式如下：

[object class]

其中object表示对象的通用类型，class表示对象的内部类型，内部类型的名称与该对象的构造函数名对应。

class值提供的信息与constructor属性值相似，但是class值是以字符串的形式提供信息的，而不是以构造函数的形式提供这些信息的，所以在特定的环境中是非常有用的。

需要注意的是：要获取对象的class值的**唯一方法是必须调用Object定义的默认toString()方法**，因为不同的对象都会预定义自己的toString()方法，所以不能直接调用对象的toString()方法。

要调用Object对象定义的默认toString()方法，可以先调用**Object.prototype.toString**对象的默认toString()函数，再调用该函数的apply()方法再想要检测的对象上执行。

var d = new Date();
    var m = Object.prototype.toString;
    alert(m.apply(d)); //"[object Date]"

##### 数据类型检测的方法（终极版） #####

//安全检测JavaScript基本数据类型和内置对象
    //参数：o表示检测数据
    /* * 返回值：返回字符串 * "undefined"、"number"、"boolean"、"string"、"function"、 * "regexp"、"array"、"date"、"error"、"object"、"null" */
    function typeOf(o){ 
    	//获取对象的toString()方法引用
    	var _toString =Object.prototype.toString;
    	//列举基本数据类型和内置对象类型，可以进一步补充该数组的检测数据类型范围
    	var _type = { 
    		"undefined" : "undefined",
    		"number" : "number",
    		"boolean" : "boolean",
    		"string" : "string",
    		"[object Function]" : "function",
    		"[object RegExp]" : "regexp",
    		"[object Array]" : "array",
    		"[object Date]" : "date",
    		"[object Error]" : "error"
    	}
    	return _type[typeof o] || _type[_toString.call(o)] || (o ? "object" : "null");
    }

测试：

var a = Math.abs;
    alert(typeOf(a));

![在这里插入图片描述][20190922202324476.png]

注 意 ： 上 面 的 方 法 只 适 用 于 基 本 数 据 类 型 和 内 置 对 象 ， 而 对 于 自 定 义 对 象 是 无 效 的 。 \\color\{red\}\{注意：上面的方法只适用于基本数据类型和内置对象，而对于自定义对象是无效的。\} 注意：上面的方法只适用于基本数据类型和内置对象，而对于自定义对象是无效的。  
 这 是 因 为 自 定 义 对 象 被 转 换 为 字 符 串 后 ， 返 回 的 值 是 没 有 规 律 的 ， 并 且 不 同 浏 览 器 返 回 值 也 是 不 同 的 。 \\color\{red\}\{这是因为自定义对象被转换为字符串后，返回的值是没有规律的，并且不同浏览器返回值也是不同的。\} 这是因为自定义对象被转换为字符串后，返回的值是没有规律的，并且不同浏览器返回值也是不同的。 因 此 ， 要 检 测 非 内 置 对 象 ， 只 能 够 使 用 c o n s t r u c t o r 属 性 和 i n s t a c e o f 运 算 符 来 实 现 。 \\color\{red\}\{因此，要检测非内置对象，只能够使用constructor属性和instaceof运算符来实现。\} 因此，要检测非内置对象，只能够使用constructor属性和instaceof运算符来实现。

[20190922202324476.png]: /images/20210813/c7b64b5ee8da41fdad1802347fe49606.png