Heim > Artikel > Web-Frontend > Unterklassen und Vererbung in ES6 erklärt
Unterklassen und Vererbung in ES6 erklärt
- 王林nach vorne
- 2023-09-05 12:37:021013Durchsuche
In JavaScript verwenden Entwickler Prototypen, um eine andere Funktion in ES5 zu erben. In ES6 können in JavaScript eingeführte Klassen wie andere Programmiersprachen zur Vererbung verwendet werden.
Was sind Unterklassen und Vererbung?
Wie das Wort Unterklasse darstellt, handelt es sich um eine Unterklasse einer anderen Klasse. Wir können Vererbung verwenden, um Unterklassen von einer Oberklasse zu erstellen oder von dieser abzuleiten, und wir können eine Klasse als Oberklasse, eine davon abgeleitete Klasse und eine Unterklasse als abgeleitete Klasse bezeichnen.
Die Unterklasse enthält alle Eigenschaften und Methoden der Oberklasse, und wir können über das Unterklassenobjekt darauf zugreifen. Sie können die Klasse mit dem Schlüsselwort „extend“ von der Superklasse ableiten.
Grammatik
Sie können eine Unterklasse von einer Oberklasse erben, indem Sie der folgenden Syntax folgen.
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
}
Wir haben das Schlüsselwort class in der obigen Syntax verwendet, um eine Klasse zu erstellen. Darüber hinaus können Benutzer auch sehen, wie wir mithilfe des Schlüsselworts „extends“ Unterklassen von Oberklassen erben können.
Vorteile der Erbschaft
Bevor Sie mit diesem Tutorial fortfahren, lassen Sie uns die verschiedenen Vorteile einer Vererbung verstehen.
Vererbung ermöglicht es uns, Code aus Superklassen wiederzuverwenden.
Vererbung spart Zeit, da wir nicht oft denselben Code schreiben müssen.
Außerdem können wir Vererbung nutzen, um wartbaren Code mit der richtigen Struktur zu generieren.
Wir können Vererbung nutzen, um Superklassenmethoden zu überschreiben und sie in untergeordneten Klassen erneut zu implementieren.
Lassen Sie uns die Vererbung anhand von Beispielen aus dem wirklichen Leben verstehen. Auf diese Weise können wir die Vererbung richtig verstehen.
Beispiel
Im folgenden Beispiel haben wir die Hausklasse erstellt. Die Klasse Two_BHK erbt die Hausklasse, was bedeutet, dass die Klasse Two_BHK alle Eigenschaften und Methoden der Hausklasse enthält.
Wir haben die Methode get_total_rooms() der Klasse house überschrieben und unsere eigene Methode in der Klasse Two_BHK implementiert.
<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>
Jetzt können Sie den wahren Zweck der Erbschaft verstehen. Im obigen Beispiel können Sie beobachten, wie wir Code durch Vererbung wiederverwenden können. Darüber hinaus bietet es eine klare Struktur, wie das obige Beispiel zeigt. Darüber hinaus können wir die Struktur der Methode in der Oberklasse definieren und in der Unterklasse implementieren. Die Superklasse stellt also eine klare Methodenstruktur bereit und wir können diese in den Unterklassen implementieren.
Beispiel
In diesem Beispiel verwenden wir den Konstruktor der Klasse, um die Eigenschaften der Klasse zu initialisieren. Zusätzlich haben wir das Schlüsselwort super() verwendet, um den Konstruktor der Superklasse aus der Unterklasse aufzurufen.
Denken Sie daran, dass Sie das Schlüsselwort super() in den Unterklassenkonstruktor schreiben müssen, bevor Sie Eigenschaften der Unterklasse initialisieren.
<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>
In diesem Tutorial haben wir etwas über Vererbung gelernt. Darüber hinaus lernen wir in diesem Tutorial, Methoden in Unterklassen zu überschreiben und den Konstruktor der Oberklasse aus der Unterklasse aufzurufen, um alle Eigenschaften der Oberklasse zu initialisieren.
Das obige ist der detaillierte Inhalt vonUnterklassen und Vererbung in ES6 erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse