JS中如何檢測一個變量是什么類型

轉：原文https://blog.csdn.net/weixin_35667203/article/details/86714281

JS標准文檔定義的類型

序號	[[Class]]	變量聲明
01	Array	var arr = [1,2,3,4];
02	Boolean	var bool = true;
03	Date	var date = new Date();
04	Error	var err = new Error();
05	Function	var func = function(){console.log(‘this is function’);}
06	JSON	{name:“蘇”,age:25};
07	Math	var pi = Math.PI;
08	Undefined	var und = undefined;
09	Null	var nul = null;
10	Number	var num = 123;
11	Object	var obj = Object();
12	RegExp	var reg = / ^ [a-zA-Z]{5,20}$ /;
13	String	var str = “abcdef”;

不同的檢測方案

1、不完全准確的檢測：typeof

//以string類型為例 var str = "abcdef"; //獲取變量obj類型 typeof(str); //"string" typeof str; //"string" str.constructor; //ƒ String() { [native code] } //檢測變量obj是否為string類型 typeof(str) === 'string'; //true typeof str=== 'string'; //true 

---- typeof 檢測出的類型

判斷類型	typeof 判斷結果
num	number
str	string
bool	boolean
arr	object
json	object
func	function
und	undefined
null	object
date	object
reg	object
error	object

優點：使用簡單，能直接輸出結果
缺點：檢測出的類型太少，不能檢測出object的具體類型

2、不完全准確的檢測：instanceof

//instanceof用於識別正在處理的對象（Object）類型 function Person(){} function Student(){} Student.prototype = new Person(); var Tom = new Student(); console.log(Tom instanceof Person); //true console.log(Tom instanceof Student); //true 

---- instanceof 檢測出的類型

變量	檢測語句	結果
var num = 123;	num instanceof Number	false
var num = new Number(123);	num instanceof Number	true
var str = “abcdef”;	str instanceof String	false
var str = new String(“abcdef”);	str instanceof String	true
var bool = true;	bool instanceof Boolean	false
var bool = new Boolean(true);	bool instanceof Boolean	true
var arr = [1,2,3,4];	arr instanceof Array	true
{name:“蘇”,age:25};	json instanceof Object	true
var func = function(){console.log(‘this is function’);}	func instanceof Function	true
var und = undefined;	und instanceof Object	false
var nul = null;	nul instanceof Object	false
var date = new Date();	date instanceof Date	true
var reg = / ^ [a-zA-Z]{5,20}$ /;	reg instanceof RegExp	true
var err = new Error();	err instanceof Error	true

優點：明確地確認對象(object)為某個特定類型；能檢測出多層繼承的關系
缺點：對number、string、boolean類型的變量聲明方式有要求，必須用new方法聲明才能檢測，不能跨iframe

3、不完全准確的檢測：constructor

var str = "abcdef"; str.constructor === String; //true //輸出數字類型變量的構造函數 var num = 123; console.log(num.constructor); //function Number() { [native code] } 

---- constructor 檢測出的類型

變量	檢測語句	結果
var Tom = new Person();	Tom.constructor == Person	true
var num = 123;	num.constructor == Number	true
var str = “abcdef”;	str.constructor == String	true
var bool = true;	bool.constructor == Boolean	true
var arr = [1,2,3,4];	arr.constructor == Array	true
{name:“蘇”,age:25};	json.constructor == Object	true
var func = function(){console.log(‘this is function’);}	func.constructor == Function	true
var date = new Date();	date.constructor == Date	true
var reg = / ^ [a-zA-Z]{5,20}$ /;	reg.constructor == RegExp	true
var err = new Error();	err.constructor == Error	true

constructor：是原型對象的屬性，指向構造函數，但根據實例對象尋找屬性的順序，如果實例對象上沒有屬性或方法時，就可以到原型鏈上尋找，所以實例對象也能使用constructor屬性

優點：除了undefined和null，其他類型的變量都可以使用constructor檢測
缺點：constructor屬性可以被修改，會導致結果不正確，不能跨iframe

function Person(){} function Student(){} Student.prototype = new Person(); //Student原型中的constructor被指向到Person var John = new Student(); console.log(John.constructor == Student); console.log(John.constructor == Person); //所以constructor檢測不出實例對象John真實的構造函數 

4、准確的檢測：Object.prototype.toString.call

變量	檢測語句	結果
var num = 123;	Object.prototype.toString.call(num)	‘[object Number]’
var str = “abcdef”;	Object.prototype.toString.call(str)	‘[object String]’
var bool = true;	Object.prototype.toString.call(bool)	‘[object Boolean]’
var arr = [1,2,3,4];	Object.prototype.toString.call(arr)	‘[object Array]’
{name:“蘇”,age:25};	Object.prototype.toString.call(json)	‘[object Object]’
var func = function(){console.log(‘this is function’);}	Object.prototype.toString.call(func)	‘[object Function]’
var und = undefined;	Object.prototype.toString.call(und)	‘[object Undefined]’
var nul = null;	Object.prototype.toString.call(nul)	‘[object Null]’
var date = new Date();	Object.prototype.toString.call(date)	‘[object Date]’
var reg = / ^ [a-zA-Z]{5,20}$ /;	Object.prototype.toString.call(reg)	‘[object RegExp]’
var err = new Error();	Object.prototype.toString.call(err)	‘[object Error]’

Object.prototype.toString先取得對象的內部屬性[[Class]]，然后依據這個屬性返回一個類似於"[Object Array]"的字符串作為結果，再配合call可以取得任何對象的內部屬性，然后把類型檢測轉化為字符串比較。
優點：能檢測出所有的類型
缺點：IE6下undefined、null均為Object類型

5、使用JQuery中的檢測：$.type

變量	檢測語句	結果
var num = 123;	$.type(num)	‘number’
var str = “abcdef”;	$.type(str)	‘string’
var bool = true;	$.type(bool)	‘boolean’
var arr = [1,2,3,4];	$.type(arr)	‘array’
{name:“蘇”,age:25};	$.type(json)	‘object’
var func = function(){console.log(‘this is function’);}	$.type(func)	‘function’
var und = undefined;	$.type(und)	‘undefined’
var nul = null;	$.type(nul)	‘null’
var date = new Date();	$.type(date)	‘date’
var reg = / ^ [a-zA-Z]{5,20}$ /;	$.type(reg)	‘regexp’
var err = new Error();	$.type(err)	‘error’

可以看出，JQuery中的$ .type的輸出結果和Object.prototype.toString.call的輸出結果很像，因為$.type就是用Object.prototype.toString.call實現的。

總結

1. Number、String、Boolean 類型變量的檢測：typeof
2. Array、JSON、Function、Undefined、Null、Date、RegExp、Error 等 Object 和 Function 類型變量的檢測：推薦使用Object.prototype.toString.call 以及 $.type