JavaScript 中的繼承與 extends 關鍵字

AWEI
Apr 16, 2024

--

在 JavaScript 中,我們可以使用 “extends” 關鍵字來實現繼承。繼承是一個物件導向程式設計的概念,它允許我們創建一個新的類別(class),該類別可以繼承另一個現有類別的特點和行為。

讓我們用一個簡單的例子來說明:假設我們有一個名為 “Vehicle” 的基礎類別,它有一些共同的特點,例如 “wheels” 和 “color”。現在,我們想創建一個名為 “Car” 的新類別,它繼承了 “Vehicle” 的特點,並添加了一些自己獨特的特點,例如 “numberOfDoors”。

在創建 “Car” 類別時,我們使用 “extends” 關鍵字來表示它繼承自 “Vehicle” 類別。此外,我們還使用 “super()” 函式來調用父類別的建構子,確保 “Car” 類別擁有 “Vehicle” 類別的所有特點。

以下是一個簡單的程式碼示例:

程式碼演示

在這個例子中:

  1. 我們創建了一個名為 “Vehicle” 的基礎類別,它有 “wheels” 和 “color” 兩個屬性,以及一個名為 “getInfo()” 的方法。
  2. 我們創建了一個名為 “Car” 的新類別,它使用 “extends” 關鍵字繼承自 “Vehicle” 類別。
  3. 在 “Car” 類別的建構子中,我們使用 “super()” 函式調用了 “Vehicle” 類別的建構子,並傳入了 “wheels” 和 “color” 參數。這確保了 “Car” 類別擁有 “Vehicle” 類別的所有特點。
  4. 我們在 “Car” 類別中添加了一個新的屬性 “numberOfDoors”,以及重寫了 “getInfo()” 方法,在原有的基礎上添加了關於車門數量的資訊。
  5. 最後,我們創建了一個 “Car” 類別的實例 “myCar”,並呼叫它的 “getInfo()” 方法,輸出了這輛車的相關資訊。

總結

extends 關鍵字允許我們創建一個新的類別,該類別繼承了另一個現有類別的特點和行為。使用 “super()” 函式,我們可以調用父類別的建構子,確保新類別擁有父類別的所有特點。通過繼承,我們可以創建更具體、更專門化的類別,同時避免了重複編寫相同的程式碼。

--

--

AWEI

軟體工程師的前端程式筆記部落格。座右銘是『想是問題、做是答案』!