JavaScript Prototypal Inheritance

Zusammenfassung: In diesem Tutorial lernen Sie, wie die prototypische Vererbung in JavaScript funktioniert.

Einführung in die prototypische Vererbung in JavaScript

Wenn Sie mit anderen objektorientierten Programmiersprachen wie Java oder C++ gearbeitet haben, sind Sie mit dem Konzept der Vererbung vertraut.

In diesem Programmierparadigma ist eine Klasse eine Blaupause für die Erstellung von Objekten. Wenn Sie möchten, dass eine neue Klasse die Funktionalität einer bestehenden Klasse wiederverwendet, können Sie eine neue Klasse erstellen, die die bestehende Klasse erweitert. Dies wird als klassische Vererbung bezeichnet.

JavaScript verwendet keine klassische Vererbung. Stattdessen verwendet es die prototypische Vererbung.

Bei der prototypischen Vererbung „erbt“ ein Objekt Eigenschaften von einem anderen Objekt über die Prototyp-Verknüpfung.

JavaScript prototypische Vererbung und __proto__

Lassen Sie uns ein Beispiel nehmen, um das Konzept deutlicher zu machen.

Im Folgenden wird ein person-Objekt definiert:

Code language: JavaScript (javascript)

Das person-Objekt hat zwei Eigenschaften:

• name, das einen String-Wert enthält.
• greet, das einen Wert enthält, der zufällig eine Funktion ist. Das greet wird als Methode des person-Objekts bezeichnet.

Standardmäßig stellt JavaScript eine Object()-Funktion und ein Prototyp-Objekt bereit, auf das über die prototype-Eigenschaft der Object()-Funktion zugegriffen werden kann:

Wenn Sie die Objektliteral-Syntax verwenden, um ein Objekt zu definieren, ist das Objekt eine Instanz des Object. Daher gibt der Ausdruck person instanceof Object true:

Code language: JavaScript (javascript)

Ausgabe:

Code language: JavaScript (javascript)

Das person-Objekt ist über die ]-Verknüpfung auch mit dem Object.prototype verknüpft.

Mit anderen Worten, Sie können über das person-Objekt auf alle Eigenschaften des Object.prototype-Objekts zugreifen. Zum Beispiel:

Code language: JavaScript (javascript)

Ausgabe:

Code language: JavaScript (javascript)

Das ist die Standardkonvertierung von einem Objekt in eine Zeichenkette.

Wenn Sie die Methode toString() auf dem person-Objekt aufrufen, kann JavaScript es nicht finden. Also folgt JavaScript der Prototypenkette und sucht nach der Methode auf dem Object.prototype-Objekt. JavaScript findet die Methode toString() auf dem Object.prototype-Objekt und führt sie aus.

Um auf den Prototyp des person-Objekts zuzugreifen, können Sie seine __proto__-Eigenschaft verwenden:

Code language: JavaScript (javascript)

Ausgabe:

Code language: JavaScript (javascript)

Im Folgenden wird ein weiteres Objekt namens teacher definiert. Das teacher-Objekt hat die Methode teach():

Code language: JavaScript (javascript)

Wenn das teacher-Objekt auf alle Eigenschaften des person-Objekts zugreifen soll, kann man den Prototyp des teacher-Objekts auf das person-Objekt setzen:

Code language: JavaScript (javascript)

Beachten Sie, dass Sie das __proto__ niemals im Produktionscode verwenden sollten. Dies dient nur zum Lernen und Verstehen.

Jetzt kann das teacher-Objekt auf die name-Eigenschaft und die greet()-Methode des person-Objekts über die Prototypenkette zugreifen:

Code language: JavaScript (javascript)

Ausgabe:

Code language: JavaScript (javascript)

Wenn Sie die greet()-Methode auf dem teacher-Objekt aufrufen, findet JavaScript sie zuerst auf dem teacher-Objekt.

Da JavaScript die Methode auf dem teacher-Objekt nicht finden kann, folgt es der Prototypenkette und sucht die Methode auf dem person-Objekt. Diesmal kann JavaScript die Methode auf dem person-Objekt finden und führt die greet()-Methode aus.

In JavaScript sagen wir, dass das teacher-Objekt Eigenschaften des person-Objekts erbt. Und das ist prototypische Vererbung.

Ein Standardweg zur Implementierung prototypischer Vererbung in ES5

ES5 bot einen Standardweg zur Arbeit mit prototypischer Vererbung, indem es die Object.create()-Methode verwendete.

Beachten Sie, dass Sie jetzt die neueren ES6-Schlüsselwörter class und extends zur Implementierung von Vererbung verwenden sollten. Es ist viel einfacher.

Die Methode Object.create() erstellt ein neues Objekt und verwendet ein vorhandenes Objekt als Prototyp für das neue Objekt:

Code language: JavaScript (javascript)

Die Methode Object.create() akzeptiert zwei Argumente:

• Das erste Argument (proto) ist ein Objekt, das als Prototyp für das neue Objekt verwendet wird.
• Das zweite Argument (propertiesObject) ist, falls vorhanden, ein optionales Objekt, das zusätzliche Eigenschaften für das neue Objekt definiert.

Angenommen, Sie haben ein person-Objekt:

Code language: JavaScript (javascript)

Das Folgende erzeugt ein leeres teacher-Objekt mit dem __proto__ des person-Objekts:

Code language: JavaScript (javascript)

Danach können Sie Eigenschaften für das teacher-Objekt definieren:

Code language: JavaScript (javascript)

Oder Sie können alle diese Schritte in einer Anweisung wie folgt ausführen:

Code language: JavaScript (javascript)

ES5 führte auch die Methode Object.getPrototypeOf() ein, die den Prototyp eines Objekts zurückgibt. Zum Beispiel:

Code language: JavaScript (javascript)

Ausgabe:

Code language: JavaScript (javascript)

Zusammenfassung

• Die Vererbung ermöglicht es einem Objekt, die Eigenschaften und Methoden eines anderen Objekts zu verwenden.
• JavaScript verwendet prototypische Vererbung, die durch Prototyp-Verknüpfung erreicht wird.