[JS奇怪的世界]No.59 「typeof」、「instanceof」與搞清楚這是什麼

前言

我們已經瞭解 JavaScript 是一個動態型別的語言，這可以讓我們做一些很特別的事情，但也很危險，一般來講如果我們要知道一個變數的型別通常都會透過 typeof，但是其實這個方法並不是很好，所以這章節將會講解「typeof」、「instanceof」。

「typeof」、「instanceof」

我知道標題「typeof」、「instanceof」與搞清楚下的很奇怪而原文翻譯是「typeof, instanceof, and figuring out what something is.」，但這是課程的標題，所以就照打了，那麼這邊就直接進入範例。

題外話，課程上的 typeof 是這樣寫 console.log(typeof a);，而我是習慣這樣寫 console.log(typeof(a)); 兩者結果都是相同不用擔心。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var a = 3;
console.log('a: ' + typeof(a));
var b = 'Hello';
console.log('b: ' + typeof(b));
var c = {};
console.log('c: ' + typeof(c)); 
var d = [];
console.log('d: ' + typeof(d));
console.log('d prototype call: ' + Object.prototype.toString.call(d));

function Person (name) {
  this.name = name;
}

var e = new Person('Jane');
console.log('e: ' + typeof(e));
console.log(e instanceof Person);
console.log('undefined: ' + typeof(undefined));
console.log('null: ' + typeof(null));

在前面這邊可以先思考一下每一個型別是什麼，然後稍微紀錄一下再看答案。

基本上前面都沒有什麼問題，但是這邊卻不太對勁了。

空陣列竟然不是顯示 Array，那該怎麼知道他到底是不是陣列?這時候就必須使用 Obejct的原型來做驗證，這樣才能看出它是一個陣列。

這是一個滿特別的地方，所以我特別將空陣列拉出來玩一下，如果當空陣列不再是空陣列而是有資料那它 typeof 還會呈現物件型別嗎?

1
2

var d = ['Ray', 'Jack'];
console.log('d: ' + typeof(d));

答案是一樣的，由此可知前面章節就有提過陣列就是物件，那該如何驗證?翻翻 MDN 就知道了

所以由此可知在 JavaScript 中陣列就是物件，這很重要。

接下來講 instanceof，這個方法主要是告訴我們物件有沒有在原型鏈上，如果有就會回傳 true，若沒有就是false。

再來是 undefined，undefined 是 JavaScript 的特別關鍵字，所以直接回傳 undefined 這也沒問題。

最後 null 這個東西在課堂上老師稱之為 JavaScript 的萬年 bug，所以才會得到像這樣的結果。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分