JS 繼承 – (JS教程) – JS Inheritance 繼承就是把多個Class, 來歸類為一個抽象的Class. 例如在狗類, 馬類, 羊類中, 我們可以把狗類, 馬類, 羊類歸類為一個新的抽象類, 即動物類.
為何用JS要用繼承呢?
- 一方面JS為在Client Side Bowser 即時Compile的語言, Programmer在寫板面時, 不需用類實作, 很多時也時Copy and paste, 很容易造成大量的Coding, 加上隨著板面及其內部的Controls, User Action增加, 令都產生更大量的Code, 在日後維護時不得要花更多的時間, 而面對大量的Coding, 如要作程式更改, 程式員必然會面臨一個非常痛苦的處境. 而類作, 繼承可以把程式結構他, 減少Coding, 易於管理.
- 二方面JS也可為Server Side的語言, 一般來說, Server side都會用類作, 繼承, 因為內裏通常也有Business Logic, Datasource access等, 不用類會很亂.
而這又有何好處呢?
- 代碼重用, 這不多說了.
- 子類們可以有相同的method, property, 可以在日後中用List, Array等把它們串連起來, 令它們可以一起運作相同的code.
- 子類可以把method重寫, 令到coding 可以用同一個for loop 內引用同一套流程 (如control flow等), 但內裏又可以有不同的程式內容, 去實作程序流程.
類, 繼承的實作
- 在那個抽象的class(如ListItem類)中, 我們可以把在他的子類(NoticeItem類, EventItem類, JobItem類)的method, property等的相同code抽出來, 放在抽象類中, 以供子類重用.
- 而當以也可反過來, 先設立抽象Class, 再以此為基礎來發展出新的子類, 這適合在我們對這些類別熟識時, 例如如果你想做一個Image Converter, 你了解有關於不同圖片的格式, 有JPG, PNG, 等…, 就可如此了.
以下會舉一個簡單的生活例子 （Inherit 繼承) 以顯示出Inheritance 的基本用法, 以下供各位參考:
| Abstract Class Master: |
| class Master{ Play(){} Sleep (){} Eat (){} UpdateState (){} isSleepy (){ return 0; } isBoring (){ return 0; } isDestory (){ return 0; } isHungry (){ return 0; } } |
| Inherit Class Cat: |
| class Cat extends Master { constructor(name){ this.name = name; this.sleepy = 0; this.boring = 0; this.hungry = 0; } isSleepy() { return this.sleepy > 80; } isBoring() { return this.boring > 70; } isDestory() { return this.boring > 95; } isHungry() { return this.hungry > 75; } Play(){ console.log(“Dog ” + this.name + ” Play”); this.boring = 0; } Sleep(){ console. log (“Dog ” + this.name + ” Sleep”); this.sleepy = 0; } Eat(){ console. log (“Dog ” + this.name + ” Eat”); this.hungry = 0; } DestoryYourHome(){ console. log (“Dog ” + this.name + ” Destory Your Home Now.”); } public void UpdateState(){this.sleepy+=1; this.boring+=1; this.hungry+=1; } } |
| Inherit Class Dog: |
| class Dog extends Master { constructor(name){ this.name = name; this.sleepy = 0; this.boring = 0; this.hungry = 0; } isSleepy() { return this.sleepy > 50; } isBoring() { return this.boring > 40; } isDestory() { return this.boring > 80; } isHungry() { return this.hungry > 60; } Play(){ console.log(“Dog ” + this.name + ” Play”); this.boring = 0; } Sleep(){ console. log (“Dog ” + this.name + ” Sleep”); this.sleepy = 0; } Eat(){ console. log (“Dog ” + this.name + ” Eat”); this.hungry = 0; } DestoryYourHome(){ console. log (“Dog ” + this.name + ” Destory Your Home Now.”); } public void UpdateState(){this.sleepy+=1; this.boring+=1; this.hungry+=1; } } |
| Running Class: |
| HaveFood = true; HaveSlavery = true; animals = [new Cat(“Petty”, new Dog (“Jetty”, new Cat(“Potty”]; while(true) { animals.forEach(function(animal){ animal.UpdateState(); if (animal.isSleepy()){ animal.Sleep(); } else if (this.HaveFood && animal.isHungry()){ animal.Eat(); } else if (this.HaveSlavery && animal.isBoring()){ animal.Play(); } else if (!HaveSlavery && animal.isDestory()){ animal.DestoryYourHome(); } } } |
| 注意事項 |
| 1) Environment.Run 是入口首先把幾個Cat, Dog的Instance放入Ｌist<Master>內 2) 用while及Thread.Sleep 行每秒行一次在foreach的方法內, 會把每一位Ｍaster(主子—Cat, dog)的行為行一次 3) 首先UpdateState (在Ｍaster class 內的共用方法)然後看看isSleepy, 如果是true 的話就Sleep(); 4) 然後看看HaveFood及isHungry, 如果是true 的話就Eat(); 5) 然後看看HaveSalavry及isBoring, 如果是奴才在家(HaveSalavry== true) 的話就同主子 Play(); 6) 然後看看HaveSalavry及isBoring, 如果是奴才不在家(HaveSalavry == false)的話, DestoryYourHome(); 7) 在Cat同Dog的 isSleepy, isBoring, isDestory, isHungry 內, 大家的Logic也可不一樣。 |
JS 類別 – Class, Method, Inheritance, Interface的基礎用法
JS介面 (類作模仿) – Interface 介面 的基本用法 – 加入 for loop, if, Array, Collection的例子
參考資料: https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/Classes_in_JavaScript