判斷JS數據類型的4種方法

在 ECMAScript 規範中，共定義了 7 種數據類型，分爲 基本類型 和 引用類型 兩大類，以下所示：

基本類型：String、Number、Boolean、Symbol、Undefined、Null 

引用類型：Object

基本類型也稱爲簡單類型，因爲其佔據空間固定，是簡單的數據段，爲了便於提高變量查詢速度，將其存儲在棧中，即按值訪問。

引用類型也稱爲複雜類型，因爲其值的大小會改變，因此不能將其存放在棧中，不然會下降變量查詢速度，所以，其值存儲在堆(heap)中，而存儲在變量處的值，是一個指針，指向存儲對象的內存處，即按址訪問。引用類型除 Object 外，還包括 Function 、Array、RegExp、Date 等等。

鑑於 ECMAScript 是鬆散類型的，所以須要有一種手段來檢測給定變量的數據類型。對於這個問題，JavaScript 也提供了多種方法，但遺憾的是，不一樣的方法獲得的結果良莠不齊。

下面介紹經常使用的4種方法，並對各個方法存在的問題進行簡單的分析。

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

typeof ''; // string 有效
typeof 1; // number 有效
typeof Symbol(); // symbol 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 無效
typeof [] ; //object 無效
typeof new Function(); // function 有效
typeof new Date(); //object 無效
typeof new RegExp(); //object 無效
有些時候，typeof 操做符會返回一些使人迷惑但技術上卻正確的值：

對於基本類型，除 null 之外，都可以返回正確的結果。
對於引用類型，除 function 之外，一概返回 object 類型。
對於 null ，返回 object 類型。
對於 function 返回  function 類型。
其中，null 有屬於本身的數據類型 Null ， 引用類型中的 數組、日期、正則 也都有屬於本身的具體類型，而 typeof 對於這些類型的處理，只返回了處於其原型鏈最頂端的 Object 類型，沒有錯，但不是咱們想要的結果。

二、instanceof
instanceof 是用來判斷 A 是否爲 B 的實例，表達式爲：A instanceof B，若是 A 是 B 的實例，則返回 true,不然返回 false。 在這裏須要特別注意的是：instanceof 檢測的是原型，咱們用一段僞代碼來模擬其內部執行過程：

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        // A的內部屬性 __proto__ 指向 B 的原型對象
        return true;
    }
    return false;
}
從上述過程能夠看出，當 A 的 __proto__ 指向 B 的 prototype 時，就認爲 A 就是 B 的實例，咱們再來看幾個例子：

[] instanceof Array; // true
{} instanceof Object;// true
new Date() instanceof Date;// true
 
function Person(){};
new Person() instanceof Person;
 
[] instanceof Object; // true
new Date() instanceof Object;// true
new Person instanceof Object;// true
咱們發現，雖然 instanceof 可以判斷出 [ ] 是Array的實例，但它認爲 [ ] 也是Object的實例，爲何呢？

咱們來分析一下 [ ]、Array、Object 三者之間的關係：

從 instanceof 可以判斷出 [ ].__proto__  指向 Array.prototype，而 Array.prototype.__proto__ 又指向了Object.prototype，最終 Object.prototype.__proto__ 指向了null，標誌着原型鏈的結束。所以，[]、Array、Object 就在內部造成了一條原型鏈：

從原型鏈能夠看出，[] 的 __proto__  直接指向Array.prototype，間接指向 Object.prototype，因此按照 instanceof 的判斷規則，[] 就是Object的實例。依次類推，相似的 new Date()、new Person() 也會造成一條對應的原型鏈 。所以，instanceof 只能用來判斷兩個對象是否屬於實例關係， 而不能判斷一個對象實例具體屬於哪一種類型。

instanceof 操做符的問題在於，它假定只有一個全局執行環境。若是網頁中包含多個框架，那實際上就存在兩個以上不一樣的全局執行環境，從而存在兩個以上不一樣版本的構造函數。若是你從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具備各自不一樣的構造函數。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false

針對數組的這個問題，ES5 提供了 Array.isArray() 方法 。該方法用以確認某個對象自己是否爲 Array 類型，而不區分該對象在哪一個環境中建立。

if (Array.isArray(value)){
   //對數組執行某些操做
}
Array.isArray() 本質上檢測的是對象的 [[Class]] 值，[[Class]] 是對象的一個內部屬性，裏面包含了對象的類型信息，其格式爲 [object Xxx] ，Xxx 就是對應的具體類型 。對於數組而言，[[Class]] 的值就是 [object Array] 。

三、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 中的內置對象在內部構建時也是這樣作的：

細節問題：

1. null 和 undefined 是無效的對象，所以是不會有 constructor 存在的，這兩種類型的數據須要經過其餘方式來判斷。

2. 函數的 constructor 是不穩定的，這個主要體如今自定義對象上，當開發者重寫 prototype 後，原有的 constructor 引用會丟失，constructor 會默認爲 Object

爲何變成了 Object？

由於 prototype 被從新賦值的是一個 { }， { } 是 new Object() 的字面量，所以 new Object() 會將 Object 原型上的 constructor 傳遞給 { }，也就是 Object 自己。

所以，爲了規範開發，在重寫對象原型時通常都須要從新給 constructor 賦值，以保證對象實例的類型不被篡改。

四、toString
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 的引用

相關連接：https://ke.qq.com/course/256212?flowToken=1001259

羣143046757