JavaScript-Klassenvererbung

Die JavaScript-Klassenvererbung verwendet das Schlüsselwort extends.

Vererbung ermöglicht es uns, eine Klasse auf Basis einer anderen Klasse zu definieren, wodurch das Erstellen und Pflegen einer Anwendung erleichtert wird.

super()Die Methode wird verwendet, um den Konstruktor der Elternklasse aufzurufen.

Wenn Sie eine Klasse erstellen, müssen Sie neue Datenmember und Memberfunktionen nicht erneut schreiben; Sie müssen nur angeben, dass die neue Klasse die Member einer vorhandenen Klasse erbt. Diese vorhandene Klasse wird alsBasisklasse (Elternklasse)bezeichnet, und die neue Klasse wird alsabgeleitete Klasse (Kindklasse)。

Vererbung stellt eineIst-ein-Beziehung dar. Zum Beispiel ist ein Säugetier ein Tier, ein Hund ist ein Säugetier, daher ist ein Hund ein Tier, und so weiter.

Der Code lautet wie folgt:

//Basisklasse Klasse Animal { //eat()-Funktion //sleep()-Funktion }; //Abgeleitete Klasse Klasse Dog extends Animal { //bark()-Funktion };

Das folgende Beispiel erstellt eine Klasse "Example", die von der Klasse "Site" erbt:

Beispiel

class Site { constructor(name) { this.sitename = name; } present() { return 'Ich mag' + this.sitename; } } class Example extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', es wurde gegründet' + this.age + 'year.'; } } let noob = new Example("Example", 5); document.getElementById("demo").innerHTML = noob.show();

Selbst ausprobieren »

super()Die Methode ruft den Konstruktor der Elternklasse auf.

Durch Aufrufen einer Methode im Konstruktor,super()rufen wir den Konstruktor der Elternklasse auf, wodurch wir Zugriff auf die Eigenschaften und Methoden der Elternklasse erhalten.

Vererbung ist nützlich für die Wiederverwendbarkeit von Code.

JavaScript hat keine traditionellen Klassen wie andere Programmiersprachen; es basiert auf einem prototypischen Vererbungsmodell.

ES6 führte die Klasse und dasclass-Schlüsselwort ein, aber der zugrunde liegende Mechanismus basiert weiterhin auf prototypischer Vererbung.

Verwendung der Prototypenketten-Vererbung

Im folgenden Beispiel ist Animal eine Basisklasse und Dog eine Unterklasse, die von Animal erbt. Dog.prototype verwendet Object.create(Animal.prototype), um ein neues Objekt zu erstellen, das die Methoden und Eigenschaften von Animal.prototype erbt. Indem Dog.prototype.constructor auf Dog gesetzt wird, wird sichergestellt, dass der Konstruktor in der Vererbungskette korrekt ist.

Beispiel

function Animal(name) { this.name = name; } Animal.prototype.eat = function() { console.log(this.name + " isst."); }; function Dog(name, breed) { Animal.call(this, name); this.breed = breed; } //Richte die Prototypenkette ein, sodass Dog von Animal erbt Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(this.name + " bellt."); }; var dog = new Dog("Buddy", "Labrador"); dog.eat(); //Rufe die von Animal geerbte Methode auf dog.bark(); //Rufe die Methode von Dog auf

Verwendung der ES6-Klassenvererbung

ES6 führte das Schlüsselwort class ein, wodurch Klassendefinition und Vererbung klarer wurden. Das Schlüsselwort extends wird verwendet, um eine Vererbungsbeziehung herzustellen, und das Schlüsselwort super wird verwendet, um im Konstruktor der Unterklasse den Konstruktor der Elternklasse aufzurufen.

Beispiel

class Animal { constructor(name) { this.name = name; } eat() { console.log(this.name + " frisst."); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } bark() { console.log(this.name + " bellt."); } } const dog = new Dog("Buddy", "Labrador"); dog.eat(); dog.bark();

Ob Sie die Vererbung über die Prototypenkette oder die ES6-Klassenvererbung verwenden, lassen sich ähnliche Vererbungseffekte erzielen. Bei der Wahl einer Methode können Sie sich nach persönlichen Vorlieben und Projektanforderungen entscheiden.

Getter und Setter

In Klassen können wir Getter und Setter verwenden, um Werte abzurufen und zu setzen. Getter und Setter müssen im Strict-Modus ausgeführt werden.

Getter und Setter machen Operationen auf Eigenschaften sehr flexibel.

Um Getter und Setter in einer Klasse hinzuzufügen, verwende die Schlüsselwörter get und set.

Das folgende Beispiel erstellt einen Getter und einen Setter für die Eigenschaft sitename:

Beispiel

class Example { constructor(name) { this.sitename = name; } get s_name() { return this.sitename; } set s_name(x) { this.sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.s_name;

Selbst ausprobieren »

Hinweis:Obwohl ein Getter eine Methode ist, verwende keine Klammern, wenn du den Wert der Eigenschaft abrufen möchtest.

Die Namen von Getter-/Setter-Methoden dürfen nicht mit dem Eigenschaftsnamen übereinstimmen; in diesem Beispiel heißt die Eigenschaft sitename.

Viele Entwickler verwenden einen Unterstrich vor dem Eigenschaftsnamen_, um den Getter/Setter von der eigentlichen Eigenschaft zu trennen:

Das folgende Beispiel verwendet einen Unterstrich_, um die Eigenschaft festzulegen, und erstellt die entsprechenden Getter-/Setter-Methoden:

Beispiel

class Example { constructor(name) { this._sitename = name; } get sitename() { return this._sitename; } set sitename(x) { this._sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.sitename;

Selbst ausprobieren »

Um einen Setter zu verwenden, verwenden Sie dieselbe Syntax wie beim Festlegen eines Eigenschaftswerts. Obwohl set eine Methode ist, sollte es ohneKlammern stehen：

Beispiel

class Example { constructor(name) { this._sitename = name; } set sitename(x) { this._sitename = x; } get sitename() { return this._sitename; } } let noob = new Example("Example"); noob.sitename = "EXAMPLE"; document.getElementById("demo").innerHTML = noob.sitename;

Selbst ausprobieren »

Hoisting

Ein wichtiger Unterschied zwischen Funktionsdeklarationen und Klassendeklarationen besteht darin, dass Funktionsdeklarationen gehoistet werden, Klassendeklarationen jedoch nicht.

Sie müssen Ihre Klasse zuerst deklarieren und dann darauf zugreifen; andernfalls löst Code wie der folgende einen ReferenceError aus:

Beispiel

//Sie können die Klasse hier nicht so verwenden, da sie noch nicht deklariert wurde. //noob = new Example("Example") //Error class Example { constructor(name) { this.sitename = name; } } //Die Klasse kann hier verwendet werden. let noob = new Example("Example")

Die Verwendung ohne Deklaration verursacht einen Fehler:

Wenn es vor der Verwendung deklariert wird, wird es normal ausgeführt:

Weitere Erweiterungen