JavaScript 數據類型與類型判斷詳解

1、JavaScript 數據類型

JavaScript 數據類型有兩種，分別是基本數據類型和引用數據類型。

• 基本數據類型

  • Number
  • String
  • Boolean
  • Undefined
  • Null
  • Symbol (ES6 新增，表示獨一無二的值)

• 引用數據類型

  • Object
  • Function
  • Array

咱們來詳細瞭解一下這兩種數據類型的特色

1.基本數據類型

值不可變

基本類型的值是不可變的

var name = 'javascript';
name.toUpperCase(); //  'JAVASCRIPT'
console.log(name); //  'javascript'

可是咱們不是常常有 ++a 這種操做嗎？好比

let a = 1
console.log(++a) // '2'

其實這個時候並非 a 指向的 1 直接加了 1，而是 新建了一個 1+1 = 2 的值，再將 a 指向這個新建出來的 2，原來的那個 1 並無發生改變，留由垃圾回收機制處理。也就是說不是 a 指向的值發生了改變，而是 a 變量指針指向了一個新的值，這和「基本類型的值是不可變的」這句話並不矛盾。

數據存放在棧區

原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲。

2.引用數據類型

值是可變的

let a = { age : 20 }；
a.age = 21；
console.log(a.age)    //21

同時保存在棧內存和堆內存

引用數據類型佔據空間大，大小不固定，儲存在堆內存，可是指向該引用數據類型的變量指針「a」是儲存在棧內存中。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

2、數據的賦值

基本數據類型的賦值爲複製了一個新的值，對新變量的修改不會影響原變量

let a = 1;
let b = a;
b++
console.log(a)   // 1
console.log(b)   // 2

在內存中的變化如圖：

可是引用數據類型就不同，由於引用數據內型佔用空間大，因此賦值操做是將新變量指針指向了原對象，修改其一都會影響到另外一個。

let a={id=1234}
let b=a
b.id=1222
console.log(a.id) // 1222
console.log(b.id) // 1222

在內存中的變化如圖：

關於引用對象的拷貝又分爲深拷貝和淺拷貝，限於篇幅就留給下篇文章了

3、檢驗數據類型

typeof

這應該初學者首次接觸的類型判斷方法了，它返回一個表示數據類型的字符串，返回結果包括：

• number
• boolean
• string
• symbol
• object
• undefined
• function

可是不能判斷 array 和 null

typeof Symbol();  
// symbol  正確
typeof '';   
// string 正確
typeof 1;     
// number正確
typeof true;    
//boolean 正確
typeof undefined; 
//undefined 正確
typeof new Function(); 
// function 正確
typeof null; 
//object 無效
typeof [] ;
//object 無效
typeof new Date(); 
//object 無效
typeof new RegExp(); 
//object 無效

typeof 缺點

能夠看到 Date 和 RegExp 對象都只是被是被成了 object 對象，也就是說除 function 之外的對象都會被識別成 object ，這樣顯然是不合理的，這時就須要 instanceof 來進行判斷。

instanceof

instanceof 運算符用於檢測構造函數的 prototype 屬性是否出如今某個實例對象的原型鏈上。 簡單來講就是 instanceof 是用來判斷 A 是否爲 B 的實例，表達式爲

A (object) instanceof B (constructor)

若是A是B的實例，則返回true,不然返回 false。

// 定義構造函數
function C(){} 
function D(){} 

var o = new C();


o instanceof C; // true，由於 Object.getPrototypeOf(o) === C.prototype


o instanceof D; // false，由於 D.prototype 不在 o 的原型鏈上

o instanceof Object; // true，由於 Object.prototype.isPrototypeOf(o) 返回 true

C.prototype instanceof Object // true，同上

C.prototype = {};

var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false，C.prototype 指向了一個空對象,這個空對象不在 o 的原型鏈上.

D.prototype = new C(); // 繼承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true 由於 C.prototype 如今在 o3 的原型鏈上

如今就能夠判斷不一樣類別的對象了

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true

instanceof 的缺點

1.是否處於原型鏈上的判斷方法不嚴謹

instanceof 方法判斷的是是否處於原型鏈上，而不是是否是處於原型鏈最後一位，因此會出現下面這種狀況：

var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object);  // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true

由於全部原型鏈的盡頭都是 object，因此就形成了這種情況。當你自定義了一個類A，而且繼承了一個原生類B，這個時候檢測結果未必準確：

A instanceof A // true
A instanceof B // true
A instanceof Object true

2.沒法判斷字面量方式建立的基本數據類型

對於基本數據類型來講，字面量方式建立出來的結果和實例方式建立的是有必定區別的

console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true

從嚴格意義上來說，只有實例建立出來的結果纔是標準的對象數據類型值，也是標準的Number這個類的一個實例；對於字面量方式建立出來的結果是基本的數據類型值，不是嚴謹的實例，可是因爲JS的鬆散特色，致使了可使用Number.prototype上提供的方法。

3. 沒法檢測 null 和 undefined

對於特殊的數據類型null和undefined，他們的所屬類是Null和Undefined，可是瀏覽器把這兩個類保護起來了，不容許咱們在外面訪問使用。

constructor

constructor 做用和 instanceof 很是類似。但 constructor 檢測 Object 與 instanceof 不同，還能夠處理基本數據類型的檢測。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false

constructor的缺點

1.沒法檢測 null 和 undefined

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

2.不穩定

函數的 constructor 是不穩定的，這個主要體如今把類的原型進行重寫，在重寫的過程當中頗有可能出現把以前的 constructor 給覆蓋了，這樣檢測出來的結果就是不許確的，由此可知 instanceof 一樣也存在這個問題。

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array

Object.prototype.toString.call()

這就是大名鼎鼎的全能方法，最準確最經常使用，據 MDN 描述

每一個對象都有一個 toString() 方法，當該對象被表示爲一個文本值時，或者一個對象以預期的字符串方式引用時自動調用。默認狀況下，toString() 方法被每一個 Object 對象繼承。若是此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]"，其中 type 是對象的類型。

在 Number、String，Boolean，Array，RegExp、Date、Function 等對象上 toString() 方法都是被重寫過了的，會按照必定的規則返回字符串。可是在 object 對象上，這個方式是返回當前方法執行的主體（方法中的this）所屬類的詳細信息即"[object Object]",其中第一個object表明當前實例是對象數據類型的(這個是固定的 onject)，第二個Object表明的是this所屬的類型。

爲了每一個對象都能經過 Object.prototype.toString() 來檢測，須要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象做爲第一個參數，稱爲 thisArg。

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的引用

總結

判斷方法	缺點
typeof	不能判斷 null 和區分 array/Date/RegExp 等
instanceof	沒法檢測 null 和 undefined，未必準確，沒法判斷字面量方式建立的基本數據類型
constructor	沒法檢測 null 和 undefined，未必準確
Object.prototype.toString.call()	無

參考文章

• JavaScript的數據類型及其檢測
• Object.prototype.toString()--MDN
• instanceof---MDN
• [[ JS 進階 ] 基本類型 引用類型 簡單賦值 對象引用](https://segmentfault.com/a/11...
• JS判斷數據類型的三種方法