# 物件導向-繼承 part.2
創造出一個Person的物件，在藉由這個人創造出一個Worker(工作者)的物件
- Person的屬性有名字、年齡，函數是打招呼
- Worker的屬性有工作種類，薪水，函數是工作自我介紹


---
### 說明開始:
1. **初始化:** 首先建議一個工作者的物件，並且呼叫母類別的物件進行初始化，其中`this`會指向Worker這個物件，並且把建立Person時需要使用的繼承的屬性(name)帶進去。也新增一個job當作之後需要使用的屬性。
2. **建立Prototype:** 用Object.create建立一個空物件並且裡面放入需要建立索引的物件
3. 把建構是指向自己
4. 做完以上的設定之後，就可以針對Worker這個類別設定裡面共用的函數，像是telljob
5. 利用Worker建立一個叫Henry的實體物件，裡面需要傳入名字與工作


### 實作範例練習

先宣告一個人叫Mary，並且指定他的屬性有名字跟年紀，並且把打招呼這個動作寫在`prototype`上。

var Person = function (name, age) {
	this.name = name;
	this.age = age;
};

Person.prototype.sayHello = function () {
	console.log("Hello Im " + this.name);
};

var Mary = new Person("Mary", 40);
Mary.sayHello();

console 結果

"Hello Im Mary"

打開console的時候，就會發現打招呼這的動作在`_proto_`下，代表我們已經把共同作用的函數從物件中抽出來。


函數抽離出來的好處是當我今天新增了另外一個實體叫Henry，如果我要改變他們打招呼的方式，我只需要重新覆蓋一次`Prototype.sayHello`的內容，就可以一次改變兩個人的打招呼方式，就會從 `"Hello Im Mary"` 變成`H!!! i'm Mary`

//再宣告一個 Henry
var Henry = new Person("Henry", 40);
Henry.sayHello();

//複寫原本的 say Hello 改成 Hi!!!
Person.prototype.sayHello = function () {
	console.log("Hi!!! Im " + this.name);
};
//重新呼叫
Mary.sayHello();
Henry.sayHello();

console 結果

從原本的
"Hello Im Mary"
"Hello Im Henry"

複寫prototpey的satHello之後變成
"Hi!!! Im Mary"
"Hi!!! Im Henry"

要準備開始做繼承囉!
首先宣告一個Worker，並且要繼承Person裡的屬性與prototype內的函數

// 1.繼承person的屬性，並且新增自己的
var Worker = function (name, age, work) {
	Person.call(this, name, age);
	this.work = work;
};
// 2.繼承 Person 的 Prototype
Worker.prototype = Object.create(Person.prototype);
// 3.把建構函數指向自己
Worker.prototype.constructor = Worker.constructor;

**以上就完成繼承了!!**

繼承完畢之後，就可以開始測試Worker

Worker.prototype.sayMyJob = function () {
	console.log("Hi! im " + this.name + " my job is " + this.work);
};

var AmyTheWorker = new Worker("Amy", 32, "Teacher");
AmyTheWorker.sayMyJob();

console結果

"Hi! im Amy my job is Teacher"

---

圖片出處:[動畫互動網頁特效入門（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: `物件導向`