首頁 > 文章 > web前端 > 解釋ES6中的子類別和繼承

解釋ES6中的子類別和繼承

王林轉載: 2023-09-05 12:37:021024瀏覽

解釋ES6中的子類別和繼承

在 JavaScript 中，開發人員使用原型來繼承 ES5 中的另一個函數。在ES6中，JavaScript中引入的類別可以像其他程式語言一樣用於繼承。

什麼是子類別和繼承？

正如子類別一詞所代表的那樣，它是另一個類別的子類別。我們可以使用繼承來從超類創建或派生子類，並且可以將類調用為超類，從中派生出類，將子類調用為派生類。

子類別包含了超類別的所有屬性和方法，我們可以使用子類別物件來存取它。您可以使用“extend”關鍵字從超類別派生該類別。

文法

您可以依照下列語法從超類別繼承子類別。

Class superClass {
   // members and methods of the superClass
}
class subClass extends superClass {
   // it contains all members and methods of the superclass
   // define the properties of the subclass
}

我們在上面的語法中使用了 class 關鍵字來建立一個類別。另外，使用者還可以看到我們如何使用extends關鍵字從超類別繼承子類別。

繼承的好處

在繼續本教學之前，讓我們先了解繼承的不同好處。

繼承允許我們重複使用超類別的程式碼。
繼承可以節省時間，因為我們不需要經常寫相同的程式碼。
此外，我們可以使用繼承來產生具有適當結構的可維護程式碼。
我們可以使用繼承來重寫超類別方法，並在子類別中再次實作它們。

讓我們透過現實生活中的例子來理解繼承。這樣我們就可以正確地理解繼承了。

範例

在下面的範例中，我們建立了 house 類別。 Two_BHK 類別繼承了 house 類，也就是說 Two_BHK 類別包含了 house 類別的所有屬性和方法。

我們重寫了 house 類別的 get_total_rooms() 方法，並在 Two_BHK 類別中實作了自己的方法。

<html>
<body>
   <h2>Using the <i> extends </i> keyword to inherit classes in ES6  </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      class house {
         color = "blue";
         get_total_rooms() {
            output.innerHTML += "House has a default room. </br>";
         }
      }
      // extended the house class via two_BHK class
      class Two_BHK extends house {
         // new members of two_BHK class
         is_galary = false;
         // overriding the get_total_rooms() method of house class
         get_total_rooms() {
            output.innerHTML += "Flat has a total of two rooms. </br>";
         }
      }
      // creating the objects of the different classes and invoking the 
      //get_total_rooms() method by taking the object as a reference. 
      let house1 = new house();
      house1.get_total_rooms();
      let house2 = new Two_BHK();
      house2.get_total_rooms();
   </script>
</body>
</html>

現在，您可以了解繼承的真正用途了。您可以在上面的範例中觀察到我們如何透過繼承重用程式碼。此外，它還提供了上面範例演示的清晰結構。此外，我們可以在超類別中定義方法的結構並在子類別中實現它。所以，超類別提供了一個清晰的方法結構，我們可以在子類別中實作它們。

範例

在此範例中，我們使用類別的建構子來初始化類別的屬性。此外，我們也使用了 super() 關鍵字從子類別呼叫超類別的建構子。

請記住，在初始化子類別的任何屬性之前，您需要在子類別建構函式中編寫 super() 關鍵字。

<html>
<body>
   <h2>Using the <i> extends </i> keyword to inherit classes in ES6 </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // creating the superclass
      class superClass {
         // constructor of the super-class
         constructor(param1, param2) {
            this.prop1 = param1;
            this.prop2 = param2;
         }
      }
      // Creating the sub-class
      class subClass extends superClass {
         // constructor of subClass
         constructor(param1, param2, param3) {
            // calling the constructor of the super-class
            super(param1, param2);
            this.prop3 = param3;
         }
      }
      // creating the object of the subClass
      let object = new subClass("1000", 20, false);
      output.innerHTML +=
      "The value of prop1 in the subClass class is " + object.prop1 + "</br>";
      output.innerHTML +=
      "The value of prop2 in subClass class is " + object.prop2 + "</br>";
      output.innerHTML +=
      "The value of prop3 in subClass class is " + object.prop3 + "</br>";
   </script>
</body>
</html>

我們在本教程中學習了繼承。此外，本教學也教我們重寫子類別中的方法並從子類別呼叫超類別的建構函式來初始化所有超類別屬性。

以上是解釋ES6中的子類別和繼承的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript es6 子类构造函数继承 class 对象

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：jquery如何改變tr屬性下一篇：jquery如何改變tr屬性

看更多