Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in JS

迷茫
Freigeben: 2017-03-26 17:49:20
Original
1142 Leute haben es durchsucht

Ich habe kürzlich das Buch JS Advanced Programming gelesen und habe etwas Zeit, verschiedene Möglichkeiten zum Erstellen von Objekten herauszufinden. Kommen wir ohne weitere Umschweife direkt zur Sache.

Erster Typ: Erstellung des Objektkonstruktors

 Person =  Object();
Nach dem Login kopieren

Diese Codezeile erstellt eine neue Instanz des Objektreferenztyps und speichert die Instanz dann in der Variablen Person.

Zweitens: Verwenden Sie die Objektliteral-Notation

 Person ='Nike'29
Nach dem Login kopieren

Objektliteral ist eine Kurzform der Objektdefinition, die darauf abzielt, den Prozess der Erstellung von Objekten mit einer großen Anzahl von Eigenschaften zu vereinfachen. Mit anderen Worten, die erste und die zweite Methode zum Erstellen von Objekten sind tatsächlich gleich, aber der Unterschied in der Schreibweise ist unterschiedlich.

Bevor wir die dritte Erstellungsmethode einführen, sollten wir verstehen, warum andere Methoden zum Erstellen von Objekten verwendet werden , die Nachteile der ersten und zweiten Methode: Sie verwenden beide dieselbe Schnittstelle, um viele Objekte zu erstellen, wodurch viel doppelter Code generiert wird. Das heißt, wenn Sie 100 Objekte haben, dann Sie Sie müssen den gleichen Code 100 Mal eingeben . Welche Methode müssen wir also verwenden, um zu viel Codeduplizierung zu vermeiden? Das heißt, den Prozess der Objekterstellung im Funktionskörper zu kapseln und Objekte direkt durch Funktionsaufrufe zu generieren.

Dritte Methode: Verwenden Sie den Factory-Modus zum Erstellen von Objekten

function createPerson(name,age,job){    
   var o  = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
         alert(this.name);    
    };    return o;      
}var person1 = createPerson('Nike',29,'teacher');var person2 = createPerson('Arvin',20,'student');
Nach dem Login kopieren

Wenn Sie den Factory-Modus zum Erstellen von Objekten verwenden, können wir alle feststellen, dass in der Funktion „createPerson“ ein Objekt zurückgegeben wird. Dann können wir nicht bestimmen, um welchen Typ es sich bei dem zurückgegebenen Objekt handelt. Es gibt also einen vierten Modus zum Erstellen von Objekten.

Viertens: Objekte mit Konstruktoren erstellen

.name =.age =.job =.sayName =  person1 =  Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
Nach dem Login kopieren

Beim Vergleich des Fabrikmusters können wir die folgenden Unterschiede feststellen:

 1. Objekte ohne Anzeige erstellen

 2. Weisen Sie diesem Objekt direkt Attribute und Methoden zu

 3. Keine Rückgabeanweisung

 4. Der Typ des Objekts kann endlich erkannt werden. Zum Erkennen von Objekttypen sollten wir den Operator „instanceof“ verwenden, um eine unabhängige Erkennung durchzuführen:

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
Nach dem Login kopieren

Gleichzeitig sollten wir auch verstehen, dass der Konvention zufolge der Konstruktor immer mit einem Großbuchstaben beginnen sollte Nicht-Konstruktor-Funktionen sollten mit einem Kleinbuchstaben beginnen.

Dann ist der Konstruktor wirklich einfach zu verwenden, aber er hat auch seine Mängel:

Das heißt, jede Methode muss für jede Instanz neu erstellt werden. Die Methode bezieht sich auf die Funktionen, die wir haben im Objekt definieren. Wenn die Anzahl der Methoden groß ist, wird viel unnötiger Speicher belegt. Es gibt also einen fünften Weg, Objekte zu erstellen

Der fünfte Weg: Prototyperstellungsobjektmodus

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};var person1 = new Person();
person1.sayName();
Nach dem Login kopieren

Durch die Verwendung von Prototypen zum Erstellen von Objekten können alle Objekte erstellt werden, die eine Instanz gemeinsam nutzt die darin enthaltenen Eigenschaften und Methoden.

Wenn Sie einen Prototyp verwenden, um den Objektmodus zu erstellen, sehen Sie sich bitte den folgenden Code an:

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name);  //'Greg'  --来自实例
alert(person2.name);  //'Nike'   --来自原型
Nach dem Login kopieren

Wenn Sie einer Objektinstanz eine Eigenschaft hinzufügen, schützt diese Eigenschaft die Prototypobjekteigenschaften mit demselben Namen, gespeichert in .

Zu diesem Zeitpunkt können wir die Kombination aus Konstruktormuster und Prototypmuster verwenden. Das Konstruktormuster wird zum Definieren von Instanzattributen verwendet, während das Prototypmuster zum Definieren von Methoden und gemeinsamen Attributen verwendet wird

Achten Typ: Verwenden Sie eine Kombination aus Konstruktormuster und Prototypmuster.

function Person(name,age,job){    
    this.name =name;    
    this.age = age;    
    this.job = job;
}

Person.prototype = {
    constructor:Person,
    sayName: function(){
        alert(this.name);
    };
}var person1 = new Person('Nike',20,'teacher');
Nach dem Login kopieren

Die oben aufgeführten acht Möglichkeiten zum Erstellen von Objekten weisen Sie bitte darauf hin.

Das obige ist der detaillierte Inhalt vonEine Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!