Prototypen und Vererbung in JavaScript

Die Vererbung ist ein Konzept aus objektorientierter Programmierung, obwohl JavaScript die Vererbung zwischen Eltern und Kindern vollständig unterstützt, ist die Arbeit weit entfernt von der traditionellen objektorientierten Programmierung Objekt (Objekt mit einem Kapital Ö) Deshalb ist es auch als Master -Objekt bekannt. Interpretieren Sie dieses Master -Objekt nicht mit dem Datentypobjekt.

JavaScript wird oft falsch interpretiert als Öbielorientierte Sprache, aber in Wirklichkeit ist das nicht wahr; JavaScript ist eine prototypbasierte Sprache. Vererbung in JavaScript wird durch etwas genannt Prototypaler Vererbung. Um dies zu verstehen, müssen wir zunächst mit dem Arbeitsbereich eines Konstruktors in JavaScript vertraut sein, wie ein Objekt gegen einen Konstruktor erstellt wird und was Prototypenkettung ist.

Dies ist eines der erweiterten Themen von JavaScript, und wir werden Sie sehr langsam nehmen und versuchen, alle Informationen zusammen mit Snippets zu erklären. Lassen Sie uns loslegen.

Wie funktioniert ein Konstruktor in JavaScript?

Konventionell, Konstruktoren sind besondere Funktionen, die jedes Mal ausgeführt werden, wenn ein Objekt gegen eine Klasse erstellt wird; In JavaScript, Jeder Funktionsausdruck ist ein Konstrukteur. Wenn Sie nun aus einer trivialen Programmiersprache stammen und einen Hintergrund mit objektorientierter Programmierung haben, werden Sie verwirrt. Versuchen Sie daher, JavaScript-Konzepte nicht mit trivialem objektorientiertem Programmieren zu vergleichen.

Obwohl mit der Ankunft der ES 6 -Version von JavaScript das Schlüsselwort “Klasse”Wurde in JavaScript hinzugefügt, aber das wird nicht verwendet, um das Vererbungskonzept zu implementieren. In JavaScript können Sie Objekte erstellen, die auf die Funktion zugeordnet sind, Ja - Funktionen.

Stellen Sie sich eine Funktion vor, die mit dem folgenden Code erstellt wurde:

var person = function ()

Wie oben erwähnt, dass jeder Funktionsausdruck ein Konstruktor ist, kann dies durch die Verwendung der folgenden Zeilen innerhalb der Funktion bewertet werden:

var person = function (name)
Das.Name = Name;
Das.Alter = 20

Wie Sie sehen, erstellen wir nun eine Funktion und im Körper der Funktion definieren und initialisieren wir die Eigenschaften des Objekts, genau wie bei jedem normalen konventionellen Konstruktor. Lassen Sie uns nun einige darauf zugeordnete Objekte erstellen Person Konstruktorfunktion mit den folgenden Codezeilen:

var p1 = neue Person ("John");
var p2 = neue Person ("Albert");

Jetzt erstellen wir Objekte, aber wir haben keine Methode in Objekten, die uns den Namen der Person zurückgeben, die wir gerade erstellt haben. Erstellen Sie diese Funktion also im Konstruktor des Konstruktors Person Objekt.

var person = function (name)
Das.Name = Name;
Das.Alter = 20;
Das.getName = function ()
Rückkehr (dies.Name)

Jetzt müssen wir diese Funktion von jedem einzelnen Objekt mit den folgenden Codezeilen aufrufen:

Konsole.log (p1.GetName ());
Konsole.log (p2.GetName ());

Nachdem wir diesen ganzen Snippet ausgeführt haben, erhalten wir die folgende Ausgabe auf der Konsole:

Stellen Sie sich jetzt vor, Sie haben das Hauptproblem bei der Verwendung dieser Art von Vorlage. Stellen Sie sich vor, Sie haben 100 Objekte von Person, Diese 100 Objekte haben ihre eigen 100 verschiedene GetName() Funktionen:

Dies liegt daran, dass diese Objekte die Instanzen der sind Person, So wird es im Gedächtnis überflüssig. Hier die Prototyp -Eigenschaft kommt ins Spiel.

Die Prototyp -Eigenschaft

Jede Funktion und jedes Objekt hat eine Eigenschaft mit dem Namen Prototyp, Dieser Prototyp enthält Methoden und Eigenschaften einer Funktion, und diese Prototyp -Eigenschaft wird unter allen Instanz/Objekten geteilt, die der Funktion zugeordnet sind, und sehen Sie sich diesen Snippet an:

Wenn wir einige Objekte basierend auf dieser Funktion erstellen “X", Sie würden die Methoden und Eigenschaften im Inneren der" erben "Prototyp”Der Funktion. In unserem Beispiel wäre die Hauptfunktion die Person und die Objekte sind P1, p2, wie:

Verwenden der Prototyp -Eigenschaft, um eine prototypische Vererbung zu erstellen

Unser Hauptproblem mit dem trivialen Ansatz war, dass jedes einzelne Objekt sein eigenes hatte GetName() Funktionen, je mehr die Objekte die Anzahl der Anzahl sind, desto mehr ist die Anzahl von GetName() Funktionen im Speicher. Um dies zu entfernen, schreiben wir die GetName () -Funktion Außerhalb der Konstruktor -Expression und innerhalb der Prototyp -Eigenschaft unter Verwendung der Syntax:

Objektname.Prototyp.methodName

Unser Code ändert sich in:

var person = function (name)
Das.Name = Name;
Das.Alter = 20;

Person.Prototyp.getName = function ()
Geben Sie dies zurück.Name;

var p1 = neue Person ("John");
var p2 = neue Person ("Albert");
Konsole.log (p1.GetName ());
Konsole.log (p2.GetName ());

Die Ausgabe ist genau das gleiche wie beim letzten Mal:

Aber der Unterschied ist diesmal, dass anstatt jedes Objekt, das sein eigenes hat GetName() Funktion, jedes Objekt zugreift auf die GetName() Funktionen in seinem übergeordneten und verwendeten diese Funktion, um die ihm angegebene Anweisung auszuführen. Das nennt man "Prototypaler Vererbung”In JavaScript. Schließlich nicht in der Erinnerung überflüssig machen.

Master -Objekt

Alles in JavaScript ist im Wesentlichen ein Objekt. Dies bedeutet, dass alles in JavaScript auf Objekt (mit einer Hauptstadt O).

Um dies zu erklären, verwenden Sie die folgenden Codezeilen und öffnen Sie die Konsole des Browsers.

var Demo = function ()

Konsole.Dir (Demo);

Sie erstellen eine Funktion mit einem leeren Konstruktor und dem Konsole.Dir() Zeigt die Details von an Demo() Funktionsdefinition auf der Konsole sehen Sie Folgendes:

Erweitern Sie die kleine Pfeilspitze und untersuchen Sie die __Proto__ Eigenschaft dieser Funktion, die __Proto__ Die Eigenschaft sagt uns, welches Objekt diese Funktion zugeordnet war. Sie werden Folgendes sehen:

Lassen Sie uns nun eine Instanz dieser Demo -Funktion erstellen und ihre untersuchen __Proto__ wie:

var Demo = function ()

sei x = new Demo ();
Konsole.Dir (x);

Nachdem Sie diesen Code ausgeführt haben, sollten Sie die folgende Ausgabe auf der Konsole sehen:

Erweitern Sie dies und untersuchen Sie den Konstruktor, auf dem die Instanz „X“ zugeordnet wurde, die Sie sehen werden:

Bedeutet dieses Objekt X hat die Elterndemo und wir wissen bereits, dass die Funktion Demowird auf das JavaScript -Objekt zugeordnet. Dies schafft eine Prototyping -Kette als:

Das Objekt "X”Kann auf die Methoden und Eigenschaften des Master -Objekts zugreifen und so eine Vererbungskette erzeugen.

Wenn wir uns zum letzten Mal in unserer Konsole schauen, können wir untersuchen, dass das Master -Objekt diese eine Methode in seiner Prototyp -Eigenschaft hat, die ist tostring () als:

Und wir nennen diese Eigenschaft auf dem Objekt “XUnd auf der Funktion Demo das Sie erstellt als:

Konsole.log (x.tostring ());
Konsole.Protokoll (Demo.tostring ());

Sie erhalten die Ausgabe als:

Sie können sehen, dass sowohl das Objekt als auch die Funktion auf diese Methode zugreifen konnten, obwohl es nicht in ihnen definiert war.

So funktioniert die Vererbung durch Prototypen im JavaScript.

Abschluss

Die Vererbung in JavaScript unterscheidet sich stark von unserer konventionellen Definition der Vererbung in objektorientierter Programmierung. In JavaScript erreichen wir die Vererbung mithilfe einer Eigenschaft namens Prototyp. Sie haben gelernt, wie ein Konstruktor in JavaScript funktioniert, was ist das Prototyp Eigenschaft, wie alles innerhalb von JavaScript ein Objekt ist, indem er etwas lernt Master -Objekt. Darüber hinaus haben Sie etwas über prototypische Vererbung und Prototypenkettung gelernt und konnten auf die Methoden und Eigenschaften des Zugriffs zugreifen Master -Objekt Verwendung der Objekt das Sie erstellt haben.