資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究ES6 中的子類和繼承
在 JavaScript 中，開發者在 ES5 中使用原型來繼承函式。在 ES6 中，JavaScript 中引入的類可以像其他程式語言一樣用於繼承。
什麼是子類和繼承？
顧名思義，子類是另一個類的子類。我們可以使用繼承從超類建立或派生子類，我們可以將類稱為派生該類的超類，並將子類稱為派生類。
子類包含超類所有屬性和方法，我們可以使用子類物件訪問它們。可以使用“extends”關鍵字從超類派生類。
語法
您可以按照以下語法從超類繼承子類。
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 關鍵字從 superClass 繼承 subClass。
繼承的優點
在我們繼續本教程之前，讓我們瞭解繼承的不同優點。
繼承允許我們重用超類的程式碼。
繼承節省時間，因為我們不需要經常編寫相同的程式碼。
此外，我們可以使用繼承生成具有適當結構的可維護程式碼。
我們可以使用繼承覆蓋超類方法，並在子類中再次實現它們。
讓我們透過現實生活中的例子來理解繼承。這樣我們可以更好地理解繼承。
示例
在下面的示例中，我們建立了 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>
在本教程中，我們學習了繼承。此外，本教程還教我們如何在子類中覆蓋方法，以及如何從子類呼叫超類的建構函式來初始化所有超類屬性。
315 次檢視
