JavaScript有八種內置類型，除對象外，其他統稱為“基本類型”。

空值（null) 未定義(undefined) 布爾值（boolean) 數字（number) 字符串（string) 對象 (object) 符號（symbol, ES6中新增) 大整數（BigInt, ES2020 引入）

Symbol： 是ES6中引入的一種原始數據類型，表示獨一無二的值。

BigInt：是 ES2020 引入的一種新的數據類型，用來解決 JavaScript中數字只能到 53 個二進制位（JavaScript 所有數字都保存成 64 位浮點數，大于這個范圍的整數，無法精確表示的問題。具體可查看：新數據類型 — BigInt

一、typeof

typeof是一個操作符而不是函數，其右側跟一個一元表達式，并返回這個表達式的數據類型。返回的結果用該類型的字符串(全小寫字母)形式表示，包括以下 8 種：number、boolean、symbol、string、object、undefined、function 、bigInt等。

typeof原理是不同的對象在底層都表示為二進制，在Javascript中二進制前（低）三位存儲其類型信息。

000: 對象 010: 浮點數 100：字符串 110：布爾 1：整數

console.log(typeof undefined) // undefindconsole.log(typeof null) // objectconsole.log(typeof true) // booleanconsole.log(typeof 43) // numberconsole.log(typeof ’21’) // stringconsole.log(typeof {a:1}) // objectconsole.log(typeof Symbol()) // symbolconsole.log(typeof 123n) // bigintfunction a() {}console.log(typeof a) // functionvar date = new Date()var error = new Error()console.log(typeof date) // objectconsole.log(typeof error) // object

二、instanceof

instanceof 是用來判斷 A 是否為 B 的實例，表達式為：A instanceof B，如果 A 是 B 的實例，則返回 true,否則返回 false。 在這里需要特別注意的是：instanceof 檢測的是原型

通俗一些講，instanceof 用來比較一個對象是否為某一個構造函數的實例。注意，instanceof可以準確的判斷復雜數據類型，但是不能正確判斷基本數據類型

console.log(12 instanceof Number) // falseconsole.log(’22’ instanceof String) // falseconsole.log(true instanceof Boolean) // falseconsole.log(null instanceof Object) // falseconsole.log(undefined instanceof Object) // false console.log([] instanceof Array) // trueconsole.log({a: 1} instanceof Object) // trueconsole.log(json instanceof Object) // truefunction a() {}console.log(a instanceof Function) // trueconsole.log(new Date() instanceof Date) //trueconsole.log(reg instanceof RegExp) //trueconsole.log(error instanceof Error) // true

三、Object.prototype.toString.call()

toString() 是 Object 的原型方法，調用該方法，默認返回當前對象的 [[Class]] 。這是一個內部屬性，其格式為 [object Xxx] ，其中 Xxx 就是對象的類型。

對于 Object 對象，直接調用 toString() 就能返回 [object Object] 。而對于其他對象，則需要通過 call / apply 來調用才能返回正確的類型信息。

console.log(Object.prototype.toString.call(1)) // [object Number]console.log(Object.prototype.toString.call(1n)) // [object BigInt]console.log(Object.prototype.toString.call(’123’)) // [object String]console.log(Object.prototype.toString.call(true)) // [object Boolean]console.log(Object.prototype.toString.call(undefined)) // [object Undefined]console.log(Object.prototype.toString.call(null)) // [object Null]console.log(Object.prototype.toString.call({})) // [object Object]console.log(Object.prototype.toString.call([])) // [object Array]console.log(Object.prototype.toString.call(function a() {})) // [object Function]console.log(Object.prototype.toString.call(Symbol())) // [object Symbol]console.log(Object.prototype.toString.call(Math)) // [object Math]console.log(Object.prototype.toString.call(JSON)) // [object JSON]console.log(Object.prototype.toString.call(new Date())) // [object Date]console.log(Object.prototype.toString.call(new RegExp())) // [object RegExp]console.log(Object.prototype.toString.call(new Error)) // [object Error]console.log(Object.prototype.toString.call(window) // [object Window]console.log(Object.prototype.toString.call(document) // [object HTMLDocument]

使用該方法我們可以封裝一個isType方法來對類型進行判斷

let isType = (type, obj) => { return Object.prototype.toString.call(obj) === `[object ${type}]`}console.log(isType(’Number’, 12)) // trueconsole.log(isType(’Number’, ’12’)) // false

或者

let type = function(o) { let s = Object.prototype.toString.call(o); return s.match(/[object (.*?)]/)[1].toLowerCase();};console.log(type(12)) // numberconsole.log(type(’12’)) // stringconsole.log(type({})) // objectconsole.log(type([])) // array

四、constructor

constructor屬性，可以得知某個實例對象，到底是哪一個構造函數產生的。

constructor屬性表示原型對象與構造函數之間的關聯關系，如果修改了原型對象，一般會同時修改constructor屬性，防止引用的時候出錯。所以，修改原型對象時，一般要同時修改constructor屬性的指向。

console.log(’22’.constructor === String) // trueconsole.log(true.constructor === Boolean) // trueconsole.log([].constructor === Array)// trueconsole.log(document.constructor === HTMLDocument) // trueconsole.log(window.constructor === Window) // trueconsole.log(new Number(22).constructor === Number) // trueconsole.log(new Function().constructor === Function) // trueconsole.log((new Date()).constructor === Date) // trueconsole.log(new RegExp().constructor === RegExp) // trueconsole.log(new Error().constructor === Error) // true

注意：

1、null 和 undefined 是無效的對象，因此是不會有 constructor 存在的，這兩種類型的數據需要通過其他方式來判斷。

2、函數的 constructor 是不穩定的，這個主要體現在自定義對象上，當開發者重寫 prototype 后，原有的 constructor 引用會丟失，constructor 會默認為 Object

以上就是JavaScript類型判斷的四種方法的詳細內容，更多關于JavaScript類型判斷的資料請關注好吧啦網其它相關文章！