Was ist das super() in JavaScript?

0
14

Was passiert, wenn Sie sehen, einige JavaScript, dass super () aufruft?.In einer Kind-Klasse verwenden Sie super() aufrufen, um seine übergeordneten Konstruktor und super.<methodName> Zugriff auf seine Eltern Methoden. In diesem Artikel wird davon ausgegangen, zumindest ein wenig Vertrautheit mit den Konzepten der Konstruktoren und child-und parent-Klassen. Wenn das völlig neu, Sie können wollen, starten Sie mit Mozilla ‘ s Artikel über Objekt-orientierte JavaScript für Anfänger.

Super nicht eindeutig zu Javascript — viele Programmiersprachen, darunter Java und Python haben eine super () – Schlüsselwort, das stellt einen Verweis auf eine übergeordnete Klasse. JavaScript im Gegensatz zu Java und Python, ist nicht gebaut, um eine Vererbung-Modell. Statt, es erstreckt sich von JavaScript, prototypal inheritance-Modell zu bieten, das Verhalten, die konsistent mit Vererbung.

Lasst uns lernen, ein bisschen mehr darüber und schauen Sie sich einige code-Beispiele.

First off, hier ein Zitat aus Mozillas web-docs für die Klassen:

JavaScript-Klassen, eingeführt im ECMAScript 2015, sind vor allem syntaktischer Zucker über JavaScript-der vorhandene Prototyp-basierte Vererbung. Die Klasse syntax nicht einführen einer neuen Objekt-orientierte Vererbung-Modell zu JavaScript.

Ein Beispiel für einen einfachen, untergeordneten und der übergeordneten Klasse wird die veranschaulichen, was dieser Spruch wirklich bedeutet:

Siehe Stift
ZEzggLK von Bailey Jones (@bailey_jones)
auf CodePen.

Mein Beispiel besteht aus zwei Klassen: Fische und Forellen. Alle Fische Informationen für Lebensraum und Länge, so dass diese Eigenschaften gehören zu den Fisch-Klasse. Forelle hat auch eine Eigenschaft für Vielfalt, so dass es erstreckt sich von Fisch zu bauen auf der Oberseite der beiden anderen Eigenschaften. Hier sind die Konstruktoren für Fisch und Forelle:

class Fisch {
Konstruktor(Lebensraum, length) {
diese.habitat = Lebensraum
diese.Länge = Länge
}
}

Klasse Forelle extends Fisch {
Konstruktor(Lebensraum, Länge, Art) {
super(Lebensraum, Länge)
diese.Vielzahl = Vielfalt
}
}

Die Fische-Klasse einen Konstruktor definiert, der Lebensraum und die Länge, und die Forellen Konstruktor definiert Sorte. Ich habe zum Aufruf von super() in Forellen-Konstruktor übergeben, oder ich werde eine Referenz Fehler, wenn ich versuchen, diese.Vielfalt. Das ist, weil auf der Linie einer von der Forelle-Klasse, sagte ich JavaScript, dass die Forelle ist ein Kind der Fisch mit dem Schlüsselwort extends. Das bedeutet, dass Forelle ist dieser Kontext enthält die Eigenschaften und Methoden definiert, die in der Fisch-Klasse, plus was auch immer Eigenschaften und Methoden Forelle definiert für sich selbst. Aufruf von super() im Grunde genommen können Sie JavaScript wissen, was ein Fisch ist, so dass Sie können erstellen Sie eine diesem Zusammenhang für die Forelle, das alles enthält, das aus Fisch und alles, was wir über zu definieren, für die Forelle. Die fish-Klasse, muss nicht die super (), weil seine “Eltern” ist nur das JavaScript-Objekt. Fisch ist bereits an der Spitze der prototypal inheritance-chain, also dem Aufruf von super() ist nicht nötig — der Fisch ist in diesem Kontext muss nur der include-Objekt, das JavaScript bereits kennt.

Der prototypal inheritance-Modell für Fisch und Forelle und die Eigenschaften zur Verfügung, auf die in diesem Kontext für jeden von Ihnen. Ausgehend von der Spitze, der prototypal inheritance-chain-hier geht Objekt → Fisch → Forellen.

Ich als super(Lebensraum, Länge) in Forellen-Konstruktor (Verweis auf die Fisch-Klasse), so dass alle drei Eigenschaften sofort verfügbar sind, auf die in diesem Kontext für Forellen. Es gibt tatsächlich einen weiteren Weg, um das gleiche Verhalten von Forellen Konstruktor. Ich muss super() aufzurufen, um zu vermeiden, ein Verweis Fehler, aber ich nicht nennen es “richtig” mit Parametern, die mit Fisch-Konstruktor erwartet. Das ist, weil ich nicht mit super() zum zuweisen von Werten zu den Feldern, die Fische erstellt — ich muss nur sicherstellen, dass diese Felder existieren auf Forellen ist diesem Zusammenhang. Dies ist ein wichtiger Unterschied zwischen JavaScript und einem echten class-Vererbung-Modell wie bei Java, wo der folgende code könnte illegal sein, je nachdem, wie ich Sie implementiert die Fisch-Klasse:

Klasse Forelle extends Fisch {
Konstruktor(Lebensraum, Länge, Art) {
super()
diese.habitat = Lebensraum
diese.Länge = Länge
diese.Vielzahl = Vielfalt
}
}

Diese Alternative Forellen-Konstruktor macht es schwieriger zu sagen, welche Eigenschaften gehören zu Fischen und die gehören Forellen, aber es erhält das gleiche Ergebnis wie das Vorherige Beispiel. Der einzige Unterschied ist, dass hier dem Aufruf von super() ohne Parameter, erzeugt die Eigenschaften, Lebensraum und-Länge auf den aktuellen diesem Zusammenhang, ohne ihm alles zu Ihnen. Wenn ich rief an der Konsole.log(das) nach Zeile drei, es würde Druck {Lebensraum: undefined, Länge: undefined}. Die Linien vier und fünf belegen.

Ich kann auch mit super (), die außerhalb des Forellen-Konstruktor, um die Referenz der Methoden der übergeordneten Klasse. Hier habe ich definiert, renderProperties Methode, die alle die Klasse die Eigenschaften, die in den HTML-element übergeben werden. super() ist hier nützlich, weil ich möchte, dass meine Forellen-Klasse zu implementieren, die eine ähnliche Methode macht das gleiche plus ein wenig mehr — es tritt der name einer Klasse, um das element vor der Aktualisierung die HTML. Ich kann die Wiederverwendung der Logik von der Fisch-Klasse durch den Aufruf super.renderProperties() in der jeweiligen Klasse Funktion.

class Fisch {
renderProperties(element) {
element.innerHTML = JSON.stringify(diese)
}
}

Klasse Forelle extends Fisch {
renderPropertiesWithSuper(element) {
element.className=”green”
super.renderProperties(element);
}

Der name, den Sie wählen, ist wichtig. Ich habe namens meiner Methode in der Forelle-Klasse renderPropertiesWithSuper (), weil ich immer noch wollen, haben die Möglichkeit, Berufung Forellen.renderProperties (), da es definiert, auf die Fisch-Klasse. Wenn würde ich nur mit der Bezeichnung der Funktion in der Forelle-Klasse renderProperties, das wäre durchaus gültig; allerdings würde ich nicht mehr in der Lage sein, um den Zugriff auf Funktionen direkt durch eine Instanz von Forellen – Aufruf Forellen.renderProperties nennen würde, die definierte Funktion auf Forellen. Dies ist nicht unbedingt eine sinnvolle Umsetzung – es ist eine wohl besser Muster für eine Funktion, die nennt super, wie diese zu überschreiben seiner übergeordneten Funktion Namen – aber es funktioniert veranschaulichen, wie flexibel JavaScript ermöglicht, Ihre Klassen zu sein.

Es ist völlig möglich, zu implementieren, in diesem Beispiel ohne die Verwendung von super() oder verlängert keywords, die waren so hilfreich in den vorherigen code-Beispiel, es ist einfach viel weniger bequem. Das ist es, was Mozilla als “syntaktischen Zucker”. In der Tat, wenn ich steckte meinen bisherigen code in ein transpiler wie Babel, um sicherzustellen, dass meine Klassen arbeiteten mit älteren Versionen von JavaScript, die es erzeugen würde, etwas näher an dem folgenden code. Der code ist hier meist die gleichen, aber Sie werden feststellen, dass ohne extends und super(), muss ich definieren, Fische und Forellen Funktionen und den Zugriff auf Ihre Prototypen direkt. Ich habe auch zu tun, einige zusätzliche Installationen auf den Linien 15, 16 und 17 zu etablieren, die Forelle als ein Kind von Fisch und sicherzustellen, dass die Forellen übergeben werden kann, die richtige diesem Zusammenhang in seinem Konstruktor. Wenn Sie interessiert sind, einen tiefen Einblick in das, was hier vorgeht, Eric Green hat einen hervorragenden Beitrag mit vielen code-Beispielen auf, wie das erstellen von Klassen mit und ohne ES2015.

Siehe Stift
wvvdxdd von Bailey Jones (@bailey_jones)
auf CodePen.

Klassen in JavaScript sind eine leistungsstarke Möglichkeit, um die share-Funktion. Klasse Komponenten Reagieren, zum Beispiel, die sich auf Sie verlassen. Jedoch, wenn Sie ‘ re verwendet, um Objekt-Orientierten Programmierung in einer anderen Sprache, die verwendet eine Klasse die Vererbung Modell, JavaScript das Verhalten kann gelegentlich überraschend sein. Lernen Sie die Grundlagen der prototypal inheritance, kann helfen, zu klären, wie die Arbeit mit Klassen in JavaScript.