iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

我的JavaScript日常系列 第 5

JavaScript Day 5. 型別辨識 typeof

偶爾程式也會碰到需要辨別變數的狀態,有時候是用於防止使用者輸入奇怪的文字,有時候是幫助自己確認變數的型別,使程式能順利執行,而 typeof 在使用方面也非常的簡單,只要這樣 typeof 變數

typeof,就是幫忙判斷參數的型別,簡單使用的方式在上面有提到,這裡再給一個比較完整的範例:

// Numbers
typeof 37 === 'number';

// Strings
typeof "" === 'string';

// Booleans
typeof true === 'boolean';

// Undefined
typeof undefined === 'undefined';

// Objects
typeof {a:1} === 'object';

// Functions
typeof function(){} === 'function';

typeof 主要能辨識的型態有:NumberStringBooleanobjectfunctionundefinedsymbolbigint。在一般的狀態下,都會正確的回傳型別,唯獨 null。

typeof null === 'object';

至於為什麼 null 無法回傳正確的型別,這部分我比較無法用自己的話去解釋清楚,因此我們引用MDN的句子,比較不容易使人混亂:

自從 JavaScript 一開始出現, JavaScript 的值就總以型別標簽跟著一個值的方式表示。物件的型別標簽是 0,而 null 這個值是使用 NULL 指標 (在大部份平台上是 0x00) 來表示,因此 null 看起來像是一個以 0 為型別標簽的值, 並使得 typeof 傳回不甚正確的結果。

另外還有一個有趣的地方,如果我們用 typeof 辨識陣列,會發現它回傳的不是陣列,而是 object:

var d = [];
console.log(typeof d);  //  object

如果要避免這個問題,可以這麼寫

var d = [];
console.log(typeof d);  //  object
console.log(Object.prototype.toString.call(d)); //  [object Array]

關於這個部分解釋起來大概是這樣,JavaScript 定義資料型別分為「基本型別」和「物件型別」兩種,「基本型別」包含 boolean、null、字串,除了這幾種以外,其餘都算是「物件型別」,陣列也是「物件型別」。

另外在查找資料的時候,也看到另一個與 typeof 放在一起的小工具 instanceof。這個要解釋起來比較複雜,如果不太懂「原型鏈」的觀念,大概只能稍微猜測它會在何時使用到。

instanceof 可以判斷 A 是否為 B 的實例(A 是否在 B 的原型鏈上),如果是則回傳 true,反之則回傳 false。

function Person(a) {
	this.a = a;
}
var b = new Person('c');
console.log(b instanceof Person); // true

這個簡單的範例可以看到,b 指向 person,b 為 person 的實例,因此會回傳 true。

instanceof 是通過使用一個物件的原型來判斷例項關係。

關於 instanceof 在原型上的觀念,我聽了同學的建議去找了影片來看,大致上可以理解到他擁有繼承的概念。關於原型的解釋,其實可以是一篇文章了,所以我在這邊就盡量的簡單解釋,假設今天我們要執行兩件事,透過原型的概念,我們可以以一個與這兩件事相關的物件當作基礎並向外做延伸,這樣的作法可以減少重複,降低記憶體空間。

以生活上的例子來說,譬如今天有 A 跟 B 兩個人,他們的目的地都是去超市買菜,他們都是走路去超市,此時以原型的概念來說,「走路」可以是一個基礎,以這個基礎向外做延伸,A 買菜 B買肉兩種不同選擇則是延伸。

在這邊我是粗略的解釋了一下原型的概念,但是 instanceof 的部分則要再更深入的去探討原型中 new 這個方法是如何運作的, 這部分就留著有時間研究的更完整再補上了。(下台一鞠躬


上一篇
JavaScript Day 4. ParseInt / ToString
下一篇
JavaScript Day 6. let or const or var
系列文
我的JavaScript日常31

尚未有邦友留言

立即登入留言