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) // undefind
console.log(typeof null)   // object
console.log(typeof true)   // boolean
console.log(typeof 43)    // number
console.log(typeof '21')   // string
console.log(typeof {a:1})   // object
console.log(typeof Symbol()) // symbol
console.log(typeof 123n)   // bigint
function a() {}
console.log(typeof a)     // function
var date = new Date()
var error = new Error()
console.log(typeof date)   // object
console.log(typeof error)   // object

二、instanceof

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

通俗一些講，instanceof 用來比較一個物件是否為某一個建構函式的例項。注意，instanceof可以準確的判斷複雜資料型別，但是不能正確判斷基本資料型別

console.log(12 instanceof Number) // false
console.log('22' instanceof String) // false
console.log(true instanceof Boolean) // false
console.log(null instanceof Object) // false
console.log(undefined instanceof Object) // false
 
console.log([] instanceof Array)  // true
console.log({a: 1} instanceof Object) // true
console.log(json instanceof Object) // true
function a() {}
console.log(a instanceof Function) // true
console.log(new Date() instanceof Date) //true
console.log(reg instanceof RegExp) //true
console.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))  // true
console.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)) // number
console.log(type('12')) // string
console.log(type({})) // object
console.log(type([])) // array

四、constructor

constructor屬性，可以得知某個例項物件，到底是哪一個建構函式產生的。

constructor屬性表示原型物件與建構函式之間的關聯關係，如果修改了原型物件，一般會同時修改constructor屬性，防止引用的時候出錯。所以，修改原型物件時，一般要同時修改constructor屬性的指向。

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

注意：

1、null 和 undefined 是無效的物件，因此是不會有 constructor 存在的，這兩種型別的資料需要通過其他方式來判斷。

2、函式的 constructor 是不穩定的，這個主要體現在自定義物件上，當開發者重寫 prototype 後，原有的 constructor 引用會丟失，constructor 會預設為 Object

以上就是JavaScript型別判斷的四種方法的詳細內容，更多關於JavaScript型別判斷的資料請關注我們其它相關文章！