Beispiele für sieben Möglichkeiten zum Erstellen von Objekten mit JavaScript

In diesem Artikel werden hauptsächlich die sieben Möglichkeiten zum Erstellen von Objekten im JavaScript-Factory-Modus, im Konstruktormodus usw. vorgestellt. Für spezifische Betriebsschritte können Sie sich die folgenden detaillierten Erläuterungen ansehen Interessierte Freunde, Sie können darauf verweisen.

Es gibt viele Möglichkeiten, Objekte in JavaScript zu erstellen. Sie können ein einzelnes Objekt auch über den Objektkonstruktor oder das Objektliteral erstellen. Offensichtlich generieren diese beiden Methoden viel wiederholten Code und sind nicht für die Massenproduktion geeignet . Als nächstes stellen wir sieben sehr klassische Methoden zum Erstellen von Objekten vor. Sie haben auch ihre eigenen Vor- und Nachteile

Fabrikmuster

function createPerson(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = createPerson(‘Jiang', ‘student')
var person2 = createPerson(‘X', ‘Doctor')

Diese Factory-Funktion kann unzählige Male aufgerufen werden und gibt jedes Mal ein Objekt zurück, das zwei Eigenschaften und eine Methode enthält

Obwohl das Factory-Muster das Problem der Erstellung mehrerer ähnlicher Objekte löst, Es löst das Objekterkennungsproblem nicht, das heißt, der Typ eines Objekts kann nicht bekannt sein

Konstruktormuster

function Person(name, job) {
 this.name = name
 this.job = job
 this.sayName = function() {
  console.log(this.name)
 }
}
var person1 = new Person(‘Jiang', ‘student')
var person2 = new Person(‘X', ‘Doctor')

Erstellen Sie ein Objekt ohne Anzeige. Nach der Verwendung von „New“ werden die folgenden Vorgänge automatisch ausgeführt:

Erstellen Sie ein neues Objekt.
Dieses neue Objekt wird angezeigt ausgeführter [[Prototyp]]-Link
Dieses neue Objekt wird im Funktionsaufruf daran gebunden
Dieses Objekt zurückgeben
Mit dieser Methode können Objekte erstellt werden, um den Objekttyp zu erkennen

Person1-Instanz von Objekt // wahr
Person1 Instanz von Person // wahr
Bei Verwendung von Konstruktoren zum Erstellen von Objekten wird jede Methode einmal für jede Instanz neu erstellt

Prototypmuster

function Person() {
}
Person.prototype.name = ‘Jiang'
Person.prototype.job = ‘student'
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()

Fügen Sie Informationen direkt zum Prototypobjekt hinzu. Der Vorteil der Verwendung eines Prototyps besteht darin, dass alle Instanzobjekte die darin enthaltenen Eigenschaften und Methoden gemeinsam nutzen können, ohne dass Objektinstanzinformationen im Konstruktor definiert werden müssen.

Prototyp ist ein sehr wichtiges Konzept, das ausführlich in einem Artikel zum Verständnis der Beziehung und des Unterschieds zwischen Prototyp und Prototyp erklärt wird

Einfachere Schreibweise

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}
var person1 = new Person()

Setzen Sie Person.prototype gleich einem Objekt, das in Form eines Objektliterals erstellt wurde. Dies führt jedoch dazu, dass .constructor nicht mehr auf Person zeigt.

Mit dieser Methode wird das Standardobjekt Person.prototype vollständig neu geschrieben, sodass der .constructor hier nicht vorhanden ist

Person.prototype.constructor === Person // false

Wenn dieses Attribut benötigt wird, Sie kann manuell hinzugefügt werden

function Person() {
}
Person.prototype = {
 constructor：Person
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}

Diese Methode ist jedoch nicht gut genug. Wenn Sie es direkt festlegen, ist es nicht aufzählbar . Angehoben. Wenn Sie also die Möglichkeit haben, die Object.defineProperty-Methode

Object.defineProperty(Person.prototype, ‘constructor', {
 enumerable: false,
 value: Person
})

Nachteile

Prototypen zu verwenden, Alle Attribute werden gemeinsam genutzt, was ein großer Vorteil ist, aber auch einige Nachteile mit sich bringt

Alle Attributinstanzen im Prototyp werden von vielen Instanzen gemeinsam genutzt, und diese Art der Freigabe eignet sich sehr gut für Funktionen. Für Eigenschaften, die Grundwerte enthalten, ist dies kaum möglich. Schließlich können Instanzeigenschaften Prototypeigenschaften maskieren. Es treten jedoch Probleme auf, wenn Referenztypwerte

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 friends: [‘Shelby', ‘Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true

Freunde im Prototyp vorhanden sind, die Instanzen person1 und person2 auf denselben Prototyp verweisen und person1 das referenzierte Array ändert. Es wird sich auch in der Instanz person2 widerspiegeln

Verwenden Sie das Konstruktormuster und das Prototypmuster in Kombination

Dies ist das am weitesten verbreitete und anerkannteste 1. Eine Möglichkeit, einen benutzerdefinierten Typ zu erstellen. Es kann die Mängel der oben genannten Muster beheben.

Durch die Verwendung dieses Musters kann jede Instanz über eine eigene Kopie von Instanzattributen verfügen, aber gleichzeitig einen Verweis auf die Methode teilen.

In diesem Fall Selbst wenn ein Instanzattribut den Wert eines Referenztyps ändert, hat dies keinen Einfluss auf die Attributwerte anderer Instanzen

function Person(name) {
 this.name = name
 this.friends = [‘Shelby', ‘Court']
}
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false

Dynamischer Prototypmodus

Der dynamische Prototypmodus kapselt alle Informationen im Konstruktor. Während der Initialisierung bestimmt er, ob der Prototyp initialisiert werden muss, indem er erkennt, ob eine Methode, die vorhanden sein sollte, gültig ist

function Person(name, job) {
 // 属性
 this.name = name
 this.job = job

 // 方法
 if(typeof this.sayName !== ‘function') {
  Person.prototype.sayName = function() {
    console.log(this.name)
  }
 }

}
var person1 = new Person(‘Jiang', ‘Student')
person1.sayName()

Die sayName-Methode wird dem Prototyp nur hinzugefügt, wenn sie nicht vorhanden ist. Dieser Code wird nur beim ersten Aufruf des Konstruktors ausgeführt.

Der Prototyp wurde initialisiert und es sind keine Änderungen erforderlich.

Die hier am Prototyp vorgenommenen Änderungen können sofort in allen Fällen widergespiegelt werden.

Zweitens kann die Anweisung überprüft werden Eigenschaften oder Methoden, die nach der Initialisierung vorhanden sein sollten, sodass nicht viele if-Anweisungen verwendet werden müssen, um jede Eigenschaft und Methode zu überprüfen. Überprüfen Sie einfach ein

Parasite-Konstruktormuster

Die Grundidee dieses Musters besteht darin, eine Funktion zu erstellen, die nur den Code kapselt, der das Objekt erstellt, und dann das neu erstellte Objekt zurückgibt

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = new Person(‘Jiang', ‘student')
person1.sayName()

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值

稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。

稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(name)
 }
 return o
}
var person1 = Person(‘Jiang', ‘student')
person1.sayName()

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义

Das obige ist der detaillierte Inhalt vonBeispiele für sieben Möglichkeiten zum Erstellen von Objekten mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!