var name = "Jack";
var age = 32;
var single = false;
var app;  //undefined

console.log(typeof name);  //string
console.log(typeof age);  //number
console.log(typeof single); //boolean
console.log(typeof app);  //undefined
console.log(typeof null);  //object

發(fā)現(xiàn)除null外的其他4種基本類(lèi)型均可以用typeof來(lái)識(shí)別：

if(typeof name === "string") { name += "Zhang"; }
if(typeof age === "number") { age++; }
if(typeof single === "boolean" && single) { … }
if(typeof app === "undefined") { app = {}; }

因?yàn)閠ypeof null會(huì)得到object，所以直接用===來(lái)檢測(cè)null：

if(el === null) { … }

二、對(duì)象

JavaScript的對(duì)象包括內(nèi)置對(duì)象（Date，RegExp ，Error等）和自定義對(duì)象。

（注意，F(xiàn)unction和Array雖然也都是內(nèi)置對(duì)象，但下一節(jié)單獨(dú)講）

對(duì)象不能像基本類(lèi)型那樣用typeof來(lái)檢測(cè)了，因?yàn)闄z測(cè)出來(lái)的結(jié)果都是object：

console.log(typeof new Date());  //object
console.log(typeof new RegExp()); //object
console.log(typeof new Error());  //object
console.log(typeof new Person()); //用typeof檢測(cè)出自定義對(duì)象也是object

要改用instanceof來(lái)檢測(cè)：

var date = new Date();
var reg = new RegExp();
var err = new Error();
var me = new Person();

if(date instanceof Date) {  //檢測(cè)日期
  year = date.getFullYear(); 
}
if(reg instanceof RegExp) {  //檢測(cè)正則表達(dá)式
  reg.test(...); 
}
if(err instanceof Error) {  //檢測(cè)異常
  throw err; 
}
if(me instanceof Person) {  //檢測(cè)自定義對(duì)象
  ... 
}

但自定義對(duì)象有個(gè)問(wèn)題，假設(shè)瀏覽器frameA里和frameB里都定義了Person。 frameA里定義了me對(duì)象，用me instanceof Person檢測(cè)出來(lái)為true。但當(dāng)自定義對(duì)象me傳給frameB后，在frameB里instanceof會(huì)是false。

本節(jié)一開(kāi)頭就說(shuō)了，F(xiàn)unction和Array雖然也都是內(nèi)置對(duì)象，但留到下一節(jié)講。原因就是Function和Array也有和自定義對(duì)象相同的上述問(wèn)題。因此Function和Array一般不用instanceof

三、Function

上面說(shuō)了用instanceof檢測(cè)Function不能跨frame。因此用typeof來(lái)檢測(cè)，它可跨frame：

var func = function(){};
if(typeof func === 'function') { … }

但I(xiàn)E8以前用typeof來(lái)檢測(cè)DOM系函數(shù)會(huì)得到object，因此IE8以前改用in：

console.log(typeof document.getElementById);    //object，不是function
console.log(typeof document.getElementsByTagName); //object，不是function
console.log(typeof document.createElement);     //object，不是function

//IE8以前的IE瀏覽器，要改用in來(lái)檢測(cè)是否支持DOM函數(shù)
if("getElementById" in document) { … }    
if("getElementsByTagName" in document) { … }
if("createElement" in document) { … }

四、Array

上面說(shuō)了用instanceof檢測(cè)Array不能跨frame。ES5之前都自定義檢測(cè)方法。其中最精確的方法：依賴(lài)Array的toString會(huì)返回固定字符串”[Object Array]”的事實(shí)來(lái)檢測(cè)：

function isArray(arr) {
  return Object.prototype.toString.call(arr) === "[Object Array]";
}

該方法精確且優(yōu)雅，因此被很多庫(kù)所采納，最終在ES5被作為isArray方法引入了Array，參照MDN?，F(xiàn)在你不需要自定義檢測(cè)方法了，直接用isArray()即可。

其他檢測(cè)方法，都各有缺陷，不能100%精確。但作為一種思路是可以借鑒的。例如依賴(lài)Array是唯一包含sort方法的對(duì)象的事實(shí)來(lái)檢測(cè)：

function isArray(arr) {
  return typeof arr.sort === "function";
}

如果是自定義對(duì)象也定義了sort方法，該方法就失效了。

五、屬性

檢測(cè)屬性是否在實(shí)例對(duì)象中應(yīng)該用hasOwnProperty。如果你不關(guān)心屬性是在實(shí)例對(duì)象中還是在原型對(duì)象中，可以簡(jiǎn)單點(diǎn)用in

例如檢測(cè)字面量對(duì)象屬性：

var Person = {
  name: "Jack",
  age: 33
};
if("name" in Person) { … }         //true
if(Person.hasOwnProperty("name")) { … }  //true

例如實(shí)例對(duì)象屬性：

var Person = function (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.location = "Shanghai";

var me = new Person("Jack", 33)
if("name" in me) { … }         //true
if(me.hasOwnProperty("name")) { … }  //true
if("location" in me) { … }       //true
if(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好：

if (object[propName])      //Not Good，你怎么知道屬性值不是0或1？
if (object[propName] === null)    //Not Good，你怎么知道屬性值不是null？
if (object[propName] === undefined)  //Not Good，你怎么知道屬性值不是undefined？

總結(jié)

用typeof檢測(cè)string，number，boolean，undefined，F(xiàn)unction

用===檢測(cè)null

用isArray()檢測(cè)Array

用instanceof檢測(cè)內(nèi)置對(duì)象（除Function和Array）和自定義對(duì)象

用hasOwnProperty檢測(cè)屬性是否在實(shí)例對(duì)象中。如果你不關(guān)心屬性是在實(shí)例對(duì)象中還是在原型對(duì)象中，可以簡(jiǎn)單點(diǎn)用in

好了，本篇介紹如何檢測(cè)JavaScript各種類(lèi)型的內(nèi)容就到這里了，希望大家能夠認(rèn)真學(xué)習(xí)本文的內(nèi)容，或許對(duì)大家學(xué)習(xí)JavaScript有所幫助。

您可能感興趣的文章: