前言：
在介紹檢測(cè)數(shù)據(jù)類(lèi)型的方法之前，先說(shuō)說(shuō)JavaScript中數(shù)據(jù)類(lèi)型有哪些吧~

JS數(shù)據(jù)類(lèi)型主要分為兩大類(lèi)：基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型

基本數(shù)據(jù)類(lèi)型：number、string、boolean、null、undefined、symbol（es6）
引用數(shù)據(jù)類(lèi)型：object（array、function、date...）

數(shù)據(jù)類(lèi)型詳細(xì)介紹請(qǐng)點(diǎn)擊這里

檢測(cè)數(shù)據(jù)類(lèi)型四種方法：

• typeof
• instanceof
• constructor
• Object.prototype.toString.call()

1. typeof

語(yǔ)法：

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 的返回類(lèi)型為字符串，值有：number、boolean、string、object、function、undefined、symbol、bigint
• typeof 一般用來(lái)判斷基本數(shù)據(jù)類(lèi)型，除了判斷null會(huì)輸出"object"，其它都是正確的
• typeof 判斷引用數(shù)據(jù)類(lèi)型時(shí)，除了判斷函數(shù)會(huì)輸出"function",其它都是輸出"object"

注意：這里涉及兩個(gè)經(jīng)?？嫉拿嬖囶}！

•  null 的數(shù)據(jù)類(lèi)型是object （null是一個(gè)空的引用對(duì)象，是一個(gè)占位符）
•  console.log 的數(shù)據(jù)類(lèi)型是function 
•  對(duì)于引用數(shù)據(jù)類(lèi)型的判斷，使用typeof并不準(zhǔn)確，所以可以使用instanceof來(lái)判斷引用數(shù)據(jù)類(lèi)型

2. instanceof

instanceof 可以準(zhǔn)確的判斷引用數(shù)據(jù)類(lèi)型，它的原理是檢測(cè)構(gòu)造函數(shù)的prototype屬性是否在某個(gè)實(shí)例對(duì)象的原型鏈上

語(yǔ)法：

obj1 instanceof obj2 //obj1 是否是 obj2的實(shí)例

示例：

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 用來(lái)判斷對(duì)象，代碼形式為 【obj1 instanceof obj2】（obj2 必須為對(duì)象，否則會(huì)報(bào)錯(cuò)！）
• instanceof 返回值為布爾值

注意：

instanceof只能用來(lái)判斷兩個(gè)對(duì)象是否屬于實(shí)例關(guān)系， 而不能判斷一個(gè)對(duì)象實(shí)例具體屬于哪種類(lèi)型

3. constructor（構(gòu)造函數(shù)）

當(dāng)一個(gè)函數(shù) F被定義時(shí)，JS引擎會(huì)為F添加 prototype 原型，然后再在 prototype上添加一個(gè) constructor 屬性，并讓其指向 F 的引用。

如下所示：

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

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

同樣，JavaScript 中的內(nèi)置對(duì)象在內(nèi)部構(gòu)建時(shí)也是這樣做的：

 ??注意：

• null和undefined是無(wú)效的對(duì)象，所以他們不會(huì)有constructor屬性！
• 函數(shù)的constructor是不穩(wěn)定的，主要是因?yàn)殚_(kāi)發(fā)者可以重寫(xiě)prototype，原有的constructor引用會(huì)丟失，constructor會(huì)默認(rèn)為Object

為什么變成了 Object？

因?yàn)?prototype 被重新賦值的是一個(gè) { }， { } 是 new Object() 的字面量，因此 new Object() 會(huì)將 Object 原型上的 constructor 傳遞給 { }，也就是 Object 本身。

因此，為了規(guī)范開(kāi)發(fā)，在重寫(xiě)對(duì)象原型時(shí)一般都需要重新給 constructor 賦值，以保證對(duì)象實(shí)例的類(lèi)型不被篡改。

4. Object.prototype.toString.call()

toString() 是 Object 的原型方法，調(diào)用該方法，默認(rèn)返回當(dāng)前對(duì)象的 [[Class]] 。這是一個(gè)內(nèi)部屬性，其格式為 [object Xxx] ，其中 Xxx 就是對(duì)象的類(lèi)型。

對(duì)于 Object 對(duì)象，直接調(diào)用toString()  就能返回 [object Object] 。而對(duì)于其他對(duì)象，則需要通過(guò) call / apply 來(lái)調(diào)用才能返回正確的類(lèi)型信息。

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 是全局對(duì)象 global 的引用

到此這篇關(guān)于JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法的文章就介紹到這了,更多相關(guān)JavaScript檢測(cè)數(shù)據(jù)類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論