JavaScript-Klassen-Vererbung

Klassenvererbung

Um Klassenvererbung zu erstellen, verwenden Sie extends Schlüsselwort.

Klassenvererbung durch eine Klasse, die durch Klassenvererbung erstellt wurde, erbt alle Methoden einer anderen Klasse:

Beispiel

Erstellen Sie eine Klasse namens "Model", die die Methoden der Klasse "Car" weitervererbt:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Ich habe ein ' + this.carname;
  }
}
class Model extends Car {}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', es ist ein ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Probieren Sie es selbst aus

super() Methode verweist auf die übergeordnete Klasse.

Durch das Aufrufen von super() Methoden, haben wir den Constructor der übergeordneten Klasse aufgerufen und haben den Zugriff auf die Attribute und Methoden der übergeordneten Klasse erhalten.

Vererbung ist für die Wiederverwendbarkeit von Code nützlich: Verwenden Sie bei der Erstellung neuer Klassen bestehende Attribute und Methoden.

Getter und Setter

Die Klasse ermöglicht es Ihnen auch, Getter und Setter zu verwenden.

Es ist klug, Getter und Setter für Ihre Attribute zu verwenden, insbesondere wenn Sie vor dem Zurückgeben oder dem Setzen von Werten etwas Besonderes tun möchten.

Um Getter und Setter in einer Klasse hinzuzufügen, verwenden Sie get und set Schlüsselwort.

Beispiel

Erstellen Sie Getter und Setter für das Attribut "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;

Probieren Sie es selbst aus

Anmerkung:Selbst wenn Getter eine Methode ist, verwenden Sie bei der Abfrage des Attributswerts keine Klammern.

Der Name der Getter/Setter-Methode darf nicht mit dem Attributnamen identisch sein, im Beispiel carname.

Viele Programmierer verwenden das Unterstrichzeichen _ vor den Attributnamen, um Getter/Setter von den tatsächlichen Attributen zu trennen:

Beispiel

Sie können den Unterstrichzeichen verwenden, um Getter/Setter von den tatsächlichen Attributen 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;

Probieren Sie es selbst aus

Verwenden Sie die gleiche Syntax wie zum Setzen des Attributswerts, ohne Klammern:

Beispiel

Verwenden Sie den Setter, um den Namen des Autos 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;

Probieren Sie es selbst aus

Hoisting

Im Gegensatz zu Funktionen und anderen JavaScript-Deklarationen werden Klassendeklarationen nicht gehoisted.

Das bedeutet, dass Sie die Klasse zuerst deklarieren müssen, bevor Sie sie verwenden können:

Beispiel

//Sie können die Klasse noch nicht verwenden.
//myCar = new Car("Ford")
//Dies würde einen Fehler verursachen.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Jetzt können Sie die Klasse verwenden:
let myCar = new Car("Ford")

Probieren Sie es selbst aus

Anmerkung:Für andere Deklarationen wie Funktionen wird kein Fehler aufgetreten, wenn versucht wird, sie vor der Deklaration zu verwenden, da die Standardverhalten von JavaScript-Deklarationen das Hoisting (Verschieben der Deklarationen nach oben) ist.