Detaillierte Analyse von vier Möglichkeiten zum Erstellen von Objekten in JavaScript

Vorwort

Es gibt viele Möglichkeiten, Objekte mit JavaScript zu erstellen. Listen wir nun vier von ihnen auf und listen wir die Vor- und Nachteile jeder Methode auf, sodass Sie sie auswählen und verwenden können. Schauen wir uns an.

Fabrikmodell

 Funktion CreatePerson (Name, Alter) {var obj = new Object (); obj.name = name; obj.age = Alter; Rückkehr obj; // sicher zurückkehren, ansonsten undefiniert: undefiniert} var person1 = new CreatePerson ('Young', 18); console.log (Person1.Name + ':' + Person1.age);

Vorteile: Das Werksmuster kann das Problem des Erstellens mehrerer ähnlicher Objekte lösen

Nachteile: Das Problem der Objekterkennung wurde nicht gelöst (wie Sie den Typ eines Objekts bestimmen)

Konstruktormodus

 Funktionsperson (Name, Alter) {this.name = name; this.age = Alter; } var person1 = neue Person ('jung', 18); console.log (Person1.Name + ':' + Person1.age);

Bevor wir über ihre Vor- und Nachteile sprechen, sprechen wir zuerst über ihre eigene Geschichte.

Verwenden Sie Konstruktoren als Funktionen

 Funktionsperson (Name, Alter) {this.name = name; this.age = Alter; this.sayname = function () {return this.name; }} // Verwenden Sie var person1 = new Person ('Young', 18); Person1.SayName (); console.log (Person1.Name + ':' + Person1.age); // Person rufen ('Wind', 18); console.log (window.sayname ()); // var obj = new Object () aufrufen; Person.Call (obj, 'Bird', 100); console.log (obj.sayname ());

Vor- und Nachteile von Konstruktoren

Vorteile: Die Instanz kann als spezifischer Typ identifiziert werden

Nachteile: Jede Methode muss in jeder Instanz nachgebildet werden. Natürlich können Sie es so ändern:

 Funktionsperson (Name, Alter) {this.name = name; this.age = Alter; this.sayname = sayName; } function SaysName () {return this.name; }

Rufen Sie stattdessen globale Funktionen an, sodass es keine Verkapselung gibt. . . Der folgende Prototypenmodus kann dieses Mangel wieder gutmachen

Prototypmodus

 Funktion person () {} Person.Prototype.name = 'Young'; Person.Prototype.age = 18; Person.Prototype.sayname = function () {return this.name; } var person1 = new Person (); console.log (person1.sayname ()); var person2 = new Person (); console.log (person1.sayname ()); alert (person1.sayname === Person2.SayName); // Person1 und Person2 Zugriff auf die gleiche Funktion derselben Attribute sayname ()

Obwohl auf den im Prototyp gespeicherten Wert über die Objektinstanz zugegriffen werden kann, kann der im Prototyp gespeicherte Wert nicht über das Instanzobjekt umgeschrieben werden

 Funktion person () {} Person.Prototype.name = 'Young'; Person.Prototype.age = 18; Person.Prototype.sayname = function () {return this.name; } var person1 = new Person (); var person2 = new Person (); Person1.Name = 'Wind'; console.log (person1.sayname ()); // wind console.log (person2.sayname ()); // Young Alert (Person1.SayName == Person2.SayName); // true

Wenn wir person1.sayName anrufen, werden wir zwei Suchanfragen nacheinander durchführen. Der Parser bestimmt zunächst, ob die Instanzperson1 das Attribut sayName hat. Wenn ja, werden wir unsere eigenen Attribute anrufen. Wenn es nein gibt, werden wir nach den Attributen im Prototyp suchen.

 Funktion person () {} Person.Prototype.name = 'Young'; Person.Prototype.age = 18; Person.Prototype.sayname = function () {return this.name; } var person1 = new Person (); var person2 = new Person (); Person1.Name = 'Wind'; console.log (person1.sayname ()); // wind console.log (Person2.SayName ()); // Young Löschen Person1.Name; console.log (person1.sayname ()); // Young Console.log (Person2.SayName ()); // Young

Verwenden Sie die Methode hasOwnPropertyType , um festzustellen, ob eine Eigenschaft im Prototyp oder in der Instanz vorliegt. Die Methode wird aus dem Objekt geerbt, in der Instanz und falsch im Prototyp.

Verwenden Sie Object.keys() um Instanzeigenschaften auf Objekten aufzählen zu können

 Funktion person () {} Person.Prototype.name = 'Young'; Person.Prototype.age = 18; Person.Prototype.sayname = function () {return this.name; } var keys = Object.keys (Person.Prototype); Console.log (Schlüssel); // ["Name", "Alter", "SayName"]

Vor- und Nachteile des Prototypmodus

Vorteile: Keine Notwendigkeit, jede Methode für jede Instanz wieder zu wiederholen

Nachteile: Nur sehr wenige Menschen verwenden den Prototypenmodus allein. . Liste der Fragen im Detail auflisten

 Funktion person () {} Person.Prototype = {Konstruktor: Person, Name: 'Young', Alter: 18, Freunde: ['Big', 'Pig'], SayName: function () {return this.name; }}; var p1 = new Person (); var p2 = new Person (); p1.friends.push ('mon'); console.log (p1.friends); // ["big", "pig", "mon"] console.log (p2.friends); // ["Big", "Pig", "Mon"]

Gerade weil Instanzen im Allgemeinen ihre eigenen Attribute haben und wir sie Person.prototype platzieren. Dann können wir eine Kombination aus dem Konstruktormodus und dem Prototypenmodus verwenden.

Verwenden Sie den Konstruktormodus und den Prototypenmodus in Kombination

 Funktionsperson (Name, Alter) {this.name = name; this.age = Alter; this.friends = ['Big', 'Pig']; } Person.Prototype = {sayName: function () {return this.name; }}; var p1 = neue Person ('jung', 18); var p2 = neue Person ('Wind', 78); p1.friends.push ('raganya'); console.log (p1.friends); // ["big", "pig", "raganya"] console.log (p2.friends); // ["big", "pig"] console

Dieses Muster ist derzeit die am häufigsten verwendete und am meisten anerkannte Methode zum Erstellen benutzerdefinierter Typen. ist ein Standardmodus, der zum Definieren von Referenztypen verwendet wird.

Zusammenfassen

Bei der obigen Stelle geht es darum, die Art und Weise zu analysieren, wie Objekte in JavaScript erstellt werden. Die vier Methoden und ihre Vor- und Nachteile wurden in diesem Artikel zusammengefasst. Ich hoffe, dass es für alle hilfreich sein kann, JavaScript zu verwenden.