ZWH ZONE

[ES6 JavaScript] 類別繼承（extends） ： 父類別 與 子類別

zhiwei. huang -

在前一篇的文章 [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 功能：