Was ist ein Prototyp in JavaScript?

JavaScript ist eine dynamische und prototypbasierte Sprache, daher sind Prototypen eines der wichtigsten Konzepte von JavaScript. Lassen Sie uns zuerst diskutieren, warum wir Prototypen brauchen.

Warum brauchen wir Prototypen??

Wie bereits erwähnt, ist JavaScript eine dynamische Sprache, was bedeutet, dass wir einem Objekt jederzeit Eigenschaften hinzufügen können. Lassen Sie uns ein Beispiel geben, um dies zu erklären:

Funktion Player ()
Das.Name = 'Hazard';
Das.Club = 'Chelsea';

var player1 = neuer Player ();
Spieler1.Alter = 30;
Alarm (Spieler1.Alter);
var Player2 = neuer Player ();
Alarm (Player2.Alter);

In diesem Beispiel haben wir dem Objektspieler eine andere Eigenschaft gegeben. Das erste Objekt I-E Player1 hat jedoch eine Alterseigenschaft, aber nicht das zweite Objekt I-E Player2. Der Grund dafür ist, dass die Alterseigenschaft nur für das Spieler1 -Objekt definiert ist.

Wir können sehen, dass das Player2 -Objekt in der folgenden Ausgabe des obigen Beispiels undefiniert zeigt:

Nachdem wir wissen, welches Problem wir uns haben, stellt sich die Frage: Was ist die Lösung? Die Lösung für dieses Problem ist „Prototyp“.

Lösung

Prototypen sind ein integriertes Merkmal von JavaScript. Jedes Mal, wenn Sie eine JavaScript -Funktion erstellen, fügt JavaScript dieser Funktion automatisch einen Prototyp hinzu. Wir können sagen, dass ein Prototyp ein Objekt ist, mit dem Sie einem vorhandenen Objekt neue Eigenschaften hinzufügen können. Kurz gesagt, Prototypen enthalten eine Basisklasse aller Objekte, die uns helfen, die Vererbung zu erreichen.

Wir können dem Prototyp -Objekt zusätzliche Eigenschaften anbringen, die dann über alle Instanzen übertragen werden.

Jetzt werden wir im obigen Beispiel die Prototyp-Eigenschaft verwenden, um das Problem der Teilen von Alterseigenschaften an alle Objekte I-E Player1 und Player2 zu lösen.

Funktion Player ()
Das.Name = 'Hazard';
Das.Club = 'Chelsea';

Spieler.Prototyp.Alter = 30;
var player1 = neuer Player ();
Alarm (Spieler1.Alter);
var Player2 = neuer Player ();
Alarm (Player2.Alter);

Wir werden sehen, dass die Altersgruppen beider Spieler jetzt 30 sein werden. Die Ausgabe ist unten dargestellt:

Einfach ausgedrückt, die Prototyp -Eigenschaft von JavaScript hilft uns beim Hinzufügen neuer Eigenschaften zu Objektkonstruktoren, wie im obigen Beispiel gezeigt.

Prototyp -Eigenschaft eines Objekts

Jedes Objekt, das mit der wörtlichen Syntax initiiert oder unter Verwendung des neuen Schlüsselworts mit der Konstruktorsyntax initiiert wird, enthält __Proto__ -Eigenschaft. Dies zeigt auf das Prototypobjekt, das dieses Objekt erstellt hat.

Wenn Sie die Prototyp -Eigenschaft eines Objekts sehen möchten, können wir es im Debugging Developer -Tool sehen. Im folgenden Beispiel werden wir es implementieren und sehen es im Konsolenfenster anzeigen.

Beispiel

Funktion Player ()
Das.Name = 'Hazard';
Das.Club = 'Chelsea';

var PlayerObject = new Player ();
// Konsolenfenster
Konsole.Protokoll (Spieler.Prototyp);
Konsole.Protokoll (PlayerObject.Prototyp);
Konsole.Protokoll (PlayerObject.__Proto__);
Konsole.log (typeof Player);
Konsole.Protokoll();

In diesem Beispiel können wir sehen, dass die Eigenschaft für Funktionsprototypen mit dem Funktionsnamen zugegriffen wird, der Player ist.Prototyp.

In diesem Beispiel können wir auch sehen, dass die Prototyp -Eigenschaft nicht dem Objekt ausgesetzt ist. Wir können nur mit dem „__Proto__“ darauf zugreifen.

Prototyp des Objekts

Im vorherigen Beispiel haben wir gesehen, dass die Objektprototyp -Eigenschaft undefiniert ist, was bedeutet, dass sie unsichtbar ist. Wir können das Objekt verwenden.GetPrototypeof (OBJ) -Methode anstelle der von uns verwendeten I-e "__Proto__". Dadurch wird es nicht undefiniert sein und wir werden in der Lage sein, auf das Prototypobjekt zugreifen zu können.

Funktion Player ()
Das.Name = 'Hazard';
Das.Club = 'Chelsea';

var PlayerObject = new Player ();
Spieler.Prototyp.selected = function ()
alarm ("für das heutige Team ausgewählt");

var player1 = neuer Player ();
var CheckingProto = Objekt.GetPrototypeof (Player1);
// Dies gibt das Prototyp -Objekt des Players1 -Prototyps zurück
Alarm (CheckingProto.Konstrukteur);
// Dadurch wird die ausgewählte Funktion1 -Funktion zurückgegeben

Abschluss

In diesem Artikel haben wir hauptsächlich das grundlegende Konzept von Prototypen in JavaScript erörtert. Wir gruben etwas tiefer und diskutierten, was ein Prototyp in JavaScript ist. Wir haben auch ein Problem besprochen und die Lösung mit dem Prototyp gegeben. Abgesehen davon diskutierten wir mit Prototypen, die Objekteigenschaften und -methoden in JavaScript zu finden, in JavaScript. All dies wurde mit Hilfe von Beispielen gezeigt, um ein besseres Verständnis des Konzepts zu entwickeln.