Einführung in mehrere gängige Methoden zum Erstellen von Objekten in Javascript

In diesem Artikel werden mehrere häufig verwendete Muster zum Erstellen von Objekten in JavaScript vorgestellt, darunter: Fabrikmuster, Konstruktormuster, Prototypmuster, Muster zur Kombination von Konstruktoren und Prototypen und dynamische Prototypmuster.

1. Factory-Muster

Sehen Sie sich den folgenden Code an:

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

Dies ist das Factory-Muster. Definieren Sie ein Objekt in der Funktion, fügen Sie Eigenschaften und Methoden hinzu und geben Sie schließlich das Objekt zurück. Obwohl dieser Modus die bequeme Erstellung von Objekten ermöglicht, besteht das Problem, dass nicht ermittelt werden kann, wer diese Instanz erstellt hat.
Zum Beispiel kann son1 intanceof getMySon nicht true zurückgeben. Weil die Instanz hier nicht genau von getMySon über new erstellt wird, sondern von o in getMySon.
Daher ist das Fabrikmuster nicht für Situationen geeignet, in denen viele Arten von Objekten erstellt werden müssen.

Wie erstellt man also ein Objekt, damit man korrekt bestimmen kann, woher die Instanz stammt? Lassen Sie uns als nächstes über das Konstruktormuster sprechen.

2. Konstruktormuster

Sehen Sie sich den folgenden Code an:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

Dies ist das Konstruktormuster.

Führen Sie bei einem neuen Aufruf die folgenden Schritte aus:

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

Auf diese Weise generierte Instanzen können son1-Instanzen von getMySon verwenden, um festzustellen, wer die Instanz generiert hat.

Was ist also das Problem bei der Verwendung von Konstruktoren? Da jedes Mal, wenn new verwendet wird, ein neues Objekt erstellt wird, werden nicht alle Daten zwischen verschiedenen Instanzen geteilt. Aber für die Funktion sayName ist es nicht notwendig, mehrere zu erstellen. Dadurch wird Platz verschwendet.

Dies führt zum nächsten Typ, dem Prototypenmodus.

3. Prototyp-Modus

Sehen Sie sich den folgenden Code an:

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

Dies ist der Prototyp-Modus (Prototyp-bezogenes Wissen wird hier nicht im Detail besprochen).

Der Prototypmodus fügt Eigenschaften und Methoden zu getMySon.prototype hinzu. Der Prototyp wird von allen Instanzen gemeinsam genutzt. Er hat nur eine Kopie, nicht alle Instanzen haben eine Kopie.

Diese Methode ermöglicht, dass die Funktion nur eine Kopie hat, ohne zusätzlichen Platz zu belegen. Allerdings müssen Attribute wie Name und Geschlecht nicht von allen Instanzen gemeinsam genutzt werden, und es ist unpraktisch, den Prototypmodus zu verwenden, um Parameter zum Generieren dieser Attribute zu übergeben.

Dann können Sie das Konstruktormuster und das Prototypmuster zusammenführen, um ihre jeweiligen Vorteile zu nutzen. Eigenschaften, die nicht von Instanzen gemeinsam genutzt werden müssen und durch Übergabe von Parametern generiert werden müssen, werden im Konstruktormodus generiert, und Eigenschaften, die von allen Instanzen gemeinsam genutzt werden müssen (z. B. Methoden), werden im Prototypmodus generiert.

3. Das Muster zum Kombinieren von Konstruktoren und Prototypen
Sehen Sie sich den folgenden Code an:

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

Dies ist das Muster zum Kombinieren von Konstruktoren und Prototypen. Dieser Ansatz kombiniert die Vorteile des Konstruktormusters und des Prototypmusters. Dies ist das am häufigsten verwendete Muster zum Erstellen von Objekten.

4. Dynamisches Prototypmuster

Das sogenannte dynamische Prototypmuster ist eigentlich eine Kapselung des Musters der Kombination von Konstruktoren und Prototypen.
Sehen Sie sich den folgenden Code an:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

Der Grund, warum er als dynamischer Prototypmodus bezeichnet wird, liegt darin, dass sich getMySon bei verschiedenen Aufrufen ändert und dynamisch ist. Die Definition der Funktion sayName wird nur beim ersten Aufruf von getMySon ausgeführt.
Im Wesentlichen werden die Methoden, die nicht gemeinsam genutzt werden müssen, immer noch über den Konstruktor definiert, und die Methoden, die gemeinsam genutzt werden müssen, werden über den Prototyp definiert. Setzen Sie sie einfach zusammen und verkapseln Sie sie.

Das obige ist der detaillierte Inhalt vonEinführung in mehrere gängige Methoden zum Erstellen von Objekten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!