[ES6 JavaScript] 類別繼承(extends) : 父類別 與 子類別

[ES6 JavaScript] 類別繼承(extends) : 父類別 與 子類別

在前一篇的文章 [ES6 JavaScript] 類別 (Class) 與 建構式 (Constructor) 中,有說明了一些 類別(class)建構式 (Constructor) 的概念,今天在這邊進階說明,何謂 類別繼承(extends)


父類別 與 子類別

首先要先了解一下 父類別子類別 的關係:

民俗一點的說法:

爸爸 有個 兒子,兒子 除了有了 爸爸 傳授給他的東西之外,額外還有自己的經驗

程式上的則是:

子類別 除了有 父類別所有屬性與方法外 , 還額外具備 自己的屬性

在下面的 定義子類別 項目中,將以實例說明:


定義 子類別:

直接使用範例說明:

這邊先定義一個 Animal 的 類別(Class), 當作是 父類別 , 如下:

class Animal{

 constructor(name){
   this.name = name; //動物的名稱
   runAway(){
     console.log(this.name + '跑走了')
   } // 動物跑走了
 }

}

接著就使用 extends 的方法宣告一個 Bird 的 類別(Class) 為 Animail子類別,如下:

class Bird extends Animal{

  constructor(name,flightSpeed){
   super(name); //注意這邊
   this.flightSpeed = flightSpeed; // 飛行速度
 }

}

super() 是 ES6 所提供的新方法,專用於 呼叫 父類別建構式(Constructor)


接著我們將 Bird 這個 子類別 的物件實體化:

var angryBird = new Bird('憤怒鳥','40')

就可以獲得 一個 除了 子類別(Bird) 自己定義的 flightSpeed 的屬性外,且含有 父類別 (Animal) 所有 屬性 跟 方法 的 物件 了,如下:

angryBird{
 'name':'憤怒鳥',
 'runAway' : function(){this.name + '跑走了'},
 'flightSpeed' : '40'
}

Facebook 功能: