# 物件導向-繼承 part.1

先前提到的物件導向，因為每一次都會new一個新的物件，而且每個物件皆為獨立的物件，所以當要修改裡面的函式時，例如要統一修改一個動作，就會很不方便。所以我們要用到Prototype，把重複的函式提取出來，存在`_proto_`內。

## 共用函數

要提取共用函數的方法為定義在產生一個新的實例的時候，不要將函數複製進物件內，而是物件會有個參考連結到prototype的原型。所以我們就可以把共用的函數寫在prototype下面，當作共用的函數


## 建立Prototype

建立的Prototype這著參照用的共同原型，會獨立存在再外面
以上一個例子，再建立人這個物件的時候，就不會把函式寫再物件內，所以當你呼叫函式的時候，他就會往Prototype找，在用Prototype的時候也可以使用this.方法


## 封裝與繼承的區別


### 舉例: 定義生物
舉一個例子，當我今天要定義一個生物，他會有基本的屬性與方法，像是一個生物體他可能會有名字、生命長度、會移動且會吃東西。那我們要定義這個生物為狗的時候，我們會繼承生物的特定，在把狗的特性加上去。並且我們可以把這個生物體，延伸成其他類別像是龍。


### 如何用在程式及遊戲?

以建立一個角色為例，所有角色都有生命值與位置，所以我們就可以把這些重複的部分提取出來，在創立新角色時，讓這些角色繼承該有的屬性，這樣就可以從角色發展出NPC、玩家、敵人，甚至從敵人延伸發展出一般魔物、魔王...等等，這樣就不用一值重複寫共用的東西導致程式變得很肥大。


## 繼承-在類別間的延續

上個單元講的先定義完類別在new出一個實體，左邊黃色區快就是一個新依照右邊藍色區塊定義出來的類別所產生的實體。
我們在定義類別的時候在定義母類別是什麼(這邊為生物)，我們讓狗繼承生物，在js裡的繼承，會像索引的方式，一值往上找，像是如果我要呼叫**Poppy.吃東西**，在狗的Prototype找不到，就會往更上層原型的**生物**去找。

這個好處是可以依照不同的屬性去覆蓋母類別的函數，例如可以特別為狗定義一個**吃東西的方式**，就覆蓋生物的**吃東西的方式**。


## 繼承的步驟
Prototype是獨立於類別與物件之外的，當物件有共用的屬性的時候就會往上查找prototype，而剛剛提到需要讓狗繼承生物的方式，就是在狗的prototype再連一個prototype。


## 在程式碼中實做繼承

類別繼承到物件，

1. 在建立時呼叫母類別:要讓被繼承的屬性也可以用
2. 子類新增繼承prototype
3. 將建構函數指向自己

名詞整理:
- 繼承：類別繼承到物件，產生的人都要能有這些方法， WorkPerson 要能回去參考 Person 說話的方法
- prototype：原型、不會動的
- `_proto_`：共同源頭

### 1. 在建立時呼叫母類別

call的意思是去呼叫建構函數，也就是生物這個產生器。

call可以指定一個物件，要針對什麼物件產生，目前的範例為狗，那就是現在在建立的這個物件。
所以可以把this傳進去，會指向狗產生出的新物件。

簡單來說，就是在建立狗這個物件時，呼叫母類別執行一次初始化。
要注意的時會先建立生物體的屬性，才會建立狗自己的屬性。

//生物屬性會先產生
var Creature = function(){
	this.attr=....
}
//建立狗之前，要先呼叫生物，才可以繼承到生物的屬性
var Dog = function(){
	Creature.call(this,....)
	this.attr=.....
}


### 2.為子類別新增prototype
在不動到最上層函數的前提下，第二部繼承方式，就是在狗的物件新增一個空物件，可以連結到生物的prototype。
在狗的物件新增prototype的方法，會用的Object.create()，裡面的參數放的是要連結到的prototype，最後在指定到Dog.prototype。


### 3.將建構函數指向自己
為了不要再回溯到生物的建構函數，所以要指向自己


---

圖片出處:[動畫互動網頁特效入門（JS/CANVAS）](https://hahow.in/courses/586fae97a8aae907000ce721/main)

其他參考資源:
1. [老闆,來點寇汀吧。Boss, CODING please.0212 隨意寫程式直播 / 物件導向 ](https://www.youtube.com/watch?v=HNjS4gxvy48)
2. [基礎JS物件導向教學（直播筆記）](https://creativecoding.in/2021/03/31/js%E7%89%A9%E4%BB%B6%E5%B0%8E%E5%90%91%E9%9A%A8%E6%84%8F%E5%AF%AB%E7%A8%8B%E5%BC%8F%E7%9B%B4%E6%92%AD%E7%AD%86%E8%A8%98/?utm_source=facebook&utm_medium=web-group&fbclid=IwAR2MIwi28BGioM7_X8hbp-RUlq2hh5hz7sBfbH18a8yqgWGRn3hwoZc0H0Q)

###### tags: `物件導向`