快捷導(dǎo)航

JavaScript類型檢測的方法實例教程

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

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

前言

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

JS基本類型

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

原始基本類型：

number
string
boolean
null
undefined
symbol

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

Object
Function
Array
Date
RegExp

注意：ES5中沒有symbol類型

類型檢測

類型檢測有5中常見的方法：

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)行類型判斷，需要注意的是，如果對基本數(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的實例，但它認(rèn)為也是Object的實例，這對判斷一個未知引用類型并不友好。

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

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

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

注意：不同window或iframe間的對象檢測不能使用instanceof ！

3.Object.prototype.toString 判斷類型

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

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

如果 toString 方法沒有重寫的話，默認(rèn)返回當(dāng)前對象的 [[Class]]，其格式為[object Xxx]，其中 Xxx 為對象的類型。但除了 Object 類型的對象外，其他類型直接使用 toString 方法時，會直接返回都是內(nèi)容的字符串，所以我們需要使用call或者apply方法來改變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來判斷是否為null。

4.constructor判斷類型

constructor屬性會返回變量的構(gòu)造函數(shù)，當(dāng)然也可以利用字符串截取獲取構(gòu)造函數(shù)名稱進(jìn)行判斷來獲取布爾值，如" ".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

無法用constructor判斷null和undefined，但可以避免使用instanceof時arr的原型對象既可以為Array也可以是Object。

5.duck type 利用特征來判斷類型

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

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

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

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

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

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