javascript中對變數類型的判斷方法_javascript技巧

在JavaScript中，有5種基本資料型別和1種複雜資料型別，基本資料型別有：Undefined, Null, Boolean, Number和String；複雜資料型別是Object，Object中也細分了很多具體的類型，例如：Array, Function, Date等等。今天我們就來探討一下，使用什麼方法來判斷一個出一個變數的型別。

在講解各種方法之前，我們先定義出幾個測試變量，看看後面的方法究竟能把變量的類型解析成什麼樣子，以下幾個變量差不多包含了我們在實際編碼中常用的類型。

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. 使用typeof檢測

我們平常用的最多的就是用typeof檢測變數類型了。這次，我們也使用typeof來偵測變數的類型：

console.log(
	typeof num, 
	typeof str, 
	typeof bool, 
	typeof arr, 
	typeof json, 
	typeof func, 
	typeof und, 
	typeof nul, 
	typeof date, 
	typeof reg, 
	typeof error
);
// number string boolean object	object function undefined object object object object

從輸出的結果來看，arr, json, nul, date, reg, error 全部被偵測為object類型，其他的變數能夠被正確偵測出來。當需要變數是否為number, string, boolean, function, undefined, json型別時，可以使用typeof來判斷。其他變數是判斷不出類型的，包括null。
還有，typeof是區分不出array和json類型的。因為使用typeof這個變數時，array和json型別輸出的都是object。

2. 使用instance偵測

在JavaScript 中，判斷一個變數的型別嘗嘗會用typeof 運算符，在使用typeof 運算子時採用引用型別儲存值會出現一個問題，無論引用的是什麼類型的對象，它都會傳回「object 」。 ECMAScript 引進了另一個 Java 運算子 instanceof 來解決這個問題。 instanceof 運算子與 typeof 運算子相似，用於識別正在處理的物件的類型。與 typeof 方法不同的是，instanceof 方法要求開發者明確地確認物件為某特定型別。例如：

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true

我們再來看看下面的例子：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true

instanceof還能偵測出多層繼承的關係。
好了，我們來使用instanceof來偵測上面的那些變數：

console.log(
	num instanceof Number,
	str instanceof String,
	bool instanceof Boolean,
	arr instanceof Array,
	json instanceof Object,
	func instanceof Function,
	und instanceof Object,
	nul instanceof Object,
	date instanceof Date,
	reg instanceof RegExp,
	error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

從上面的運行結果我們可以看到，num, str和bool沒有檢測出他的類型，但是我們使用下面的方式創建num，是可以檢測出類型的：

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

同時，我們也要看到，und和nul是偵測的Object類型，才輸出的true，因為js中沒有Undefined和Null的這種全域類型，他們und和nul都屬於Object類型，因此輸出了true。

3. 使用constructor檢測

在使用instanceof偵測變數類型時，我們是偵測不到number, ‘string', bool的類型的。因此，我們需要換一種方式來解決這個問題。
constructor本來是原型物件上的屬性，指向建構子。但是根據實例物件尋找屬性的順序，若實例物件上沒有實例屬性或方法時，就去原型鏈上尋找，因此，實例物件也是能使用constructor屬性的。
我們先來輸出一下num.constructor的內容，也就是數字型別的變數的建構子是什麼樣子的：

function Number() { [native code] }

我們可以看到它指向了Number的建構函數，因此，我們可以使用num.constructor==Number來判斷num是不是Number型的，其他的變數也類似：

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
	Tom.constructor==Person,
	num.constructor==Number,
	str.constructor==String,
	bool.constructor==Boolean,
	arr.constructor==Array,
	json.constructor==Object,
	func.constructor==Function,
	date.constructor==Date,
	reg.constructor==RegExp,
	error.constructor==Error
);
// 所有结果均为true

從輸出的結果我們可以看出，除了undefined和null，其他類型的變數均能使用constructor判斷類型。
不過使用constructor也不是保險的，因為constructor屬性是可以被修改的，會導致檢測出的結果不正確，例如：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

在上面的例子中，Student原型中的constructor被修改為指向到Person，導致檢測不出實例物件John真實的建構子。
同時，使用instaceof和construcor,被判斷的array必須是在當前頁面聲明的！例如，一個頁面（父頁面）有一個框架，框架中引用了一個頁面（子頁面），在子頁面中聲明了一個array，並將其賦值給父頁面的一個變量，這時判斷該變量，Array == object.constructor;會回傳false； 原因：
1、array屬於引用型數據，在傳遞過程中，僅是引用地址的傳遞。
2.每個頁面的Array原生物件所引用的位址是不一樣的，在子頁面聲明的array，所對應的建構函數，是子頁面的Array物件；父頁來進行判斷，使用的Array並不等於子頁面的Array；切記，不然很難追蹤問題！
4. 使用Object.prototype.toString.call

我們先不管這個是什麼，先來看看他是怎麼偵測變數類型的：

console.log(
	Object.prototype.toString.call(num),
	Object.prototype.toString.call(str),
	Object.prototype.toString.call(bool),
	Object.prototype.toString.call(arr),
	Object.prototype.toString.call(json),
	Object.prototype.toString.call(func),
	Object.prototype.toString.call(und),
	Object.prototype.toString.call(nul),
	Object.prototype.toString.call(date),
	Object.prototype.toString.call(reg),
	Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。
我们现在再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

复制代码 代码如下:

Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检测变量的类型：

console.log(
	$.type(num),
	$.type(str),
	$.type(bool),
	$.type(arr),
	$.type(json),
	$.type(func),
	$.type(und),
	$.type(nul),
	$.type(date),
	$.type(reg),
	$.type(error)
);
// number string boolean array object function undefined null date regexp error

看到輸出結果，有沒有一種熟悉的感覺？對，他就是上面使用Object.prototype.toString.call(變數)輸出的結果的第二個參數呀。
我們這裡先來比較一下上面所有方法偵測出的結果，橫排是使用的偵測方法， 垂直排是各個變數：

類型判斷	類型	實例	建構子	toString.call	$.type
數字	數字	假	正確	[物件編號]	數字
str	字串	假	正確	[物件字串]	字串
布爾	布林值	假	正確	[物件布林值]	布林值
來了	對象	正確	正確	[物件陣列]	數組
json	對象	正確	正確	[物件物件]	對象
功能	功能	正確	正確	[物件函數]	功能
和	未定義	假	-	[物件未定義]	未定義
無	對象	假	-	[物件為空]	空
日期	對象	正確	正確	[物件日期]	日期
reg	對象	正確	正確	[物件正規表示式]	正規表示式
錯誤	對象	正確	正確	[物件錯誤]	錯誤
優點	使用簡單，能直接輸出結果	能偵測出複雜的類型	基本上能偵測出所有的型別	偵測出所有的型別	-
缺點	檢測出的類型太少	基本型別偵測不出，且不能跨iframe	不能跨iframe，且constructor易被修改	IE6下undefined,null均為Object	-

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：

// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

// 省略部分代码...

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
},

// 省略部分代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部分：

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环之后，`class2type`的值是： 
class2type = {
	'[object Boolean]' : 'boolean', 
	'[object Number]' : 'number',
	'[object String]' : 'string',
	'[object Function]': 'function',
	'[object Array]'  : 'array',
	'[object Date]'  : 'date',
	'[object RegExp]' : 'regExp',
	'[object Object]' : 'object',
	'[object Error]'  : 'error'
}

再来看看type方法：

// type的实现
type: function( obj ) {
	// 若传入的是null或undefined，则直接返回这个对象的字符串
	// 即若传入的对象obj是undefined，则返回"undefined"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	// 低版本regExp返回function类型；高版本已修正，返回object类型
	// 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，其实jquery中就是用Object.prototype.toString.call实现的，把'[object Boolean]'类型转成'boolean'类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。
除了”object”和”function”类型，其他的类型则使用typeof进行检测。即number, string, boolean类型的变量，使用typeof即可。