JavaScript中檢測數(shù)據(jù)類型的四種方法
前言:
在介紹檢測數(shù)據(jù)類型的方法之前,先說說JavaScript中數(shù)據(jù)類型有哪些吧~
JS數(shù)據(jù)類型主要分為兩大類:基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
基本數(shù)據(jù)類型:number、string、boolean、null、undefined、symbol(es6)
引用數(shù)據(jù)類型:object(array、function、date...)
檢測數(shù)據(jù)類型四種方法:
- typeof
- instanceof
- constructor
- Object.prototype.toString.call()
1. typeof
語法:
typeof(變量) //or typeof 變量
示例:
console.log(typeof ""); ? ? ? ? ? ?//string
console.log(typeof 1); ? ? ? ? ? ? //number
console.log(typeof true); ? ? ? ? ?//boolean
console.log(typeof null); ? ? ? ? ?//object!!!
console.log(typeof undefined); ? ? //undefined
console.log(typeof []); ? ? ? ? ? ?//object
console.log(typeof function(){}); ?//function
console.log(typeof console.log); ? //function
console.log(typeof {}); ? ? ? ? ? ?//object
console.log(typeof Symbol()); ? ? ?//symbol(es6)
console.log(typeof 23423n); ? ? ? ?//bigint(谷歌67版本新提出)總結(jié):
typeof的返回類型為字符串,值有:number、boolean、string、object、function、undefined、symbol、biginttypeof一般用來判斷基本數(shù)據(jù)類型,除了判斷null會輸出"object",其它都是正確的typeof判斷引用數(shù)據(jù)類型時,除了判斷函數(shù)會輸出"function",其它都是輸出"object"
注意:這里涉及兩個經(jīng)??嫉拿嬖囶}!
-
null的數(shù)據(jù)類型是object (null是一個空的引用對象,是一個占位符) console.log的數(shù)據(jù)類型是function- 對于引用數(shù)據(jù)類型的判斷,使用typeof并不準(zhǔn)確,所以可以使用instanceof來判斷引用數(shù)據(jù)類型
2. instanceof
instanceof 可以準(zhǔn)確的判斷引用數(shù)據(jù)類型,它的原理是檢測構(gòu)造函數(shù)的prototype屬性是否在某個實例對象的原型鏈上
語法:
obj1 instanceof obj2 //obj1 是否是 obj2的實例
示例:
console.log(9 instanceof Number); ? ? ? ? ? ? ? ? ? ?// false
console.log(true instanceof Boolean); ? ? ? ? ? ? ? ?// false?
console.log('libo' instanceof String); ? ? ? ? ? ? ? // false ?
console.log([] instanceof Array); ? ? ? ? ? ? ? ? ? ?// true
console.log(function(){} instanceof Function); ? ? ? // true
console.log({} instanceof Object); ? ? ? ? ? ? ? ? ? // true
// 注意以下兩組
console.log(typeof null); ? ? ? ? ? ? ? ? ? ? ? ? ? ?//object
console.log(null instanceof Object); ? ? ? ? ? ? ? ? //false !!!
console.log(typeof NaN); ? ? ? ? ? ? ? ? ? ? ? ? ? ? //number
console.log(NaN instanceof Number); ? ? ? ? ? ? ? ? ?//false !!!總結(jié):
instanceof用來判斷對象,代碼形式為 【obj1 instanceof obj2】(obj2 必須為對象,否則會報錯?。?/li>instanceof返回值為布爾值
注意:
instanceof只能用來判斷兩個對象是否屬于實例關(guān)系, 而不能判斷一個對象實例具體屬于哪種類型
3. constructor(構(gòu)造函數(shù))
當(dāng)一個函數(shù) F被定義時,JS引擎會為F添加 prototype 原型,然后再在 prototype上添加一個 constructor 屬性,并讓其指向 F 的引用。
如下所示:

當(dāng)執(zhí)行 var f = new F() 時,F(xiàn) 被當(dāng)成了構(gòu)造函數(shù),f 是F的實例對象,此時 F 原型上的 constructor 傳遞到了 f 上,因此f.constructor === F

可以看出,F(xiàn) 利用原型對象上的 constructor 引用了自身,當(dāng) F 作為構(gòu)造函數(shù)來創(chuàng)建對象時,原型上的 constructor 就被遺傳到了新創(chuàng)建的對象上, 從原型鏈角度講,構(gòu)造函數(shù) F 就是新對象的類型。這樣做的意義是,讓新對象在誕生以后,就具有可追溯的數(shù)據(jù)類型。
同樣,JavaScript 中的內(nèi)置對象在內(nèi)部構(gòu)建時也是這樣做的:

??注意:
- null和undefined是無效的對象,所以他們不會有constructor屬性!
- 函數(shù)的constructor是不穩(wěn)定的,主要是因為開發(fā)者可以重寫prototype,原有的constructor引用會丟失,constructor會默認(rèn)為Object
為什么變成了 Object?
因為 prototype 被重新賦值的是一個 { }, { } 是 new Object() 的字面量,因此 new Object() 會將 Object 原型上的 constructor 傳遞給 { },也就是 Object 本身。
因此,為了規(guī)范開發(fā),在重寫對象原型時一般都需要重新給 constructor 賦值,以保證對象實例的類型不被篡改。
4. Object.prototype.toString.call()
toString() 是 Object 的原型方法,調(diào)用該方法,默認(rèn)返回當(dāng)前對象的 [[Class]] 。這是一個內(nèi)部屬性,其格式為 [object Xxx] ,其中 Xxx 就是對象的類型。
對于 Object 對象,直接調(diào)用toString() 就能返回 [object Object] 。而對于其他對象,則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。
Object.prototype.toString.call('') ; ? ? ? ? ? ? ?// [object String]
Object.prototype.toString.call(1) ; ? ? ? ? ? ? ? // [object Number]
Object.prototype.toString.call(true) ; ? ? ? ? ? ?// [object Boolean]
Object.prototype.toString.call(Symbol()); ? ? ? ? // [object Symbol]
Object.prototype.toString.call(undefined) ; ? ? ? // [object Undefined]
Object.prototype.toString.call(null) ; ? ? ? ? ? ?// [object Null]
Object.prototype.toString.call(new Function()) ; ?// [object Function]
Object.prototype.toString.call(new Date()) ; ? ? ?// [object Date]
Object.prototype.toString.call([]) ; ? ? ? ? ? ? ?// [object Array]
Object.prototype.toString.call(new RegExp()) ; ? ?// [object RegExp]
Object.prototype.toString.call(new Error()) ; ? ? // [object Error]
Object.prototype.toString.call(document) ; ? ? ? ?// [object HTMLDocument]
Object.prototype.toString.call(window) ; ? ? ? ? ?// [object global] window 是全局對象 global 的引用到此這篇關(guān)于JavaScript中檢測數(shù)據(jù)類型的四種方法的文章就介紹到這了,更多相關(guān)JavaScript檢測數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 定時器setTimeout無法調(diào)用局部變量的解決辦法
javascript中定時器setTimeout無法調(diào)用局部變量,只需要將setTimeout的第一個參數(shù)改成函數(shù)對象,而不是字符串,就可以了2013-11-11

