JavaScript - 繼承

上一頁
下一頁

JavaScript 中的繼承

在 JavaScript 中，繼承的概念允許子類繼承父類的屬性和方法。繼承也是面向物件程式設計（如封裝和多型）的一個基本概念。

有時，您必須將一個類的屬性和方法新增到另一個類中。例如，您已經建立了一個通用的腳踏車類，其中包含每輛腳踏車的相同屬性和方法。之後，您為“本田”腳踏車建立一個單獨的類，並且需要向“本田”類新增所有屬性和方法。您可以使用繼承來實現這一點。

在 ECMAScript 6 (ES6) 之前，物件的原型用於繼承，但在 ES6 中，引入了 'extends' 關鍵字來繼承類。

本章使用以下術語。

  • 父類 - 其屬性被其他類繼承的類。

  • 子類 - 繼承其他類屬性的類。

JavaScript 單繼承

您可以使用 'extends' 關鍵字將父類的屬性繼承到子類中。在單繼承中，只有一個類繼承另一個類的屬性。

語法

您可以遵循以下語法進行單繼承。

class childClass extends parentClass {
    // Child class body
}

在上述語法中，您可以將 'childClass' 替換為子類的名稱，將 'parentClass' 替換為父類的名稱。(此處應有程式碼示例，原文缺失)

示例：單繼承

在下面的示例中，“Bike”類是父類，“Suzuki”類是子類。“Suzuki”類繼承了“Bike”類的屬性。

“Bike”類包含 constructor() 方法，用於初始化 gears 屬性，以及 getGears() 方法，用於返回 gears 屬性的值。

“Suzuki”類包含 constructor() 方法，用於初始化 brand 屬性，以及 getBrand() 方法，用於返回 brand 屬性的值。

我們建立了一個“Suzuki”類的物件。使用“Suzuki”類的例項，我們呼叫 getBrand() 和 getGears() 方法。(此處應有程式碼示例，原文缺失)

<html>
<body>
   <div id = "output1">The brand of the bike is: </div>
   <div id = "output2">Total gears in the bike is: </div>
   <script>
      // Parent class
      class Bike {
         constructor() {
            this.gear = 5;
         }

         getGears() {
            return this.gear;
         }
      }
      // Child class
      class suzuki extends Bike {
         constructor() {
            super();
            this.brand = "Yamaha"
         }

         getBrand() {
            return this.brand;
         }
      }

      const suzukiBike = new suzuki();
      document.getElementById("output1").innerHTML += suzukiBike.getBrand();
      document.getElementById("output2").innerHTML += suzukiBike.getGears();
   </script>
</body>
</html>

輸出

The brand of the bike is: Yamaha
Total gears in the bike is: 5

這樣，您可以透過子類的例項使用父類的屬性和方法。

JavaScript super() 關鍵字

在上面的示例中，我們用靜態值初始化了“Bike”類的“gear”屬性。在現實生活中，您需要根據腳踏車的型號用動態值初始化它。

現在，問題是如何從子類初始化父類的屬性。解決方案是 super() 關鍵字。

super() 關鍵字用於在子類中呼叫父類的方法或訪問父類的屬性。預設情況下，super() 關鍵字呼叫父類的建構函式。您還可以向 super() 關鍵字傳遞引數，以將其傳遞給父類的建構函式。

示例：使用 super() 關鍵字初始化父類屬性

在下面的示例中，“Suzuki”類擴充套件了“Bike”類。(此處應有程式碼示例，原文缺失)

“Bike”類包含建構函式，它接受 gears 作為引數，並用它初始化 gears 屬性。

“Suzuki”類也包含建構函式，它接受 brand 和 gears 作為引數。它使用 brand 引數初始化 brand 屬性，並將 gears 引數作為 super() 關鍵字的引數傳遞。

之後，我們建立了一個“Suzuki”類的物件，並將 brand 和 gears 作為建構函式的引數傳遞。您可以在輸出中看到 brand 和 gear 屬性的動態值。(此處應有程式碼示例，原文缺失)

<html>
<body>
   <div id = "output1">The brand of the bike is: </div>
   <div id = "output2">Total gears in the bike is: </div>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
        }
      }
      // Child class
      class suzuki extends Bike {
         constructor(brand, gears) {
            super(gears);
            this.brand = brand;
         }
      }
      const suzukiBike = new suzuki("Suzuki", 4);
      document.getElementById("output1").innerHTML += suzukiBike.brand;
      document.getElementById("output2").innerHTML += suzukiBike.gears;

   </script>
</body>
</html>

輸出

The brand of the bike is: Suzuki
Total gears in the bike is: 4

這樣，您可以動態地從子類初始化父類的屬性。

JavaScript 多層繼承

多層繼承是 JavaScript 中的一種繼承型別。在多層繼承中，一個類繼承另一個類的屬性，而其他類繼承當前類的屬性。

語法

使用者可以遵循以下語法進行多層繼承。(此處應有程式碼示例，原文缺失)

class A {
}
class B extends A {
}
class C extends B {
}

在上述語法中，C 類繼承 B 類，B 類繼承 A 類。

示例

在下面的示例中，“Honda”類繼承“Bike”類。“Shine”類繼承“Honda”類。(此處應有程式碼示例，原文缺失)

我們在每個類中使用 super() 關鍵字來呼叫父類的 constructor() 並初始化其屬性。

我們正在使用Shine類的例項訪問Bike類的屬性，因為它間接繼承了Bike類的屬性。

<html>
<body>
   <p id = "output"> </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(brand, gears) {
            super(gears);
            this.brand = brand;
         }
      }
      class Shine extends Honda {
         constructor(model, brand, gears) {
            super(brand, gears);
            this.model = model;
         }
      }
      const newBike = new Shine("Shine", "Honda", 5);
      document.getElementById("output").innerHTML = `The ${newBike.model} model of the ${newBike.brand} brand has total ${newBike.gears} gears.`;
   </script>
</body>
</html>

輸出

The Shine model of the Honda brand has total 5 gears.

JavaScript層次繼承

在JavaScript層次繼承中，一個類被多個類繼承。

語法

J的語法您可以按照以下語法進行層次繼承。

class A {
}
class B extends A {
}
Class C extends A {
}

在上例語法中，B和C兩個類都繼承了A類的屬性。

示例

在下面的示例中，Bike類包含gears屬性，並使用constructor()方法進行初始化。

Honda類擴充套件了Bike類。Honda類的constructor()方法使用super()關鍵字初始化Bike類的屬性以及自身的model屬性。

Suzuki類繼承了Bike類的屬性。Suzuki類的constructor()方法也初始化了Bike類的屬性以及自身的另外兩個屬性。

之後，我們建立Honda和Suzuki類的物件並訪問它們的屬性。

<html>
<body>
   <p id = "output1"> Honda Bike Object: </p>
   <p id = "output2"> Suzuki Bike Object: </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(model, gears) {
            super(gears);
            this.model = model;
         }
      }
      // Child class
      class Suzuki extends Bike {
         constructor(model, color, gears) {
            super(gears);
            this.model = model;
            this.color = color;
         }
      }
      const h_Bike = new Honda("Shine", 5);
      const s_Bike = new Suzuki("Zx6", "Blue", 6);
      document.getElementById("output1").innerHTML += JSON.stringify(h_Bike);
      document.getElementById("output2").innerHTML += JSON.stringify(s_Bike);
   </script>
</body>
</html>

輸出

Honda Bike Object: {"gears":5,"model":"Shine"}

Suzuki Bike Object: {"gears":6,"model":"Zx6","color":"Blue"}

繼承類的靜態成員

在JavaScript中，您可以使用子類中的super關鍵字呼叫父類的靜態方法。在子類之外，您可以使用子類名稱來呼叫父類和子類的靜態方法。

示例

在下面的示例中，Bike類包含getDefaultBrand()靜態方法。Honda類也包含Bikename()靜態方法。

在Bikename()方法中，我們使用'super'關鍵字呼叫父類的getDefaultBrand()方法。

此外，我們使用'Honda'類名執行Bikename()方法。

<html>
<body>
   <p id = "output">The bike name is: </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }

         static getDefaultBrand() {
            return "Yamaha";
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(model, gears) {
            super(gears);
            this.model = model;
         }
         static BikeName() {
            return super.getDefaultBrand() + ", X6";
         }
      }
      document.getElementById("output").innerHTML += Honda.BikeName();
   </script>
</body>
</html>

輸出

The bike name is: Yamaha, X6
當您在多級繼承中使用'super'關鍵字執行任何方法時，類會在父類中查詢方法。如果在父類中找不到該方法，則會在父類的父類中查詢，依此類推。

基於JavaScript原型的繼承

您還可以更新或擴充套件類的原型，以將多個類的屬性繼承到單個類中。因此，這也稱為多重繼承。

語法

您可以按照以下語法使用基於原型的繼承。

Child.prototype = Instance of parent class

在上例語法中，我們將父類例項賦值給子物件的原型。

示例：基於JavaScript原型的繼承

在下面的示例中，Bike()是一個物件建構函式，它初始化brand屬性。

之後，我們將getBrand()方法新增到Bike()函式的原型中。

接下來，我們建立了Vehicle()物件建構函式和Bike()建構函式的例項。

之後，我們使用Bike的例項更新Vehicle類的原型。這裡，Vehicle充當子類，Bike充當父類。

我們使用Vehicle()函式的例項訪問Bike()函式原型的getBrand()方法。

<html>
<body>
   <p id = "output1">Bike brand: </p>
   <p id = "output2">Bike Price: </p>
   <script>
      function Bike(brand) {
         this.brand = brand;
      }
      Bike.prototype.getBrand = function () {
         return this.brand;
       }
      //Another constructor function  
      function Vehicle(price) {
         this.price = price;
      }
      const newBike = new Bike("Yamaha");
      Vehicle.prototype = newBike; //Now Bike treats as a parent of Vehicle.  
      const vehicle = new Vehicle(100000);

      document.getElementById("output1").innerHTML += vehicle.getBrand();
      document.getElementById("output2").innerHTML += vehicle.price;
   </script>
</body>
</html>

輸出

Bike brand: Yamaha

Bike Price: 100000
您無法訪問子類中父類的私有成員。

繼承的優點

在這裡，我們將學習JavaScript中繼承概念的優點。

  • 程式碼重用 − 子類可以繼承父類的屬性。因此，這是重用父類程式碼的最佳方法。

  • 功能擴充套件 − 您可以新增新的屬性和方法來擴充套件每個子類中父類的功能。

  • 程式碼維護 − 因為您可以將程式碼劃分為子類，所以更容易維護程式碼。

  • 多級和層次繼承允許您將資料組合在一起。

列印頁面
上一頁
下一頁
廣告