Prototypanalyse in JavaScript [Empfohlen]

Kürzlich, als ich JavaScript lernte und den Prototyp von JS-objektorientiertem JS-Objekt lernte, habe ich viele Erkenntnisse. Wenn etwas nicht stimmt, hoffe ich, dass es korrigiert werden kann.

Als objektorientierte Sprache hat JS natürlich das Konzept der Vererbung, aber es gibt kein Konzept von Klassen in JS, daher gibt es keine ähnlichen Erweiterungen wie in Java. Daher denke ich, dass die Vererbung in JS hauptsächlich von Prototypen (Ketten) in JS abhängt.

Was ist der Prototyp? Wir wissen, dass Funktionen in JS ebenfalls ein Objekt sind. Wenn wir eine Funktion erstellen, verfügt die Funktion tatsächlich über eine Eigenschaft, die als Prototyp bezeichnet wird. Diese Gattungstyp wird als Prototyp -Eigenschaft bezeichnet. Es ist ein Zeiger, der auf das Prototypobjekt dieser Funktion hinweist. Dieses Prototyp -Objekt verfügt über eine Standardeigenschaft, die als Konstruktor bezeichnet wird. Diese Gattungstyp zeigt auf eine Funktion mit einem Prototyptyp.

 Funktion person () {} Person.Prototype = {// Konstruktor: Person; First_Name: "Guo", HAAR_COLOR: "Black", Stadt: "Zhengzhou", act: function () {alert ("essen");}};

Als Beispiel haben wir zuerst eine Funktionsperson erstellt. Diese Funktion hat einen Standard -Attributprototyp, der auf das Objekt der Person.ProptType zeigt. Dieses Objekt hat einen Standardattributkonstruktor (), person.Prototype.Constructor ---> Person. (Tatsächlich besteht der Standard hier, auf Objekt zu verweisen, und die Korrektur wird später vorgenommen)

Was passiert, wenn wir eine Instanz durch einen Konstruktor erstellen?

 Funktion person () {} person.Prototype = {first_name: "Guo", hair_color: "schwarz", Stadt: "Zhengzhou", act: function () {alert ("essen");}}; var boy = new Person (); var girl = new Person ();

Zu diesem Zeitpunkt müssen wir wissen, dass der Unterschied zwischen einem Konstruktor und einer Funktion in JS das neue Schlüsselwort ist und eine Funktion, die den neuen Bediener verwendet, ein Konstruktor ist. Wenn wir das Instanzobjekt einer Person erstellen und es im Jungen, Mädchen, speichern, generieren diese beiden Instanzobjekte ein Standardattribut namens _proto_ (das durch [[Prototyp]] in ECMAScript5 dargestellt werden kann). Diese Gattung Typ zeigt auf das Prototypobjekt des Konstruktors, dh Boy._Proto _--> Person.Prototype (hat nichts mit dem Konstruktor zu tun). Zu diesem Zeitpunkt können Junge oder Mädchen Punkte verwenden, um den Gattungstyp im Prototypobjekt aufzurufen. Zu diesem Zeitpunkt sollten Sie wissen, dass Junge und Mädchen den Gattungsart des Prototypobjekts teilen. Wir können die obige Schlussfolgerung durch iSprotPtypeof () oder Object.getPrototypeof () überprüfen (der Rückgabewert dieser Funktion ist das Prototyp -Objekt, dh den Wert von _proto_).

 alert (person.Prototype.riprototypeof (boy)); // True Alert (Object.getPrototypeof (Junge) .First_name); // "Guo"

Zu diesem Zeitpunkt können wir weitere Überprüfungen durchführen. Was ist, wenn wir ein Attribut erstellen, das mit dem Prototyp -Objektattribut in der Instanz dupliziert wird?

 var boy = new Person (); var girl = new Person (); boy.hair_color = "rot"; Alert (boy.hair_color); // Red Alert (Girl.hair_color); // Black Alert (Object.getPrototypeof (Junge) .hair_color); //Schwarz

Es ist ersichtlich, dass das in der Instanz deklarierte doppelte Attribut die Eigenschaften im Prototyp -Objekt blockiert, aber nur überschrieben wird und den Gattyptyp des Prototyp -Objekts nicht beeinflusst. Gleichzeitig können Sie mit dem Löschbetreiber die vom Instanzobjekt deklarierten Attribute löschen, um den Maskierungseffekt rückgängig zu machen. Wir können HasownProperty () verwenden, um zu überprüfen, ob eine Gattung in einer Instanz (TRUE) oder in einem Prototypobjekt (False) existiert.

 Alert (boy.hasownProperty ("hair_color")); //WAHR

Sie können Object.Keys () verwenden, um Eigenschaften aufzuzählen.

 var key = Object.Keys (Person.Prototyp); Alarm (Schlüssel);

Nachdem wir diese gelernt haben, werden wir feststellen, dass die Verwendung der obigen Schreibmethode zur Deklaration eines Prototypungsobjekts ein Problem vorliegt. Der Konstruktor verweist nicht mehr auf eine Person, was der Standardeinstellung auf eine Funktion, die das Prototyp -Attribut enthält, widerspricht. Dies liegt daran, dass: Jedes Mal, wenn eine Funktion erstellt wird, wird automatisch ein Prototypobjekt erstellt, und dieses Objekt erstellt standardmäßig einen Konstruktor. Hier ist es also unsere Essenz, den Standardprototyp neu zu schreiben, sodass der neue Konstruktor auch zu einem Hinweis auf die Objektfunktion geworden ist und nicht mehr auf die Personfunktion hinweist. Wenn der Konstruktor wirklich wichtig ist, müssen Sie Konstruktor schreiben: Person.

Danach müssen wir die Dynamik des Prototyps kennen. Das Ändern der Eigenschaften im Prototypobjekt wird in der Instanz widerspiegelt, unabhängig davon, ob die Instanz vor oder nach den generischen Änderungen des Prototyp -Objekts erstellt wird.

 Funktion person () {} person.Prototype = {first_name: "Guo", hair_color: "schwarz", Stadt: "Zhengzhou", act: function () {alert ("Essen");}}; var boy = new Person (); Person.Prototype.Hobby = "Basketball"; var girl = new Person (); Alarm (Junge.Hobby); //Basketball

Wie im obigen Code gezeigt, teilt die Jungeninstanz auch dann, wenn die Änderung der Prototyp -Objekteigenschaften nach der Instanzerstellung auftritt.

Diese Situation tritt jedoch nur auf, wenn das Prototyp -Objektattribut geändert wird. Wenn das Prototyp -Objektattribut vollständig umschreibt, muss die Erstellung der Instanz nach dem Umschreiben des Prototyp -Objektattributs platziert werden, andernfalls tritt ein Fehler auf.

 Funktion person () {} var girl = new Person (); Person.Prototype = {First_Name: "Guo", hair_color: "schwarz", Stadt: "Zhengzhou", Act: Function () {alert ("Eatation");}}; var boy = new Person (); Person.Prototype.Hobby = "Basketball"; Alarm (Junge.Hobby); // Basketball -Alarm (Girl.First_Name); //undefiniert

Wenn wir auf das Problem der "Blockierung" zurückkehren, haben wir früher erfahren, dass das Erstellen eines Instanzobjekts (gleicher Name wie ein bestimmtes Attribut im Prototypenobjekt) das Attribut des Prototyp -Objekts blockiert, jedoch andere Instanzobjekte nicht beeinflusst. Hier gibt es einen Fehler. Diese Situation gilt nur für grundlegende Datentypen. Wenn sich der Wert des Attributs auf den Typ bezieht, tritt ein großes Problem auf. Siehe den folgenden Code.

 Funktion person () {} person.Prototype = {first_name: "Guo", hair_color: "schwarz", Freunde: ["Nick", "John"], Stadt: "Zhengzhou", act: function () {alert ("Essation");}}; var boy = new Person (); boy.friends.push ("mike"); var girl = new Person (); Alert (Boy.friends); // Nick, John, Mike Alert (Girl.friends); // Nick, John, Mike

Es ist zu erkennen, dass der obige Satz nicht zutrifft, da Freunde im Prototyp -Objekt und nicht im Jungen vorhanden sind, sodass sich seine Änderung auf diese Umgebung auswirkt. (Wir können eine Eigenschaft einer Jungeninstanz durch Boy erstellen.

 Funktionsperson (HAAR_COLOR, Stadt) {this.hair_color = hair_color; this.city = Stadt; this.friends = ["John", "Nick"]; } Person.Prototype = {Konstruktor: Person, First_Name: "Guo", Act: Function () {alert ("Eatation"); }}; var boy = new Person ("schwarz", "Zhengzhou"); var girl = neue Person ("rot", "Shenyang"); boy.friends.push ("nick"); Alarm (Mädchen.freunde); Alert (Boy.friends);

Dieser Modus ist die am häufigsten verwendete und am häufigsten anerkannte Methode zum Erstellen benutzerdefinierter Typen in ECMascript und kann sogar als Standardmodus verwendet werden.

Für Programmierer, die in anderen objektorientierten Sprachen arbeiten, scheint dieses Muster seltsam. Um alle Informationen in den Konstruktor einzudämmen, erscheint das dynamische Prototypmuster. Der dynamische Modus verwendet hauptsächlich eine IF -Anweisung, um festzustellen, ob das Prototyp -Objekt initialisiert werden muss, um den Zweck des Speicherns von Ressourcen zu erreichen.

Darüber hinaus gibt es einen sicheren Konstruktionsmodus, um sich an die Situation anzupassen, in der es kein gemeinsames Attribut gibt und dies nicht verwendet wird.

Die obige Prototypanalyse in JavaScript [empfohlen] ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.