1. JavaScript
的物件
meebox@gmail.com

2. 函式就是建構方法 (construcor)
Animal
① 函式也是一種
物件
cat1
③ 建立物件後會立刻執行函式
(亦即建構方法 ) 內容, 此時 this 會 ② 用 new 調用
name:"Animal"
指向新建立的物件 , 因此設值給 函式就可建立物
this.name 就會幫新建立的物件添 件
加 name 屬性

3. 甚至可用同一個函式建構
擁有不同屬性的物件
Animal
cat1
name:"Animal"
new Animal(1)
cat2
color:"white" new Animal(0)
因為調用建構方法時傳入的參數不同 , 所以建立的物件
擁有不同的屬性

4. 使用函式物件的 prototype 屬性
建構擁有同一組屬性的物件
原形物件 Animal
constructor
prototype
① 建立函式時：
● 會自動產生一個物件, 作為將來以此函式建構物
件時的參考原形。
● 函式物件中會自動添加一個 prototype 屬性, 指
到此原形物件。
● 原形物件中會自動添加一個 constructor 屬性,
指回原來的函式物件

5. 使用函式物件的 prototype 屬性
建構擁有同一組屬性的物件
原形物件 Animal
constructor
color:"white" prototype
② 為原形物件增加的屬性會成為以對應的函式建構的
新物件可存取的屬性

6. 使用函式物件的 prototype 屬性
建構擁有同一組屬性的物件
原形物件 Animal
constructor
color:"white" prototype
new
cat1
③ 新建構的物件 , 會有一個內部屬性 (目前的
JavaScript 實作都將之命名為 __proto__), 指向建構
name:"Animal"
函式的 prototype 屬性所指向的原形物件
__proto__

7. 使用函式物件的 prototype 屬性
建構擁有同一組屬性的物件
原形物件 Animal
constructor
color:"white" prototype
new
cat1
④ 當存取的是物件中不存在的屬性時 , 會循 __proto__
往上找原形物件 , 若原形物件中有 , 就使用該屬性。因此 name:"Animal"
cat1.color 存取的就是 Animal.prototype 所指物件的
__proto__
color 屬性。若找不到 , 就會傳回 undefined。

8. 設值給存在於原形物件中的屬性
會在新建構的物件中新增同名屬性
原形物件 Animal
constructor
color:"white" prototype
cat1
new
name:"Animal" new
__proto__
cat2
cat1 因為有設值給存在於原形物件中的 color 屬性, 所 color:"black"
以擁有自己的 color 屬性；但 cat2 取得的仍然是原形物
name:"Animal"
件中的 color 屬性
__proto__

9. 用原形物件鏈 (prototype chain)
把原形物件串起來達成繼承的效果
原形物件 Animal
constructor
prototype
color:"white"
原形物件 Cat
constructor
① 定義 Cat 函式時一樣會自動 產生一個原形物件
prototype

10. 用原形物件鏈 (prototype chain)
把原形物件串起來達成繼承的效果
原形物件 Animal
constructor
prototype
color:"white"
原形物件 new
name:Animal
Cat
__proto__
prototype
原形物件
② 我們將自動產生的原形物件棄置不用 , 換成用 Animal
constructor
函式建立的物件當成 Cat 函式的原形物件

11. 使用原形物件鏈 (prototype chain)
把原形物件串起來達成繼承的效果
原形物件 Animal
constructor
prototype
color:"white"
原形物件 new
name:Animal
Cat
__proto__
prototype
cat1
③ 讀取屬性時, 會循 __proto__ 屬性一層層往上 , 最
name:"Cat"
後找到 Animal 函式的原形物件中有 color 屬性, 結果 new
相當於 Cat 繼承 Animal __proto__

12. 使用 o instanceof F 檢查 F.prototype
是否出現在 o 的原形物件鏈中
原形物件 Animal
constructor
prototype
color:"white"
原形物件 new
name:Animal
Cat
__proto__
prototype
cat1
name:"Cat"
new
__proto__

13. 其實我們漏了一點
這才是完整的原形物件鏈
原形物件 原形物件
Object Animal
constructor constructor
.................. color:"white"
prototype prototype
__proto__：null __proto__
new
原形物件
● 自動產生的原形物件是以 Object 為建構方法建
name:Animal Cat
立的物件, 因此任何物件從原形物件鏈追到最
上層就是 Object.prototype 所指向的物件 , 這也 __proto__
是所有的物件都可以使用像是 toString() 等方 prototype
法的原因。 cat1
● 而 Obect.prototype.__proto__的值為 null, 因此
name:"Cat"
原形物件鏈到此為止。 new
__proto__