Wie erstelle ich mehrere Objekte in JavaScript? Detaillierte Erläuterung von vier Methoden

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!

1. Mehrere Objekte erstellen – Literalmethode

Die Literalmethode eines Objekts ist eine der gebräuchlichsten Methoden zum Erstellen von Objekten. Die Eigenschaften von Objekten, die mit der Literalmethode erstellt werden, sind standardmäßig beschreibbar, aufzählbar und konfigurierbar.

Der folgende Code zeigt, wie man mehrere Objekte mit Literalmethoden erstellt:

//Mehrere Objekte mit Literalmethoden erstellen var person1 = {
    Name: 'Marmelade',
    Alter: 18,
    Adresse: „Shanghai City“,
    Essen: Funktion () {
        console.log(this.name + 'Eating')
    }
}
var person2 = {
    Name: 'Tom',
    Alter: 20,
    Adresse: „Peking City“,
    Essen: Funktion () {
        console.log(this.name + 'Eating')
    }
}
var person3 = {
    Name: 'Kalk',
    Alter: 19,
    Adresse: „Stadt Tianjin“,
    Essen: Funktion () {
        console.log(this.name + 'Eating')
    }
}

经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。

2. Mehrere Objekte erstellen – Factory-Pattern-Methode

Das Factory-Muster ist eigentlich ein gängiges Entwurfsmuster;
Normalerweise verfügen wir über eine Factory-Methode, mit der wir die gewünschten Objekte generieren können.

Der folgende Code zeigt die Funktionsweise der Factory-Modus-Methode zum Erstellen mehrerer Objekte:

//Erstellen Sie mehrere Objekte mit der Factory-Funktion function createPerson (Name, Alter, Adresse ) {
    var p = {}
    p.name = Name
    p.age = Alter
    p.address = Adresse
    p.eating = function () {
        console.log(name + 'Essen')
    }
    zurück p
}

var p1 = createPerson('jam', 19, 'Shanghai City')
var p2 = createPerson('tom', 14, 'Beijing')
var p3 = createPerson('li', 13, 'Tianjin City')

p3.eating() // Wenn li isst,

可以看出使用工厂模式方法创建了三个对象使用的代码明显比字面量少了好多行，but这就是最好的方式了吗？NO! NO! NO!
工厂模式方法的**弊端**就在于：以上述示例代码为例。当我们打印p1,p2,p3后，获取不到对象最真实的类型，比如p1是人还是动物还是工具

3. Erstellen Sie mehrere Objekte – Konstruktormethode

Konstruktor Ich glaube, jeder kennt sie Es. Die sogenannte Konstruktorfunktion ist eine Funktion, die eine Vorlage zum Generieren eines Objekts bereitstellt und die Grundstruktur des Objekts beschreibt. Ein Konstruktor kann mehrere Objekte mit jeweils derselben Struktur generieren.

Der folgende Code zeigt die Verwendung der Konstruktormethode zum Erstellen mehrerer Objekte:

// Konventionelle Spezifikation, der erste Buchstabe des Konstruktornamens wird großgeschrieben. Funktion Person (Name, Alter, Adresse) {
    this.name = Name
    this.age = Alter
    this.address = Adresse
    this.eating = function () {
        console.log(this.name + 'Eating')
    }
    this.running = function () {
        console.log(this.name + 'running')
    }
}

var p1 = neue Person('jam', 20, 'Beijing')
var p2 = neue Person('tom', 14, 'Shanghai City')
var p3 = neue Person('li', 13, 'Tianjin City')

console.log(p1)
// Ergebnisse ausgeben // Person {
// Name: 'Marmelade',       
// Alter: 20,
// Adresse: 'Peking', 
// Essen: [Funktion],
// läuft: [Funktion]
// }
p1.eating() // Jam

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。
构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。
缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

4. Erstellen Sie mehrere Objekte. – Der Kombinationsmodus aus Prototyp und Konstruktormethode

besteht darin, Instanzattribute im Konstruktor zu definieren. Anschließend müssen beim Erstellen des Objekts nur diese Parameter übergeben werden. Das Prototypobjekt wird zum Definieren von Methoden und gemeinsamen Eigenschaften verwendet.

Der folgende Code zeigt, wie Sie mithilfe von Prototypen und Konstruktoren mehrere Objekte erstellen:

function Person (name, age, address) {
    this.name = Name
    this.age = Alter
    this.address = Adresse
    this.eating =
        this.running = function () {
            console.log(this.name + 'running')
        }
}
// Fügen Sie dem Prototyp die Essmethode und die Ausführungsmethode hinzu, damit Sie nicht jedes Mal, wenn Sie ein Objekt erstellen, dieselbe Methode zum Speicher hinzufügen müssen Person.prototype.eating = function () {
    console.log(this.name + 'Eating')
}
Person.prototype.running = function () {
    console.log(this.name + 'running')
}
var p1 = neue Person('jam', 20, 'Beijing')
var p2 = neue Person('tom', 14, 'Shanghai City')
var p3 = neue Person('li', 13, 'Tianjin City')

console.log(p1)
//Ausgabeergebnis:
// Person {
// Name: 'Marmelade',       
// Alter: 20,
// Adresse: 'Peking', 
// Essen: [Funktion],
// läuft: [Funktion]
// }
p1.eating() //

最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。

Haben Sie nach der Lektüre das Gefühl, dass das Erstellen mehrerer Objekte nicht so kompliziert ist? Mit der Prototyp- und Konstruktormethode können Sie sie in wenigen Minuten erstellen.