JavaScript之類型檢測

2019-11-06 07:14:28

字體：大中小

供稿：網(wǎng)友

判斷javaScript數(shù)據(jù)類型,也就是我們說的類型檢測,有五種方法:分別是typeof運(yùn)算符,instanceof操作符,Object.PRototype.toString方法,constructor屬性,duck type,這部分我推薦大家看看阮大大寫的Javascript標(biāo)準(zhǔn)參考教程

使用typeof檢測對象類型:

typeo作為最常用的檢測類型的方法,返回字符串類型,適合函數(shù)對象和基本類型(JavaScripe中的基本類型:number,string,boolean,null,undefined,object[對象])的判斷

typeof 100 //"number"typeof true //"boolean"typeof function //"function"typeof undefined //"undefined"typeof new Object() //"object"typeof [1,2] //"object"typeof NaN //"number"typeof null //"object"

可以看到,對于最基本的類型可以測試出類型,但對于其他的,包括日期,數(shù)組等大多都返回object類型,而且null也返回的是object類型,也就是沒有辦法知道確切的類型

使用instanceof檢測對象類型:

obj instanceof Object:左邊操作數(shù)obj為對象(如果不小心寫成基本類型,比如數(shù)字啥的,就會返回false),右邊操作數(shù)Object為函數(shù)對象或者是函數(shù)構(gòu)造器,否則拋出TypeError

實質(zhì)就是:instanceof操作符判斷左操作數(shù)對象的原型鏈上是否有右邊這個構(gòu)造函數(shù)的prototype屬性,也就是說指定對象是否是某個構(gòu)造函數(shù)的實例,最后返回布爾值,這個對整個原型鏈上的對象都是有效的,由于instanceof對整個原型鏈上的對象都有效,因此同一個實例對象,可能會對多個構(gòu)造函數(shù)都返回true!

[1,2] instanceof Array //truenew Object() instanceof Array /false

再某些ie版本中存在跨iframe問題,每個iframe下都有自己的一套原型鏈,跨frame實例化的對象彼此是不共享原型鏈,所以不同window或iframe間的對象類型檢測不能使用instanceof!!!

使用Object.prototype.toString方法:

Object.prototype.toString.apply([]); //"[object Array]"Object.prototype.toString.apply(function(){}) //"[object Function]"Object.prototype.toString.apply(null) //"[object Null]"Object.prototype.toString.apply(undefined) //"[object Undefined]"http://IE/7/8的Object.protope.toString.apply(null) //[object Object]"

使用constructor屬性:

所有實例對象都有constructor屬性,constructor屬性指向prototype對象所在的構(gòu)造函數(shù),就是說指向創(chuàng)建這個實例的構(gòu)造函數(shù),還是推薦阮大大的文章,看這個constructor屬性

使用duck type(鴨子類型):

比如判斷一個對象是否是數(shù)組,可以看這個對象是否擁有l(wèi)ength()等方法,不禁想到類數(shù)組轉(zhuǎn)數(shù)組的方法,看這里類數(shù)組轉(zhuǎn)數(shù)組了

JavaScript之類型檢測的總結(jié):

1.typeof:適合基本類型和function檢測,遇到null失效

2.通過{}.toString拿到,適合內(nèi)置對象和基本類型,遇到null和undefined失效

3.instanceof:適合自定義對象,也可以用來檢測原生對象,在不同iframe和window間檢測時失效

來看一道面試題:怎么判斷一個變量類型是不是數(shù)組?

1.通過constructor(不推薦使用):

[].constructor===Array //true

2.通過instanceof: