作者：浪裡行舟
JavaScript 有幾種類型的值？
Javascript 有兩種資料類型，分别是基本資料類型和引用資料類型。其中基本資料類型包括 Undefined、Null、Boolean、Number、String、Symbol (ES6 新增，表示獨一無二的值)，而引用資料類型統稱為 Object 對象，主要包括對象、數組和函數。接下來我們分别看下兩者的特點。
基本資料類型
1.值是不可變的
var name = 'java';
name.toUpperCase(); // 輸出 'JAVA'
console.log(name); // 輸出 'java' 由此可得，基本資料類型的值是不可改變的
2.存放在棧區
原始資料類型直接存儲在棧(stack)中的簡單資料段，占據空間小、大小固定，屬于被頻繁使用資料，是以放入棧中存儲。
3.值的比較
var a = 1;
var b = true;
console.log(a == b); // true
console.log(a === b); // false == : 隻進行值的比較,會進行資料類型的轉換。
=== : 不僅進行值得比較，還要進行資料類型的比較。
引用資料類型
1.值是可變的
var a={age:20}；
a.age=21；
console.log(a.age)//21 上面代碼說明引用類型可以擁有屬性和方法，并且是可以動态改變的。
2.同時儲存在棧記憶體和堆記憶體
引用資料類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，将會影響程式運作的性能；引用資料類型在棧中存儲了指針，該指針指向堆中該實體的起始位址。當解釋器尋找引用值時，會首先檢索其在棧中的位址，取得位址後從堆中獲得實體。
3.比較是引用的比較
當從一個變量向另一個變量賦引用類型的值時，同樣也會将存儲在變量中的對象的值複制一份放到為新變量配置設定的空間中。
var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true 上面我們講到基本類型和引用類型存儲于記憶體的位置不同，引用類型存儲在堆中的對象，與此同時，在棧中存儲了指針，而這個指針指向正是堆中實體的起始位置。變量 a 初始化時，a 指針指向對象{age:20}的位址，a 指派給 b 後,b 又指向該對象{age:20}的位址，這兩個變量指向了同一個對象。是以，改變其中任何一個變量，都會互相影響。
此時，如果取消某一個變量對于原對象的引用，不會影響到另一個變量。
var a={age:20};
var b=a;
a = 1;
b // {age:20} 上面代碼中，a 和 b 指向同一個對象，然後 a 的值變為 1，這時不會對 b 産生影響，b 還是指向原來的那個對象。
檢驗資料類型
1.typeof
typeof 傳回一個表示資料類型的字元串，傳回結果包括：number、boolean、string、symbol、object、undefined、function 等 7 種資料類型，但不能判斷 null、array 等
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 無效 數組和對象傳回的都是 object，這時就需要使用 instanceof 來判斷
2.instanceof
instanceof 是用來判斷 A 是否為 B 的執行個體，表達式為：A instanceof B，如果 A 是 B 的執行個體，則傳回 true,否則傳回 false。instanceof 運算符用來測試一個對象在其原型鍊中是否存在一個構造函數的 prototype 屬性。
[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true 關于數組的類型判斷，還可以用 ES6 新增Array.isArray()
Array.isArray([]); // true instanceof 三大弊端：
對于基本資料類型來說，字面量方式建立出來的結果和執行個體方式建立的是有一定的差別的
console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true 從嚴格意義上來講，隻有執行個體建立出來的結果才是标準的對象資料類型值，也是标準的 Number 這個類的一個執行個體；對于字面量方式建立出來的結果是基本的資料類型值，不是嚴謹的執行個體，但是由于 JS 的松散特點，導緻了可以使用 Number.prototype 上提供的方法。
隻要在目前執行個體的原型鍊上，我們用其檢測出來的結果都是 true。在類的原型繼承中，我們最後檢測出來的結果未必準确。
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 不能檢測 null 和 undefined
對于特殊的資料類型 null 和 undefined，他們的所屬類是 Null 和 Undefined，但是浏覽器把這兩個類保護起來了，不允許我們在外面通路使用。
3.嚴格運算符===
隻能用于判斷 null 和 undefined，因為這兩種類型的值都是唯一的。
var a = null
typeof a // "object"
a === null // true undefined 還可以用 typeof 來判斷
var b = undefined;
typeof b === "undefined" // true
b === undefined // true 4.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 兩大弊端：
null 和 undefined 是無效的對象，是以是不會有 constructor 存在的，這兩種類型的資料需要通過其他方式來判斷。
函數的 constructor 是不穩定的，這個主要展現在把類的原型進行重寫，在重寫的過程中很有可能出現把之前的 constructor 給覆寫了，這樣檢測出來的結果就是不準确的
function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array 5.Object.prototype.toString.call()
Object.prototype.toString.call() 最準确最常用的方式。首先擷取 Object 原型上的 toString 方法，讓方法執行，讓 toString 方法中的 this 指向第一個參數的值。
關于 toString 重要補充說明：
- 本意是轉換為字元串，但是某些 toString 方法不僅僅是轉換為字元串
- 對于 Number、String，Boolean，Array，RegExp、Date、Function 原型上的 toString 方法都是把目前的資料類型轉換為字元串的類型（它們的作用僅僅是用來轉換為字元串的）
- Object 上的 toString 并不是用來轉換為字元串的。
Object 上的 toString 它的作用是傳回目前方法執行的主體（方法中的 this）所屬類的詳細資訊即"[object Object]",其中第一個 object 代表目前執行個體是對象資料類型的(這個是固定死的)，第二個 Object 代表的是 this 所屬的類是 Object。
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的引用 參考資料
- 【文章】[ JS 進階 ] 基本類型 引用類型 簡單指派 對象引用（推薦）
- JS 判斷資料類型的三種方法
- JS 中的資料類型及判斷
- Javascript 判斷變量類型的陷阱 與 正确的處理方式
- 判斷 JS 資料類型的四種方法
【本文作者】
浪裡行舟：碩士研究所學生，專注于前端，立志成為全棧工程師。樂于分享，堅持輸出，願文章能夠給你帶來點啟發！