JavaScript-Klassenvererbung
Klassenvererbung
Um eine Klassenvererbung zu erstellen, verwenden Sie das extends
Schlüsselwort.
Eine Klasse, die mit einer Klassenvererbung erstellt wurde, erbt alle Methoden von einer anderen Klasse:
Beispiel
Erstellen Sie eine Klasse namens "Model", die die Methoden von der Klasse "Car" erbt:
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();
Die super()Methode bezieht sich auf die übergeordnete Klasse.
Durch Aufrufen der super()Methode in der Konstruktormethode rufen wir die Konstruktormethode des übergeordneten Elements auf und erhalten Zugriff auf die Eigenschaften und Methoden des übergeordneten Elements.
Vererbung ist nützlich für die Wiederverwendbarkeit von Code: Verwenden Sie Eigenschaften und Methoden einer vorhandenen Klasse wieder, wenn Sie eine neue Klasse erstellen.
Getter und Setter
Klassen erlauben Ihnen auch, Getter und Setter zu verwenden.
Es kann sinnvoll sein, Getter und Setter für Ihre Eigenschaften zu verwenden, insbesondere wenn Sie etwas Besonderes mit dem Wert machen möchten, bevor Sie sie zurückgeben oder festlegen.
Um Getter und Setter in der Klasse hinzuzufügen, verwenden Sie die Schlüsselwörter
getund .set
Beispiel
Erstellen Sie einen Getter und einen Setter für die Eigenschaft "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Hinweis: Auch wenn der Getter eine Methode ist, verwenden Sie keine Klammern, wenn Sie den Eigenschaftswert abrufen möchten.
Der Name der Getter/Setter-Methode darf nicht mit dem Namen der Eigenschaft identisch sein, in diesem Fall carname.
Viele Programmierer verwenden einen Unterstrich _
vor dem Eigenschaftsnamen, um den Getter/Setter von der eigentlichen Eigenschaft zu trennen:
Beispiel
Sie können den Unterstrich verwenden, um den Getter/Setter von der eigentlichen Eigenschaft zu trennen:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Um einen Setter zu verwenden , verwenden Sie dieselbe Syntax wie beim Festlegen eines Eigenschaftswerts, ohne Klammern:
Beispiel
Verwenden Sie einen Setter, um den Autonamen in "Volvo" zu ändern:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Heben
Im Gegensatz zu Funktionen und anderen JavaScript-Deklarationen werden Klassendeklarationen nicht gehisst.
Das bedeutet, dass Sie eine Klasse deklarieren müssen, bevor Sie sie verwenden können:
Beispiel
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Hinweis: Bei anderen Deklarationen wie Funktionen erhalten Sie KEINEN Fehler, wenn Sie versuchen, sie zu verwenden, bevor sie deklariert sind, da das Standardverhalten von JavaScript-Deklarationen das Heben ist (Verschieben der Deklaration nach oben).