摘要:種原始類型對象屬性種原始類型中種原始類型為,,,,發(fā)現(xiàn)除外的其他種基本類型均可以用來識別因?yàn)闀玫剑灾苯佑脕頇z測對象的對象包括內(nèi)置對象,,等和自定義對象。其他檢測方法,都各有缺陷,不能精確。屬性檢測屬性是否在實(shí)例對象中應(yīng)該用。
本篇介紹一下如何檢測JavaScript各種類型。
? 5種原始類型
? 對象
? Function
? Array
? 屬性
5種原始類型
JavaScript中5種原始類型為string,number,boolean,undefined,null
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種基本類型均可以用typeof來識別:
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會得到object,所以直接用===來檢測null:
if(el === null) { … }
對象
JavaScript的對象包括內(nèi)置對象(Date,RegExp ,Error等)和自定義對象。
(注意,F(xiàn)unction和Array雖然也都是內(nèi)置對象,但下一節(jié)多帶帶講)
對象不能像基本類型那樣用typeof來檢測了,因?yàn)闄z測出來的結(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檢測出自定義對象也是object
要改用instanceof來檢測:
var date = new Date(); var reg = new RegExp(); var err = new Error(); var me = new Person(); if(date instanceof Date) { //檢測日期 year = date.getFullYear(); } if(reg instanceof RegExp) { //檢測正則表達(dá)式 reg.test(...); } if(err instanceof Error) { //檢測異常 throw err; } if(me instanceof Person) { //檢測自定義對象 ... }
但自定義對象有個(gè)問題,假設(shè)瀏覽器frameA里和frameB里都定義了Person。 frameA里定義了me對象,用me instanceof Person檢測出來為true。但當(dāng)自定義對象me傳給frameB后,在frameB里instanceof會是false。
本節(jié)一開頭就說了,F(xiàn)unction和Array雖然也都是內(nèi)置對象,但留到下一節(jié)講。原因就是Function和Array也有和自定義對象相同的上述問題。因此Function和Array一般不用instanceof
Function
上面說了用instanceof檢測Function不能跨frame。因此用typeof來檢測,它可跨frame:
var func = function(){};
if(typeof func === "function") { … }
但I(xiàn)E8以前用typeof來檢測DOM系函數(shù)會得到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來檢測是否支持DOM函數(shù)
if("getElementById" in document) { … } if("getElementsByTagName" in document) { … } if("createElement" in document) { … }
Array
上面說了用instanceof檢測Array不能跨frame。ES5之前都自定義檢測方法。其中最精確的方法:依賴Array的toString會返回固定字符串”[Object Array]”的事實(shí)來檢測:
function isArray(arr) { return Object.prototype.toString.call(arr) === "[Object Array]"; }
該方法精確且優(yōu)雅,因此被很多庫所采納,最終在ES5被作為isArray方法引入了Array,參照MDN?,F(xiàn)在你不需要自定義檢測方法了,直接用isArray()即可。
其他檢測方法,都各有缺陷,不能100%精確。但作為一種思路是可以借鑒的。例如依賴Array是唯一包含sort方法的對象的事實(shí)來檢測:
function isArray(arr) { return typeof arr.sort === "function"; }
如果是自定義對象也定義了sort方法,該方法就失效了。
屬性
檢測屬性是否在實(shí)例對象中應(yīng)該用hasOwnProperty。如果你不關(guān)心屬性是在實(shí)例對象中還是在原型對象中,可以簡單點(diǎn)用in
例如檢測字面量對象屬性:
var Person = { name: "Jack", age: 33 }; if("name" in Person) { … } //true if(Person.hasOwnProperty("name")) { … } //true
例如實(shí)例對象屬性:
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檢測string,number,boolean,undefined,F(xiàn)unction
用===檢測null
用isArray()檢測Array
用instanceof檢測內(nèi)置對象(除Function和Array)和自定義對象
用hasOwnProperty檢測屬性是否在實(shí)例對象中。如果你不關(guān)心屬性是在實(shí)例對象中還是在原型對象中,可以簡單點(diǎn)用in**
更多資源上:去轉(zhuǎn)盤網(wǎng);或者加我的QQ群一起討論學(xué)習(xí)js,css等技術(shù)(QQ群:512245829)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/80160.html