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

一、JavaScript 數據類型

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

• 基本數據類型NumberStringBooleanUndefinedNullSymbol (ES6 新增，表示獨一無二的值)
• 引用數據類型ObjectFunctionArray

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

1.基本數據類型

值不可變

基本類型的值是 不可變 的

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

但是我們不是經常有 ++a 這種操作嗎？比如

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

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

數據存放在棧區

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

2.引用數據類型

值是可變的

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

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

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

二、數據的賦值

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

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

在內存中的變化如圖：

但是引用數據類型就不一樣，因為引用數據內型佔用空間大，所以賦值操作是將新變量指針指向了原對象，修改其一都會影響到另一個。

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

在內存中的變化如圖：

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

三、檢驗數據類型

typeof

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

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

但是不能判斷 array 和 null

<code>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 無效/<code>

typeof 缺點

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

instanceof

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

A (object) instanceof B (constructor)

如果A是B的實例，則返回true,否則返回 false。

<code>// 定義構造函數
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 的原型鏈上/<code>

現在就可以判斷不同類別的對象了

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

instanceof 的缺點

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

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

<code>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/<code>

因為所有原型鏈的盡頭都是 object，所以就造成了這種狀況。當你自定義了一個類A，並且繼承了一個原生類B，這個時候

<code>A instanceof A // true
A instanceof B // true
A instanceof Object true/<code>

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

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

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

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

3. 無法檢測 null 和 undefined

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

constructor

constructor 作用和 instanceof 非常相似。但 constructor 檢測 Object 與 instanceof 不一樣，還可以處理基本數據類型的檢測。

<code>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/<code>

constructor的缺點

1.無法檢測 null 和 undefined

null 和 undefined 是無效的對象，因此是不會有 constructor 存在的，這兩種類型的數據需要通過其他方式來判斷。

2.不穩定

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

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

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。

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

總結

閱讀更多 sandag 的文章

關鍵字: JavaScript 數據類型 判斷