判斷js資料型別的四種方法和原理

怎麼去判斷乙個資料屬於哪個資料型別，這個是很常見的操作，我們一般都會想到typeof和instanceof這兩個常見的方法，但有時候這兩種方法並不能滿足我們的需求。那讓我們來看一下都有哪些可以判斷資料型別的方法吧。

1.typeof

這個方法很常見，一般用來判斷基本資料型別，如：string，number，boolean，symbol，bigint（es10新增一種基本資料型別bigint，詳細介紹），undefined等。

typeof 目前能返回string，number，boolean，symbol，bigint，unfined，object，function這八種判斷型別

typeof '123'     //  string
typeof 1 // number
typeof true // boolean
typeof symbol('1') // symbol
typeof 111n // bigint
typeof undefined // undefined
typeof null // object
typeof // object
function c()
typeof c // function

其實我一直有個疑問，null既然屬於基本資料型別，為什麼用typeof返回的是object呢？解答如下：

js 在底層儲存變數的時候，會在變數的機器碼的低位1-3位儲存其型別資訊?

000：物件

010：浮點數

100：字串

110：布林

1：整數

但是對於 undefined 和 null 來說，這兩個值的資訊儲存是有點特殊的。

null：所有機器碼均為0

undefined：用 −2^30 整數來表示

所以，typeof 在判斷 null 的時候就出現問題了，由於 null 的所有機器碼均為0，因此直接被當做了物件來看待。

2.instanceof

一般用來判斷引用資料型別的判斷，如：object，function，array，date，regexp等

/s/g instanceof regexp 
// true
new date('2019/01/05') instanceof date
// true
[1,2,3] instanceof array
// true

instanceof 主要的作用就是判斷乙個例項是否屬於某種型別，例如：

let animal = function () 
let monkey = new animal()
monkey instanceof animal // true

當然，instanceof 也可以判斷乙個例項是否是其父型別或者祖先型別的例項。

let person = function () 
let programmer = function () 
programmer.prototype = new person()
let nicole = new programmer()
nicole instanceof person // true
nicole instanceof programmer // true

但是 instanceof 的原理是什麼呢？可以用下面的**解釋一下：

function new_instance_of(leftvaule, rightvaule) 
if (leftvaule === rightproto) 
leftvaule = leftvaule.__proto__ 
}}

其實 instanceof 主要的實現原理就是只要右邊變數的 prototype 在左邊變數的原型鏈上即可。因此，instanceof 在查詢的過程中會遍歷左邊變數的原型鏈，直到找到右邊變數的 prototype，如果查詢失敗，則會返回 false，告訴我們左邊變數並非是右邊變數的例項。

3、constructor

當乙個函式f被定義時，js引擎會為f新增prototype原型，然後再在prototype上新增乙個constructor屬性，並讓其指向f的引用。如下所示：

當執行 var f = new f() 時，f被當成了建構函式，f是f的例項物件，此時f原型上的constructor傳遞到了f上，因此f.constructor == f

可以看出，js在函式f的原型上定義了constructor，當f被當作建構函式用來建立物件時，建立的新物件就被標記為了「f」型別，使得新物件有名有姓，可以追溯。

同理,js中的資料型別也遵守這個規則：

細節問題：

1.null和undefined是無效的物件，因此是不會有constructor存在的，這兩種型別的資料可以通過第四種方法來判斷。

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

4、object.prototype.tostring（這個是判斷型別最準的方法）

tostring是object原型物件上的乙個方法，該方法預設返回其呼叫者的具體型別，更嚴格的講，是 tostring執行時this指向的物件型別, 返回的型別格式為[object,***]，***是具體的資料型別，其中包括：string,number,boolean,undefined,null,function,date,array,regexp,error,htmldocument,… 基本上所有物件的型別都可以通過這個方法獲取到。

object.prototype.tostring.call('') ;   // [object string]
object.prototype.tostring.call(1) ; // [object number]
object.prototype.tostring.call(true) ; // [object boolean]
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的引用

需要注意的是，必須通過object.prototype.tostring.call來獲取，而不能直接 new date().tostring(), 從原型鏈的角度講，所有物件的原型鏈最終都指向了object, 按照js變數查詢規則，其他物件應該也可以直接訪問到object的tostring方法，而事實上，大部分的物件都實現了自身的tostring方法，這樣就可能會導致object的tostring被終止查詢，因此要用call來強制執行object的tostring方法。

判斷js資料型別的四種方法和原理

判斷資料型別的四種方法

js的資料型別以及判斷型別的四種方法

JS型別判斷的四種方法

判斷js資料型別的四種方法和原理

判斷資料型別的四種方法

js的資料型別以及判斷型別的四種方法

JS型別判斷的四種方法

相關推薦