快捷導(dǎo)航

JavaScript類型檢測(cè)的方法實(shí)例教程

更新時(shí)間：2021年04月27日 09:07:32 作者：ABinea

這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測(cè)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

JavaScript是web前端廣泛應(yīng)用的語(yǔ)言之一，在網(wǎng)頁(yè)應(yīng)用制作、腳本制作、小程序等諸多領(lǐng)域具有不可替代的的地位。筆者學(xué)習(xí)了一端時(shí)間的前端，頗感JS知識(shí)點(diǎn)的繁碎，故將學(xué)習(xí)到的一些知識(shí)、思考和感悟記錄下來(lái)。

JS基本類型

JavaScript的基本類型分為原始基本類型和引用數(shù)據(jù)類型：

原始基本類型：

number
string
boolean
null
undefined
symbol

引用數(shù)據(jù)類型：

Object
Function
Array
Date
RegExp

注意：ES5中沒(méi)有symbol類型

類型檢測(cè)

類型檢測(cè)有5中常見(jiàn)的方法：

typeof
instanceof
Object.prototype.toString
constructor
duck type

1.typeof 判斷基本類型

使用關(guān)鍵字 typeof 返回的是類型名僅包括以下 7 種：number、string、boolean、undefined、symbol、object、function 。

null和大部分的引用類型都不能用 typeof 進(jìn)行判斷。

let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym = Symbol()

const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(typeof num) //number
console.log(typeof str) //string
console.log(typeof bool) //boolean
console.log(typeof nul) //object
console.log(typeof undef) //undefined
console.log(typeof sym) //symbol

console.log(typeof obj) //object
console.log(typeof arr) //object
console.log(typeof fun) //function
console.log(typeof date) //object
console.log(typeof reg) //object

注意：用typeof判斷null、Array、Date、RegExp等類型結(jié)果均為object

2.instanceof 判斷引用數(shù)據(jù)類型

instanceof利用的是變量的__proto__屬性指向原型的prototype屬性進(jìn)行類型判斷，需要注意的是，如果對(duì)基本數(shù)據(jù)類型使用直接賦值的方法，則__proto__屬性是不存在的，我們需要使用構(gòu)造函數(shù)。

const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(obj instanceof Object) //true
console.log(arr instanceof Array) //true
console.log(fun instanceof Function) //true
console.log(date instanceof Date) //true
console.log(reg instanceof RegExp) //true

let num1 = 32
let num2 = new Number(32)
console.log(num1 instanceof Number) //false
console.log(num2 instanceof Number) //true

另外，雖然 instanceof 能夠判斷出arr是Array的實(shí)例，但它認(rèn)為也是Object的實(shí)例，這對(duì)判斷一個(gè)未知引用類型并不友好。

const arr = new Array()
console.log(arr instanceof Array) //true
console.log(arr instanceof Object) //true

原因是 arr.__proto__的__proto__屬性指向Object的原型對(duì)象。

對(duì)于這種情況，可以換用 constructor 進(jìn)行判斷。

注意：不同window或iframe間的對(duì)象檢測(cè)不能使用instanceof ！

3.Object.prototype.toString 判斷類型

toString() 是 Object 的原型方法，每一個(gè)繼承 Object 的對(duì)象都有 toString 方法。

所有使用 typeof 返回值為 object 的對(duì)象都包含一個(gè)內(nèi)部屬性[[class]]，這個(gè)屬性無(wú)法直接訪問(wèn)，一般通過(guò)Object.prototype.toString()來(lái)查看。

如果 toString 方法沒(méi)有重寫(xiě)的話，默認(rèn)返回當(dāng)前對(duì)象的 [[Class]]，其格式為[object Xxx]，其中 Xxx 為對(duì)象的類型。但除了 Object 類型的對(duì)象外，其他類型直接使用 toString 方法時(shí)，會(huì)直接返回都是內(nèi)容的字符串，所以我們需要使用call或者apply方法來(lái)改變toString方法的執(zhí)行上下文。

let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym= Symbol()

const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RpgExp()

console.log(Object.prototype.toString.apply(num)) //"[object Number]"
console.log(Object.prototype.toString.apply(str)) //"[object String]"
console.log(Object.prototype.toString.apply(bool)) //"[object Boolean]"
console.log(Object.prototype.toString.apply(nul)) //"[object Null"
console.log(Object.prototype.toString.apply(undef)) //"[object Undefined]"
console.log(Object.prototype.toString.apply(sym) //"[object Symbol]"

console.log(Object.prototype.toString.call(obj)) //"[object Object]"
console.log(Object.prototype.toString.call(arr)) //"[object Array]"
console.log(Object.prototype.toString.call(fun)) //"[object Function]"
console.log(Object.prototype.toString.call(date)) //"[object Date]"
console.log(Object.prototype.toString.call(reg) //"[object RegExp]"

Object.prototype.toString可以判斷null，但習(xí)慣上我們用 null===null來(lái)判斷是否為null。

4.constructor判斷類型

constructor屬性會(huì)返回變量的構(gòu)造函數(shù)，當(dāng)然也可以利用字符串截取獲取構(gòu)造函數(shù)名稱進(jìn)行判斷來(lái)獲取布爾值，如" ".constructor === String。

let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym= Symbol()

const object = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(num.constructor) //ƒ Number() { [native code] }
console.log(str.constructor) //ƒ String() { [native code] }
console.log(bool.constructor) //ƒ Boolean() { [native code] }
console.log(nul.constructor) //Uncaught TypeError: Cannot read property 'constructor' of null
console.log(undef.constructor) //Uncaught TypeError: Cannot read property 'constructor' of undefined
console.log(sym.constructor) //ƒ Symbol() { [native code] }

console.log(obj.constructor === Object) //true
console.log(arr.constructor === Array) //true
console.log(fun.constructor === Function) //true
console.log(date.constructor === Date) //true
console.log(reg.constructor === RegExp) //true

無(wú)法用constructor判斷null和undefined，但可以避免使用instanceof時(shí)arr的原型對(duì)象既可以為Array也可以是Object。

5.duck type 利用特征來(lái)判斷類型

在程序設(shè)計(jì)中，鴨子類型（英語(yǔ)：duck typing）是動(dòng)態(tài)類型的一種風(fēng)格。在這種風(fēng)格中，一個(gè)對(duì)象有效的語(yǔ)義，不是由繼承自特定的類或?qū)崿F(xiàn)特定的接口，而是由"當(dāng)前方法和屬性的集合"決定。

“當(dāng)看到一只鳥(niǎo)走起來(lái)像鴨子、游泳起來(lái)像鴨子、叫起來(lái)也像鴨子，那么這只鳥(niǎo)就可以被稱為鴨子?！?/p>

在鴨子類型中，關(guān)注點(diǎn)在于對(duì)象的行為，能作什么；而不是關(guān)注對(duì)象所屬的類型。

例如，在不使用鴨子類型的語(yǔ)言中，我們可以編寫(xiě)一個(gè)函數(shù)，它接受一個(gè)類型為"鴨子"的對(duì)象，并調(diào)用它的"走"和"叫"方法。

隨后，在使用鴨子類型的函數(shù)中，可以接受一個(gè)任意類型的對(duì)象，并調(diào)用它的"走"和"叫"方法。如果這些需要被調(diào)用的方法不存在，那么將引發(fā)一個(gè)運(yùn)行時(shí)錯(cuò)誤。任何擁有這樣的正確的"走"和"叫"方法的對(duì)象都可被函數(shù)接受。

比如判斷一個(gè)對(duì)象是否是數(shù)組，可以看這個(gè)對(duì)象是否擁有push()等方法