JS中檢測數據類型的四種方法
- 2022 年 1 月 7 日
- 筆記
- javascript, 前端
前言
在介紹檢測數據類型的方法之前，先說說JavaScript中數據類型有哪些吧~
JS數據類型主要分為兩大類：基本數據類型和引用數據類型
- 基本數據類型：number、string、boolean、null、undefined、symbol（es6）
- 引用數據類型：object（array、function、date…）
檢測數據類型四種方法
- typeof
- instanceof
- constructor
- Object.prototype.toString.call()
1. typeof
語法：
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(Google67版本新提出)
總結：
typeof的返回類型為字元串，值有：number、boolean、string、object、function、undefined、symbol、biginttypeof一般用來判斷基本數據類型，除了判斷null會輸出”object”，其它都是正確的typeof判斷引用數據類型時，除了判斷函數會輸出”function”,其它都是輸出”object”
注意：這裡涉及兩個經常考的面試題！
-
null的數據類型是object （null是一個空的引用對象，是一個佔位符） -
console.log的數據類型是function - 對於引用數據類型的判斷，使用
typeof並不準確，所以可以使用instanceof來判斷引用數據類型
2. instanceof
instanceof 可以準確的判斷引用數據類型，它的原理是檢測構造函數的
prototype屬性是否在某個實例對象的原型鏈上
語法：
obj1 instanceof obj2 //obj1 是否是 obj2的實例
示例：
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 !!!
總結：
instanceof用來判斷對象
instanceof只能用來判斷兩個對象是否屬於實例關係， 而不能判斷一個對象實例具體屬於哪種類型
3. constructor（構造函數）
當一個函數 F被定義時，JS引擎會為F添加 prototype 原型，然後再在 prototype上添加一個 constructor 屬性，並讓其指向 F 的引用。如下所示：
當執行 var f = new F() 時，F 被當成了構造函數，f 是F的實例對象，此時 F 原型上的 constructor 傳遞到了 f 上，因此 f.constructor === F
可以看出，F 利用原型對象上的 constructor 引用了自身，當 F 作為構造函數來創建對象時，原型上的 constructor 就被遺傳到了新創建的對象上， 從原型鏈角度講，構造函數 F 就是新對象的類型。這樣做的意義是，讓新對象在誕生以後，就具有可追溯的數據類型。
同樣，JavaScript 中的內置對象在內部構建時也是這樣做的：
🔺注意：
- null和undefined是無效的對象，所以他們不會有constructor屬性！
- 函數的constructor是不穩定的，主要是因為開發者可以重寫prototype，原有的constructor引用會丟失，constructor會默認為Object
為什麼變成了 Object？
因為 prototype 被重新賦值的是一個 { }， { } 是 new Object() 的字面量，因此 new Object() 會將 Object 原型上的 constructor 傳遞給 { }，也就是 Object 本身。
因此，為了規範開發，在重寫對象原型時一般都需要重新給 constructor 賦值，以保證對象實例的類型不被篡改。
4. Object.prototype.toString.call()
toString() 是 Object 的原型方法，調用該方法，默認返回當前對象的 [[Class]] 。這是一個內部屬性，其格式為 [object Xxx] ，其中 Xxx 就是對象的類型。
對於 Object 對象，直接調用 toString() 就能返回 [object Object] 。而對於其他對象，則需要通過 call / apply 來調用才能返回正確的類型資訊。
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 是全局對象 global 的引用
參考來源：//www.cnblogs.com/onepixel/p/5126046.html 【一像素】
