|
在JavaScript中,，有5種基本數(shù)據(jù)類型和1種復(fù)雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String,；復(fù)雜數(shù)據(jù)類型是Object，Object中還細(xì)分了很多具體的類型,，比如：Array, Function, Date等等,。今天我們就來探討一下，使用什么方法判斷一個(gè)出一個(gè)變量的類型,。
在講解各種方法之前,，我們首先定義出幾個(gè)測(cè)試變量，看看后面的方法究竟能把變量的類型解析成什么樣子,，以下幾個(gè)變量差不多包含了我們?cè)趯?shí)際編碼中常用的類型,。
1 2 3 4 5 6 7 8 9 10 11 12 | <code>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();
</code>
|
1. 使用typeof檢測(cè)
我們平時(shí)用的最多的就是用typeof檢測(cè)變量類型了。這次，我們也使用typeof檢測(cè)變量的類型：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <code>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
</code>
|
從輸出的結(jié)果來看,，arr, json, nul, date, reg, error 全部被檢測(cè)為object類型,，其他的變量能夠被正確檢測(cè)出來。當(dāng)需要變量是否是number, string, boolean, function, undefined, json類型時(shí),，可以使用typeof進(jìn)行判斷,。其他變量是判斷不出類型的，包括null,。
還有,，typeof是區(qū)分不出array和json類型的。因?yàn)槭褂胻ypeof這個(gè)變量時(shí),，array和json類型輸出的都是object。
2. 使用instance檢測(cè)
在 JavaScript 中,，判斷一個(gè)變量的類型嘗嘗會(huì)用 typeof 運(yùn)算符,，在使用 typeof 運(yùn)算符時(shí)采用引用類型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問題，無論引用的是什么類型的對(duì)象,，它都返回 “object”,。ECMAScript 引入了另一個(gè) Java 運(yùn)算符 instanceof 來解決這個(gè)問題。instanceof 運(yùn)算符與 typeof 運(yùn)算符相似,，用于識(shí)別正在處理的對(duì)象的類型,。與 typeof 方法不同的是，instanceof 方法要求開發(fā)者明確地確認(rèn)對(duì)象為某特定類型,。例如：
1 2 3 4 5 6 | <code>function Person(){
}
var Tom = new Person();
console.log(Tom instanceof Person); // true
</code>
|
我們?cè)倏纯聪旅娴睦樱?/p>
1 2 3 4 5 6 7 8 9 10 11 | <code>function Person(){
}
function Student(){
}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true
</code>
|
instanceof還能檢測(cè)出多層繼承的關(guān)系,。
好了，我們來使用instanceof檢測(cè)上面的那些變量：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <code>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
</code>
|
從上面的運(yùn)行結(jié)果我們可以看到,，num, str和bool沒有檢測(cè)出他的類型,，但是我們使用下面的方式創(chuàng)建num，是可以檢測(cè)出類型的：
1 2 3 4 | <code>var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);
</code>
|
同時(shí),，我們也要看到,，und和nul是檢測(cè)的Object類型，才輸出的true,，因?yàn)閖s中沒有Undefined和Null的這種全局類型,，他們und和nul都屬于Object類型，因此輸出了true,。
3. 使用constructor檢測(cè)
在使用instanceof檢測(cè)變量類型時(shí),，我們是檢測(cè)不到number, ‘string’, bool的類型的。因此,，我們需要換一種方式來解決這個(gè)問題,。
constructor本來是原型對(duì)象上的屬性，指向構(gòu)造函數(shù)。但是根據(jù)實(shí)例對(duì)象尋找屬性的順序,，若實(shí)例對(duì)象上沒有實(shí)例屬性或方法時(shí),，就去原型鏈上尋找，因此,，實(shí)例對(duì)象也是能使用constructor屬性的,。
我們先來輸出一下num.constructor的內(nèi)容，即數(shù)字類型的變量的構(gòu)造函數(shù)是什么樣子的：
1 2 | <code>function Number() { [native code] }
</code>
|
我們可以看到它指向了Number的構(gòu)造函數(shù),，因此,，我們可以使用num.constructor==Number來判斷num是不是Number類型的，其他的變量也類似：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <code>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
);
// 所有結(jié)果均為true
</code>
|
從輸出的結(jié)果我們可以看出,，除了undefined和null,，其他類型的變量均能使用constructor判斷出類型。
不過使用constructor也不是保險(xiǎn)的,，因?yàn)閏onstructor屬性是可以被修改的,，會(huì)導(dǎo)致檢測(cè)出的結(jié)果不正確，例如：
1 2 3 4 5 6 7 8 9 10 11 | <code>function Person(){
}
function Student(){
}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true
</code>
|
在上面的例子中,，Student原型中的constructor被修改為指向到Person,，導(dǎo)致檢測(cè)不出實(shí)例對(duì)象John真實(shí)的構(gòu)造函數(shù)。
同時(shí),，使用instaceof和construcor,被判斷的array必須是在當(dāng)前頁面聲明的,！比如，一個(gè)頁面（父頁面）有一個(gè)框架,，框架中引用了一個(gè)頁面（子頁面）,，在子頁面中聲明了一個(gè)array，并將其賦值給父頁面的一個(gè)變量,，這時(shí)判斷該變量,，Array == object.constructor;會(huì)返回false；
原因：
1,、array屬于引用型數(shù)據(jù),，在傳遞過程中，僅僅是引用地址的傳遞,。
2,、每個(gè)頁面的Array原生對(duì)象所引用的地址是不一樣的，在子頁面聲明的array,，所對(duì)應(yīng)的構(gòu)造函數(shù),，是子頁面的Array對(duì)象；父頁面來進(jìn)行判斷,，使用的Array并不等于子頁面的Array,；切記,，不然很難跟蹤問題！
4. 使用Object.prototype.toString.call
我們先不管這個(gè)是什么,，先來看看他是怎么檢測(cè)變量類型的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <code>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]'
</code>
|
從輸出的結(jié)果來看,，Object.prototype.toString.call(變量)輸出的是一個(gè)字符串，字符串里有一個(gè)數(shù)組,，第一個(gè)參數(shù)是Object,，第二個(gè)參數(shù)就是這個(gè)變量的類型，而且,，所有變量的類型都檢測(cè)出來了,，我們只需要取出第二個(gè)參數(shù)即可?；蛘呖梢允褂?code>Object.prototype.toString.call(arr)==object Array來檢測(cè)變量arr是不是數(shù)組,。
我們現(xiàn)在再來看看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)
上面的規(guī)范定義了Object.prototype.toString的行為：首先，取得對(duì)象的一個(gè)內(nèi)部屬性[[Class]],，然后依據(jù)這個(gè)屬性,，返回一個(gè)類似于”[object Array]”的字符串作為結(jié)果（看過ECMA標(biāo)準(zhǔn)的應(yīng)該都知道，[[]]用來表示語言內(nèi)部用到的,、外部不可直接訪問的屬性，稱為“內(nèi)部屬性”）,。利用這個(gè)方法,，再配合call，我們可以取得任何對(duì)象的內(nèi)部屬性[[Class]],，然后把類型檢測(cè)轉(zhuǎn)化為字符串比較,，以達(dá)到我們的目的。
5. jquery中$.type的實(shí)現(xiàn)
在jquery中提供了一個(gè)$.type的接口,，來讓我們檢測(cè)變量的類型：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <code>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
</code>
|
看到輸出結(jié)果,，有沒有一種熟悉的感覺？對(duì),，他就是上面使用Object.prototype.toString.call(變量)輸出的結(jié)果的第二個(gè)參數(shù)呀,。
我們這里先來對(duì)比一下上面所有方法檢測(cè)出的結(jié)果，橫排是使用的檢測(cè)方法,， 豎排是各個(gè)變量：
| 類型判斷 |
typeof |
instanceof |
constructor |
toString.call |
$.type |
| num |
number |
false |
true |
[object Number] |
number |
| str |
string |
false |
true |
[object String] |
string |
| bool |
boolean |
false |
true |
[object Boolean] |
boolean |
| arr |
object |
true |
true |
[object Array] |
array |
| json |
object |
true |
true |
[object Object] |
object |
| func |
function |
true |
true |
[object Function] |
function |
| und |
undefined |
false |
- |
[object Undefined] |
undefined |
| nul |
object |
false |
- |
[object Null] |
null |
| date |
object |
true |
true |
[object Date] |
date |
| reg |
object |
true |
true |
[object RegExp] |
regexp |
| error |
object |
true |
true |
[object Error] |
error |
| 優(yōu)點(diǎn) |
使用簡(jiǎn)單，能直接輸出結(jié)果 |
能檢測(cè)出復(fù)雜的類型 |
基本能檢測(cè)出所有的類型 |
檢測(cè)出所有的類型 |
- |
| 缺點(diǎn) |
檢測(cè)出的類型太少 |
基本類型檢測(cè)不出,，且不能跨iframe |
不能跨iframe,，且constructor易被修改 |
IE6下undefined,null均為Object |
- |
這樣對(duì)比一下,，就更能看到各個(gè)方法之間的區(qū)別了，而且Object.prototype.toString.call和$type輸出的結(jié)果真的很像,。我們來看看jquery（2.1.2版本）內(nèi)部是怎么實(shí)現(xiàn)$.type方法的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <code>// 實(shí)例對(duì)象是能直接使用原型鏈上的方法的
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) ?
(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();
});
</code>
|
我們先來看看jQuery.each的這部分：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <code>// Populate the class2type map
jQuery.each(Boolean Number String Function Array Date RegExp Object Error.split( ), function(i, name) {
class2type[ [object + name + ] ] = name.toLowerCase();
});
//循環(huán)之后,，`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'
}
</code>
|
再來看看type方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <code>// type的實(shí)現(xiàn)
type: function( obj ) {
// 若傳入的是null或undefined,，則直接返回這個(gè)對(duì)象的字符串
// 即若傳入的對(duì)象obj是undefined，則返回undefined
if ( obj == null ) {
return obj + ;
}
// Support: Android<4.0, iOS<6 (functionish RegExp)
// 低版本regExp返回function類型；高版本已修正,，返回object類型
// 若使用typeof檢測(cè)出的obj類型是object或function，則返回class2type的值,，否則返回typeof檢測(cè)的類型
return (typeof obj === object || typeof obj === function) ?
(class2type[ toString.call(obj) ] || object) :
typeof obj;
}
</code>
|
當(dāng)typeof obj === object || typeof obj === function時(shí),，就返回class2type[ toString.call(obj)。到這兒,，我們就應(yīng)該明白為什么Object.prototype.toString.call和$.type那么像了吧,，其實(shí)jquery中就是用Object.prototype.toString.call實(shí)現(xiàn)的，把’[object Boolean]’類型轉(zhuǎn)成’boolean’類型并返回,。若class2type存儲(chǔ)的沒有這個(gè)變量的類型，那就返回”object”,。
除了”object”和”function”類型，其他的類型則使用typeof進(jìn)行檢測(cè),。即number, string, boolean類型的變量,，使用typeof即可,。
|
