Wie erstelle ich mehrere Objekte in JavaScript? Welches ist der beste Weg, mehrere Objekte in JavaScript zu erstellen? Wörtlich? Factory-Pattern-Ansatz? Konstruktormethode? Prototypische Methode? Prototyp plus Konstruktormethode? Sie werden es wissen, wenn Sie vorbeikommen und einen Blick darauf werfen.
Während des Entwicklungsprozesses müssen wir häufig viele ähnliche Objekte erstellen, die möglicherweise viele identische Eigenschaften oder Methoden haben. Welche Methoden stehen uns also zur Verfügung, um mehrere Objekte zu erstellen? Was ist die beste Methode? Lasst uns gemeinsam einen Blick darauf werfen!
Die Literalmethode eines Objekts ist eine der häufigsten Methoden zum Erstellen von Objekten. Die Eigenschaften von Objekten, die mit der Literalmethode erstellt werden, sind standardmäßig beschreibbar und aufzählbar.
Der folgende Code zeigt die Verwendung von Literalen zum Erstellen mehrerer Objekte:
// 字面量方式创建多个对象
var person1 = {
name: 'jam',
age: 18,
address: '上海市',
eating: function () {
console.log(this.name + '在吃饭')
}
}
var person2 = {
name: 'tom',
age: 20,
address: '北京市',
eating: function () {
console.log(this.name + '在吃饭')
}
}
var person3 = {
name: 'liming',
age: 19,
address: '天津市',
eating: function () {
console.log(this.name + '在吃饭')
}
}
Aus dem obigen Beispielcode können wir ersehen, dass zum Erstellen von 3 Objekten nur 24 Zeilen erforderlich sind Nachteile: Beim Erstellen desselben Objekts muss zu viel wiederholter Code geschrieben werden.经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。
工厂模式其实是一种常见的设计模式；
通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；
如下代码展示了使用工厂模式方法创建多个对象的操作：
// 工厂函数方式创建多个对象
function createPerson (name, age, address) {
var p = {}
p.name = name
p.age = age
p.address = address
p.eating = function () {
console.log(name + '在吃饭')
}
return p
}
var p1 = createPerson('jam', 19, '上海市')
var p2 = createPerson('tom', 14, '北京市')
var p3 = createPerson('li', 13, '天津市')
p3.eating() // li在吃饭
可以看出使用工厂模式方法创建了三个对象使用的代码明显比字面量少了好多行，but这就是最好的方式了吗？NO! NO! NO!工厂模式方法的**弊端**就在于：以上述示例代码为例。当我们打印p1,p2,p3后，获取不到对象最真实的类型，比如p1是人还是动物还是工具
构造函数相信大家并不陌生。所谓构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。
如下代码展示了使用构造函数方法创建多个对象：
// 约定俗成的规范，构造函数名字首字母大写
function Person (name, age, address) {
this.name = name
this.age = age
this.address = address
this.eating = function () {
console.log(this.name + '在吃饭')
}
this.running = function () {
console.log(this.name + '在跑步')
}
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')
console.log(p1)
// 输出结果
// Person {
// name: 'jam',
// age: 20,
// address: '北京市',
// eating: [Function],
// running: [Function]
// }
p1.eating() // jam在吃饭
构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间
二者的组合模式即在构造函数上定义实例属性，那么在创建对象上只需要传入这些参数。在原型对象用于定义方法和共享属性。
如下代码展示了使用原型加构造函数方式创建多个对象：
function Person (name, age, address) {
this.name = name
this.age = age
this.address = address
this.eating =
this.running = function () {
console.log(this.name + '在跑步')
}
}
// 将eating方法和running方法加在原型上，就不需要每次创建一个对象都去在内存中加一遍一样的方法
Person.prototype.eating = function () {
console.log(this.name + '在吃饭')
}
Person.prototype.running = function () {
console.log(this.name + '在跑步')
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')
console.log(p1)
// 输出结果：
// Person {
// name: 'jam',
// age: 20,
// address: '北京市',
// eating: [Function],
// running: [Function]
// }
p1.eating() // jam在吃饭
最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。
2. Erstellen Sie mehrere Objekte – Factory-Muster-Methode.
Factory-Muster ist eigentlich ein gängiges Designmuster Der folgende Code zeigt den Vorgang der Verwendung der Factory-Modus-Methode zum Erstellen mehrerer Objekte: rrreeeEs ist ersichtlich, dass der zum Erstellen von drei Objekten mithilfe der Factory-Modus-Methode verwendete Code offensichtlich viel kleiner ist als der Literalwert Okay , aber ist das der beste Weg? NEIN! NEIN! NEIN!Die **Nachteile** der Factory-Pattern-Methode sind: Nehmen Sie den obigen Beispielcode als Beispiel. Wenn wir p1, p2 und p3 drucken, können wir nicht den wahrsten Typ des Objekts ermitteln, z. B. ob p1 ein Mensch, ein Tier oder ein Werkzeug ist
Es gibt eine ungeschriebene Norm für Konstruktoren, das heißt, der erste Buchstabe des Konstruktornamens wird großgeschrieben oder in Kamelbuchstaben geschrieben. 🎜Die Konstruktormethode ist nicht die perfekteste Methode zum Erstellen mehrerer Objekte und weist auch Mängel auf. 🎜Nachteile: Jede Methode muss auf jeder Instanz neu erstellt werden. Beispielsweise müssen auf den Instanzen von p1, p2 und p3 dieselbe Essmethode und dieselbe Ausführungsmethode erstellt werden, was viel Speicher verschwendet . Leerzeichen🎜🎜🎜🎜4. Erstellen Sie mehrere Objekte – Prototyp plus Konstruktormethode🎜🎜🎜Der Kombinationsmodus der beiden besteht darin, Instanzattribute im Konstruktor zu definieren, dann müssen Sie diese Parameter nur beim Erstellen übergeben Objekt. Das Prototypobjekt wird zum Definieren von Methoden und gemeinsamen Eigenschaften verwendet. 🎜🎜Der folgende Code zeigt die Verwendung von Prototypen und Konstruktoren zum Erstellen mehrerer Objekte: 🎜rrreee🎜🎜Der letzte ist natürlich das Finale. Diese Prototyp- und Konstruktormethode ist derzeit die am weitesten verbreitete und anerkannteste in ECMAScript Fortgeschrittene Methode zum Erstellen von Objekten. 🎜🎜🎜Haben Sie nach dem Lesen das Gefühl, dass das Erstellen mehrerer Objekte nicht so kompliziert ist? Sie können sie mit der Methode des Prototyps und des Konstruktors in wenigen Minuten erstellen. 🎜🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrere Objekte in JavaScript? Detaillierte Erläuterung von vier Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
