Heim > Web-Frontend > js-Tutorial > Hauptteil

3 Möglichkeiten, Objekte in Javascript zu erstellen

高洛峰
Freigeben: 2016-12-08 10:45:49
Original
1036 Leute haben es durchsucht

Dieser Artikel teilt Ihnen verschiedene Methoden zum Erstellen von Objekten in js und die Vor- und Nachteile jeder Methode mit. Der spezifische Inhalt ist wie folgt

Der erste Weg zum Erstellen von Objekten:

Erstellen JSON-Objekte
Empfohlene Einsatzmöglichkeiten: Als Parameter einer Funktion wird es nur einmal temporär verwendet. Zum Beispiel das Festlegen des Funktionsprototypobjekts.

var object = {
 name: "Eric",
 age: 24,
 sayHi: function(){
  console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
 }
};
Nach dem Login kopieren

Die zweite Möglichkeit, ein Objekt zu erstellen:

Ein Objektobjekt erstellen

var object = new Object();
object.name = "Eric";
object.age = 24;
object.sayHi = function(){....};
Nach dem Login kopieren

Nachteile der beiden oben genannten Methoden zum Erstellen von Objekten: Sie können nicht als Vorlagen für die Objekterstellung verwendet werden, d. h. neue Objekte können nicht mit neuen erstellt werden.

Der dritte Weg, Objekte zu erstellen:

function Person() {
 this.name = "Eric";
 this.age = 24;
 this.sayHi = function(){
  console.log(this.name);
 }
}
 
var object1 = new Person();
var object2 = new Person();
Nach dem Login kopieren

Dieser Weg, Objekte zu erstellen, behebt die Mängel der ersten beiden Wege Als Vorlage für die Objekterstellung kann sie zur Erstellung mehrerer Objekte wiederverwendet werden.

Die Rolle des neuen Operators:

Führen Sie den Konstruktor (die Funktion nach new) aus und erstellen Sie ein leeres Objekt innerhalb des Konstruktors.
Konstruieren Sie das im vorherigen Teil erstellte leere Objekt. Verknüpfen Sie das Prototypobjekt der Funktion
und dann auf das aktuelle leere Objekt verweisen
Nachdem der Konstruktor ausgeführt wurde und keine Rückgabe erfolgt, geben Sie das leere Objekt an das Objekt zurück

Prinzip von neu Operator

Die dritte Methode hat einen Nachteil: Die internen Funktionen des Objekts werden in jedem Objekt gespeichert. Wenn viele Objekte erstellt werden, ist dies eine enorme Speicherverschwendung. Das Verhalten der Funktion besteht darin, dass sie von allen Objekten gemeinsam genutzt werden kann und nicht erforderlich ist, dass jedes Objekt eine Kopie speichert. Daher können Sie die Funktion in den Prototyp einfügen und deklarieren. Dann haben alle Objekte öffentliche Funktionen und es bleibt nur eine Kopie im Speicher. Alle Attribute werden in das Objekt geschrieben

Der dritte Weg Beta1:

function Person() {
 this.name = 'Eric';
 this.age = 24;
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person();
var object2 = new Person();
Nach dem Login kopieren

Weiter zum Upgrade Beta2:

function Person(name,age) {
 this.name = name || "";
 this.age = age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person(name1,age1);
var object2 = new Person(name2,age2);
Nach dem Login kopieren

Problem: 1. Wenn der Aufrufer die Reihenfolge der Parameterübergabe ändert, ist dies nutzlos.
Problem: 2. Die Erhöhung oder Verringerung der Parameter führt dazu Die zu ändernde Funktionsdeklaration kann sich ebenfalls ändern.

Lösung: Fahren Sie mit dem Upgrade von Beta3 fort:

function Person(option) { //用一个对象把所有参数覆盖
 this.name = option.name || "";
 this.age = option.age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person({
  name: "Eric",
  age: 24
 });
var object2 = new Person({
  name: "XXX",
  age: xx
 });
Nach dem Login kopieren

Fahren Sie mit der Optimierung fort und fügen Sie den Initialisierungscode in die Init-Funktion ein

Beta4 weiter aktualisieren:

function Person(option) {
 this._init(option);
}
Person.prototype = {
 _init: function (option){
  this.name = option.name;
  this.age = option.age;
 },
 sayHi: function(){
  console.log("HI");
 }
};
 
var object1 = new Person({
  name: "Eric";
  age: 24
 });
object1.sayHi();
Nach dem Login kopieren


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