JS 中對變數類型的判斷

來源：蚊子

https://segmentfault.com/a/1190000002962215

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

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

varnum=123;

varstr="abcdef";

varbool=true;

vararr=[1,2,3,4];

varjson={name:"wenzi",age:25};

varfunc=function(){console.log("this is function");}

varund=undefined;

varnul=null;

vardate=newDate();

varreg= /^[a-zA-Z]{5,20}$/;

varerror=newError();

1. 使用typeof檢測

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

console.log(

typeofnum,

typeofstr,

typeofbool,

typeofarr,

typeofjson,

typeoffunc,

typeofund,

typeofnul,

typeofdate,

typeofreg,

typeoferror

);

// 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 方法要求開發者明確地確認對象為某特定類型。例如：

functionPerson(){

}

varTom=newPerson();

console.log(TominstanceofPerson);// true

我們再看看下面的例子：

functionPerson(){

}

functionStudent(){

}

Student.prototype=newPerson();

varJohn=newStudent();

console.log(JohninstanceofStudent);// true

console.log(John instancdofPerson);// true

instanceof還能檢測出多層繼承的關係。

好了，我們來使用instanceof檢測上面的那些變數：

console.log(

numinstanceofNumber,

strinstanceofString,

boolinstanceofBoolean,

arrinstanceofArray,

jsoninstanceofObject,

funcinstanceofFunction,

undinstanceofObject,

nulinstanceofObject,

dateinstanceofDate,

reginstanceofRegExp,

errorinstanceofError

)

// 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，是可以檢測出類型的：

varnum=newNumber(123);

varstr=newString("abcdef");

var boolean=newBoolean(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類型的，其他的變數也類似：

functionPerson(){

}

varTom=newPerson();

// 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屬性是可以被修改的，會導致檢測出的結果不正確，例如：

functionPerson(){

}

functionStudent(){

}

Student.prototype=newPerson();

varJohn=newStudent();

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；切記，不然很難跟蹤問題！

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

console.log(

);

// "[object Number]" "[object String]" "[object Boolean]" "[object Array]" "[object Object]"

// "[object Function]" "[object Undefined]" "[object Null]" "[object Date]" "[object RegExp]" "[object Error]"

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)

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

我們這裡先來對比一下上面所有方法檢測出的結果，橫排是使用的檢測方法， 豎排是各個變數：

// 實例對象是能直接使用原型鏈上的方法的

varclass2type={};

vartoString=class2type.toString;

// 省略部分代碼...

type:function(obj){

if(obj==null){

returnobj+"";

}

// Support: Android

return(typeofobj==="object"||typeofobj==="function")?

(class2type[toString.call(obj)]||"object"):

typeofobj;

},

// 省略部分代碼...

// 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){

returnobj+"";

}

// Support: Android

// 低版本regExp返回function類型；高版本已修正，返回object類型

// 若使用typeof檢測出的obj類型是object或function，則返回class2type的值，否則返回typeof檢測的類型

return(typeofobj==="object"||typeofobj==="function")?

(class2type[toString.call(obj)]||"object"):

typeofobj;

}

除了"object"和"function"類型，其他的類型則使用typeof進行檢測。即number, string, boolean類型的變數，使用typeof即可。

【關於投稿】

如果大家有原創好文投稿，請直接給公號發送留言。

① 留言格式：

【投稿】+《 文章標題》+ 文章鏈接

② 示例：

【投稿】《不要自稱是程序員，我十多年的 IT 職場總結》：http://blog.jobbole.com/94148/

③ 最後請附上您的個人簡介哈~

覺得本文對你有幫助？請分享給更多人

關注「前端大全」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！