Schema Zusammenfassung des Erstellens von Objekten in JavaScript

Schema Zusammenfassung des Erstellens von Objekten in JavaScript

** JavaScript erstellt Objektmuster:

Objekt wörtlich

Fabrikmodell

Konstruktormodus

Prototypmodus

Kombinieren Sie das Konstruktor- und Prototypmuster

Prototypendynamischer Modus

**

Die meisten objektorientierten Sprachen haben das Konzept einer Klasse, durch das mehrere Objekte mit denselben Methoden und Attributen erstellt werden können. Obwohl JavaScript technisch eine objektorientierte Sprache ist, hat JavaScript nicht das Konzept der Klassen, alles ist ein Objekt. Jedes Objekt ist eine Instanz eines bestimmten Referenztyps und wird durch vorhandene Referenztypen erstellt. Der Referenztyp kann nativ oder angepasst werden.

1. Objekt wörtlich

 var person = {name: 'nicholas'; Alter: '22'; Job: "Software Engineer" Sayname: function () {Alter (this.name); }}

Im Beispiel wird ein Objekt namens Person erstellt und drei Attribute (Name, Alter, Job) und eine Methode (SayName ()) hinzugefügt. Die Methode SayName () wird verwendet, um den Wert dieses.namens (als Person aufgelöst) anzuzeigen.

Objektliterale können verwendet werden, um ein einzelnes Objekt zu erstellen. Diese Methode hat jedoch einen offensichtlichen Nachteil: Erstellen vieler Objekte mit derselben Schnittstelle erzeugt eine Menge doppelter Code.

2. Fabrikmodell

Das Werksmuster ist ein bekanntes Designmuster im Bereich der Software-Engineering. Das Werksmuster ist abstrahiert. Der Prozess des Erstellens bestimmter Objekte und Funktionen verwendet die Details des Erstellens von Objekten mit bestimmten Schnittstellen.

 Funktion CreatePerson (Name, Alter, Job) {var o = neues Objekt {}; O.Name = Name; O.age = Alter; O.Job = Job; o.sayname = function () {alert (this.name); }; return o;} var person1 = CreatePerson ("Nicholas", 22, "Software -Ingenieur"); var person2 = CreatePerson ("Greg", 24, "Student");

Die Funktion CreatePerson {} kann ein Personenobjekt erstellen, das alle erforderlichen Informationen basierend auf den akzeptierten Parametern enthält. Diese Funktion kann als unzählige Male bezeichnet werden, und jedes Mal wird ein Objekt mit drei Eigenschaften und einer Methode zurückgegeben.

Obwohl das Fabrikmodell das Problem des Erstellens mehrerer ähnlicher Objekte löst, löst es nicht das Problem der Objekterkennung (d. H. Wie man den Typ eines Objekts kennt).

3. Konstruktormodus

 Funktionsperson (Name, Alter, Job) {this.name = name; this.age = Alter; this.job = Job; this.sayname = function () {alert (this.name); }} // Erstellen Sie eine Instanz der Person über den neuen Operator var person1 = new Person ("Nicholas", 22, "Software -Ingenieur"); var person2 = new Person ("Greg", 24, "Student"); Person1.SayName (); //Nicholasperson2.sayname (); // Greg

Der Unterschied zum Fabrikmodell ist

Objekt erstellen nicht angezeigt

Weisen Sie diesem Objekt Attribute und Methoden direkt zu

Keine Rückgabeerklärung

Um eine neue Instanz der Person zu erstellen, müssen Sie den neuen Bediener verwenden. 4 Schritte, um den Konstruktor aufzurufen:

Erstellen Sie ein neues Objekt

Weisen Sie einem neuen Objekt den Umfang des Konstruktors zu (dies zeigt diesem neuen Objekt).

Führen Sie den Code im Konstruktor aus

Geben Sie ein neues Objekt zurück

Alle in diesem Beispiel erstellten Objekte sind sowohl Instanzen von Objekt- als auch Personinstanzen. Es kann vom Instanz des Operators verifiziert werden.

 ALERT (Person1 -Instanz des Objekts); // true

Das Konstruktormuster hat auch seine eigenen Probleme. Tatsächlich wird die SayName -Methode in jedem Fall einmal nachgebaut. Es ist zu beachten, dass die durch Instanziierung erzeugten Methoden nicht gleich sind. Der folgende Code kann das beweisen

 alert (person1.sayname == Person2.SayName); // false

Dieses Problem kann gelöst werden, indem die Methode als globale Funktion außerhalb des Konstruktors verschoben wird.

 Funktionsperson (Name, Alter, Job) {this.name = name; this.age = Alter; this.job = Job; } function SaysName () {alert (this.name); }

Globale Funktionen, die in der globalen Welt erstellt wurden, können tatsächlich durch Instanzen von Person aufgenommen werden, was etwas unrealistisch ist. Wenn das Objekt eine sehr korrekte Methode definieren muss, müssen viele globale Funktionen definiert werden, wodurch die Kapselung fehlt.

4. Prototypmodus

Jede in JavaScript erstellte Funktion verfügt über eine Prototyp -Eigenschaft, die ein Zeiger auf ein Objekt ist, das Eigenschaften und Methoden enthält, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können (lassen Sie alle Objektinstanzen ihre Eigenschaften und Methoden teilen)

 Funktion person () {} Person.Prototype.name = "Nicholas"; Person.Prototype.age = 22; Person.Prototype.job = "Software Engineer"; Person.Prototype.SayName () {alert (this.name); }; var person1 = new Person (); Person1.SayName (); //Nicholasalert(person1.sayname == Person2.SayName); // true

Der obige Code macht folgende Dinge:

Definieren Sie eine Konstruktor -Person. Die Personfunktion erhält automatisch eine Prototyp -Eigenschaft. Diese Eigenschaft enthält nur eine Konstruktor -Eigenschaft, die standardmäßig auf die Person zeigt.

Fügen Sie drei Eigenschaften und eine Methode über Person.Prototype hinzu

Erstellen Sie eine Instanz der Person und rufen Sie dann die Methode sayname () auf der Instanz an

Verwenden Sie den Personalkonstruktor und die Person. Prototype, um eine Instanz als Beispiel zu erstellen, um die Beziehung zwischen Objekten zu zeigen

Verwenden Sie den Personalkonstruktor und die Person. Prototype, um eine Instanz als Beispiel zu erstellen, um die Beziehung zwischen Objekten zu zeigen

Die Abbildung zeigt die Beziehung zwischen dem Personkonstruktor, den Prototypeigenschaften der Person und zwei Fällen der Person. Person.Prototyp zeigt auf das Prototyp -Objekt, Person.Prototype.Constructor verweist auf die Person. Das Prototyp -Objekt enthält nicht nur das Konstruktorattribut, sondern enthält auch andere Eigenschaften und Methoden, die später hinzugefügt wurden. Die beiden Instanzen beider Personen Person1 und Person2 enthalten eine interne Eigenschaft, die nur auf Person.Prototyp hinweist.

Der Anrufprozess der Methode SayName ():

Auf der Suche nach der LogName () -Methode in der Person1 -Instanz stellte ich fest, dass es keine solche Methode gab, also habe ich auf den Prototyp von Person1 zurückgeführt

Suchen Sie nach der Methode von Sayame () auf dem Prototyp von Person11. Es gibt diese Methode, also wird die Methode aufgerufen

Basierend auf einem solchen Suchprozess können wir verhindern, dass die Instanz auf das gleichnamige Attribut im Prototyp zugreift, indem wir das gleichnamige Attribut im Prototyp der Instanz definieren. Es ist zu beachten, dass dies nicht das gleichnamige Attribut des Prototyps löscht, sondern nur die Instanz verhindert.

 Funktion person () {} Person.Prototype.name = "Nicholas"; Person.Prototype.age = 22; Person.Prototype.job = "Software Engineer"; Person.Prototype.SayName () {alert (this.name); }; var person1 = new Person (); var person2 = new Person (); Person1.Name = "Greg" Alert (Person1.Name) // Greg stammt aus der Instanzalarm (Person2.Name) // Nicholas stammt aus dem Prototyp

Verwenden Sie den Löschbetreiber, um Instanzeigenschaften vollständig zu löschen

 Person löschen1.Name; alert (Person1.Name) // Nicholas aus dem Prototyp

Verwenden Sie die Methode von HasownProperty (), um festzustellen, ob eine Eigenschaft in einem Fall oder in einem Prototyp vorliegt

 Funktion person () {} Person.Prototype.name = "Nicholas"; Person.Prototype.age = 22; Person.Prototype.job = "Software Engineer"; Person.Prototype.SayName () {alert (this.name); }; var person1 = new Person (); var person2 = new Person (); Alert (Person1, HasownProperty ("Name"); // False Person1.Name = "Greg" Alert (Person1.Name) // Greg aus der Instanz -Alert (Person1, HasownProperty ("Name"); // Truealert (Person2.Name) // Nicholas aus dem Prototypen -Allert (person2, person2, asownproperty ("name). Person1.Name; Alert (Person1.Name) // Nicholas aus der Prototypen -Warnung (Person1, HasownProperty ("Name"); // Falsch

Die folgende Abbildung zeigt die Beziehung zwischen Instanzen und Prototypen in verschiedenen Situationen

Einfache Prototypsyntax

 Funktion person () {} Person.Prototype = {Name: "Nicholas", Alter: 22, Job: "Software -Ingenieur", sayname: function () {alert (this.name); }};

Im obigen Code verweist das Konstruktorattribut nicht mehr auf die Person, und der Typ des Objekts kann nicht über den Konstruktor bestimmt werden. Sie können es auf den entsprechenden Wert wie unten einstellen

 Funktion person () {} Person.Prototype = {Konstruktor: Person, Name: "Nicholas", Alter: 22, Job: "Software -Ingenieur", SayName: function () {alert (this.name); }};

Durch das Zurücksetzen der Konstruktor -Eigenschaft wird die [[[aufzählbare]] Eigenschaft auf true festgelegt. Standardmäßig ist die Native Constructor -Eigenschaft nicht aufgezählt. Sie können die Methode von DefineProperty () verwenden, um es zu ändern.

 Object.DefineProperty (Person.Prototyp, "Konstruktor", {Enumerable: False, Wert: Person});

Der Prozess des Auffindens von Werten in einem Prototyp ist eine Suche, und alle Änderungen des Prototyp -Objekts können sofort von der Instanz reflektiert werden.

 var Freund = new Person (); Person.Prototype.sayhi = function () {alert ("hi);} Freund, Sayhi (); //" hi "(kein Problem)

Die Personinstanz wird erstellt, bevor eine neue Methode hinzugefügt wird, hat jedoch aufgrund der losen Verbindung zwischen der Instanz und dem Prototyp zu Zugriff auf die neu hinzugefügte Methode

Die Situation nach dem Umschreiben des Prototypobjekts

 Funktion person () {} var Freund = new Person (); Person.Prototype = {Name: "Nicholas", Alter: 22, Job: "Software -Ingenieur", sayname: function () {alert (this.name); }}; Friend.SayName (); // Fehler

Der Grund für den Fehler beim Aufrufen von Friend.SayName () ist, dass der von Friend angezeigte Prototyp keine nach diesem Feld benannten Attribute enthält, wie in der folgenden Abbildung gezeigt.

Prototypobjektproblem

Das Prototyp -Objekt lässt den Prozess der Übergabe der Initialisierungsparameter für den Konstruktor weg, und alle Kräfte erhalten standardmäßig denselben Attributwert. Das größte Problem mit Prototypmodellen ist, dass sie ihre gemeinsame Natur haben. Wenn das Prototypmodell Attribute des Referenztyps enthält, ist das Problem schwerwiegender. Schauen wir uns das folgende Beispiel an.

 Funktion person () {} Person.Prototype = {Konstruktor: Person, Name: "Nicholas", Alter: 22, Job: "Software -Ingenieur", Freunde: ["Shelby", "Court"], SayName: Function () {alert (this.name); }}; var person1 = new Person (); var person2 = new Person (); Person1.friend.push ("van"); Alert (Person1.Friends); // "Shelby, Court, Van" Alert (Person2.friends); // "Shelby, Court, Van" Alert (Person1.friends == Person2.friends); // wahr

5. Kombinieren Sie den Konstruktormodus und den Prototypenmodus

In Kombination des Konstruktormodus und des Prototypmodus werden Konstruktoren verwendet, um Instanzeigenschaften zu definieren, und Prototypmodelle werden verwendet, um Methoden und gemeinsame Eigenschaften zu definieren. Auf diese Weise verfügt jede Instanz über eine eigene Kopie der Instanzattribute und kann auch Verweise auf Methoden teilen, wodurch der Speicher in maximalem Umfang gespeichert wird.

 Funktionsperson (Name, Alter, Job) {this.name = name; this.age = Alter; this.job = Job; this.friends = ["Shelby", "Court"];} Person.Prototype = {Konstruktor: Person, SayName: function () {alert (this.name); }} var person1 = new Person ("Nicholas", 22, "Software -Ingenieur"); var person2 = new Person ("Greg", 24, "Student"); Person1.friend.push ("van"); Alert (Person1.friends); // "Shelby, Court, Van" Alert (Person2.friends); // "Shelby, Court" Alert (Person1.friends == Person2.friends); // false alarm (person1.sayname == person2.sayname); // true

6. Dynamischer Prototypmodus

Der dynamische Prototypenmodus enthält alle in den Konstruktor erforderlichen Informationen und verwendet die IF -Anweisung, um festzustellen, ob eine bestimmte Eigenschaft im Prototyp vorliegt. Wenn es nicht vorhanden ist (wenn der Konstruktor zum ersten Mal aufgerufen wird), führen Sie den Prototyp -Initialisierungscode in der IF -Anweisung aus.

 Funktionsperson (Name, Alter) {this.name = name; this.age = Alter; this.job = Job; // Methode if (typeof this.sayname! }; }} var friend = new Person ('Nicholas', '22', 'Software Engineer'); // Der Konstruktor wurde zum ersten Mal aufgerufen, und der Prototyp wurde zu diesem Zeitpunkt geändert.

Empfohlenes Lesen:

Mehrere gängige Möglichkeiten, Objekte in JS-Objektorientierungen zu erstellen (Factory-Modus, Konstruktormodus, Prototypmodus)

Das obige ist das Muster des Erstellens von Objekten in JavaScript, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird für alle hilfreich sein!