5. 建構式、原型與類別

5.建構式、原型與類別
• 學習目標
– 認識建構式之作用
– 理解原型鏈機制
– 區別原型與類別典範
– 善用類別語法
2

• 如果建構式使用return指定了傳回值，該
傳回值就會被當作建構的結果
7

• 有些函式既可以當作建構式，也可以作為
一般函式呼叫
• ES6新增了new.target
8

模擬static
• Math.PI
• Number.MIN_SAFE_INTEGER
• Number.isSafeInteger()
9

特性描述器
• 從ES5開始，每個特性都會有四個屬性
– value
– writable
– enumerable
– configurable
13

• Object.getOwnPropertyDescriptor
()傳回的物件只是描述
14

• 若某屬性未曾設定過，那麼預設是false
15

• 陣列的length無法列舉
• 直接對物件新增特性，writable、
enumerable、configurable預設是
true
• 當特性本身其實是個方法時，也會被
for..in列舉
16

擴充、彌封、凍結
• Object.preventExtensions()
• Object.isExtensible()
• Object.seal()
• Object.freeze()
20

建構式與prototype
• 每個函式實例都會有個prototype特性，
基本上是Object的實例
• 不過prototype物件的constructor特
性會參考函式本身
21

• 使用new建構的物件，會有個__proto__
特性參考至建構式的prototype特性
22

• 存取物件的特性時，會先在實例本身尋找，
如果有就使用
• 沒有的話，就會看看實例的原型物件上有
沒有該特性
• 各個實例間共用的特性，可以定義在建構
式的prototype
23

• 如果要在原型上新增特性，建議將特性設
為不可列舉
26

• 想要知道實例本身是否擁有某個特性，可
以透過hasOwnProperty()方法
28

• 可以將類陣列變得更像是陣列
• 終究不是陣列
• instanceof用來確認物件是否為某建構
式的實例，某些程度上並不可靠
31

• 想要確認某個建構式的prototype，是否
為某實例的原型
32

• 如果不想要修改__proto__來指定原型
33

• Object.create()函式會建立新物件，
物件的原型將被設為指定的原型物件
34

原型鏈
• 存取物件的特性時，會先在實例本身尋找
• 看看實例的原型物件上有沒有該特性
• 看看原型物件的原型物件有沒有該特性
• 持續到Object.prototype為止，
35

• JavaScript被稱為基於原型（Prototype-
based）的物件導向語言
• ES6以後提供了模擬類別的語法，然而，這
並不改變JavaScript基於原型的本質
36

重新定義方法
• 如果想寫個drawFight()函式…
• 在多數的情況下，檢查型態而給予不同的
流程行為，對於程式的維護性有著不良的
影響，應該避免
43

• 單純地定義toString()？
44

定義類別
• 本質上JavaScript仍是基於原型的物件導向
• ES6的類別語法，主要是提供標準化的類別
模擬，透過語法蜜糖令程式碼變得簡潔
48

• 使用class定義的Account只能使用new
來建立實例
• 直接以函式的呼叫方式，會發生
TypeError
50

• 類別上定義的設值、取值方法預設是不可
列舉
53

• 若方法前加上static，那麼該方法會是個
靜態方法
55

• 在類別的static方法中若出現this，代
表的是類別本身
56

• 類別語法的繼承，能夠繼承標準API，而且
內部實作特性以及特殊行為也會被繼承
• 例如，可以繼承Array，子型態實例的
length行為，能隨著元素數量自動調整
58

• 如果沒有使用constructor定義建構式，
會自動建立預設建構式，並自動呼叫
super()
• 要明確地使用super()來呼叫父類建構式，
不然new時會引發錯誤
59

super與extends
• 如果對原型夠瞭解，是可以來玩玩一些試
驗，接下來的內容純綷是探討，若不感興
趣，可以直接跳過，不會影響後續章節的
內容理解。
61

Recommended