Um eine Klassenvererbung zu erstellen, verwenden Sie extends Stichwort.
Eine mit einer Klassenvererbung erstellte Klasse erbt alle Methoden von eine andere Klasse:
Erstellen Sie eine Klasse mit dem Namen „Model“, die die Methoden von „Car“ erbt. Klasse:
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();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>
<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>
<p id="demo"></p>
<script>
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;
}
}
const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
Die Methode super() bezieht sich auf das übergeordnete Element Klasse.
Durch Aufrufen der Methode super() im Konstruktormethode aufrufen, rufen wir die Konstruktormethode des übergeordneten Elements auf und erhalten Zugriff darauf 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.
Mit Klassen können Sie auch Getter und Setter verwenden.
Es kann sinnvoll sein, Getter und Setter für Ihre Eigenschaften zu verwenden, insbesondere wenn Sie möchten etwas Besonderes mit dem Wert machen, bevor Sie sie zurückgeben oder vorher du hast sie eingestellt.
Um der Klasse Getter und Setter hinzuzufügen, verwenden Sie get- und set-Schlüsselwörter.
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;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
Hinweis: Auch wenn der Getter eine Methode ist, verwenden Sie bei der Ausführung keine Klammern Ich möchte den Immobilienwert ermitteln.
Der Name der Getter/Setter-Methode darf nicht mit dem Namen der Methode identisch sein Eigenschaft, in diesem Fall carname.
Viele Programmierer verwenden einen Unterstrich _ vor dem Eigenschaftsnamen, um den Getter/Setter von der eigentlichen Eigenschaft zu trennen:
Sie können den Unterstrich verwenden, um den Getter/Setter vom zu trennen tatsächliches Eigentum:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Um einen Setter zu verwenden, verwenden Sie dieselbe Syntax wie beim Festlegen eines Eigenschaftswerts, ohne Klammern:
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;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Im Gegensatz zu Funktionen und anderen JavaScript-Deklarationen werden Klassendeklarationen nicht hochgehoben.
Das bedeutet, dass Sie eine Klasse deklarieren müssen, bevor Sie sie verwenden können:
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car { constructor(brand) {
this.carname = brand; }
}
//Now you can use the class:
const myCar = new Car("Ford")Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Hinweis: Für andere Deklarationen, wie z. B. Funktionen, erhalten Sie KEINE Fehler, wenn Sie versuchen, es zu verwenden, bevor es deklariert wird, da es sich um das Standardverhalten handelt der JavaScript-Deklarationen werden hochgezogen (die Deklaration wird nach oben verschoben).