Heim > Artikel > Web-Frontend > Mehrere gängige Methoden zum Erstellen von Objekten in js objektorientiert (Fabrikmodus, Konstruktormodus, Prototypmodus)_Javascript-Kenntnisse
Im letzten Artikel habe ich Ihnen die Javascript-Objektorientierung vorgestellt. In diesem Artikel erfahren Sie mehr über die Javascript-Objektorientierung. Es gibt verschiedene Methoden zur einfachen Objekterstellung. Diese übermäßig flexiblen Orte sind in der Tat manchmal verwirrend, daher werden wir heute verschiedene Methoden untersuchen, die häufig zum Erstellen von Objekten in JS verwendet werden.
Vorwort
Obwohl die Verwendung des Objektkonstruktors oder der Verwendung von Objektliteralen zum Erstellen eines Objekts sehr praktisch sein kann, hat diese Methode einen offensichtlichen Nachteil: Die Verwendung einer Schnittstelle zum Erstellen mehrerer Objekte führt zu einer Menge redundantem Code. Um dieses Problem zu lösen, begannen die Menschen daher, die folgenden Methoden für gemeinsame Objekte zu verwenden.
Werksmodus
Dieses Muster abstrahiert den spezifischen Prozess der Objekterstellung und verwendet Funktionen, um die Details von Objekten mit bestimmten Schnittstellen zu erstellen
function cPerson(name,sex,age){ var o = new Object(); o.name = name; o.sex = sex; o.age = age; o.show = function(){ console.log(this.name,this.age,this.sex); } return o; } var p1 = cPerson('谦龙','男','100'); p1.show(); var p2 = cPerson('雏田','女','14'); p2.show();
Werksmodustest
Probleme mit der Factory-Methode: Durch die Verwendung des Factory-Modus kann ein Objekt erstellt werden, das alle Informationen enthält, und diese Funktion kann unzählige Male aufgerufen werden. Obwohl es das Problem der Erstellung mehrerer ähnlicher Objekte löst, löst es nicht das Problem der Objekterkennung (d. h. wie man den Typ eines Objekts erkennt)
Konstruktormuster
function CPerson(name,sex,age) {//注意这里 构造函数首字母大写 this.name = name; this.sex = sex; this.age = age; this.show = function () { console.log(this.name, this.age, this.sex); } } var p1 = new CPerson('谦龙','男','100'); p1.show(); var p2 = new CPerson('雏田','女','14'); p2.show();
Konstruktormustertest
Beachten Sie, dass sich der Konstruktor wie folgt geringfügig vom Fabrikmuster unterscheidet
Der erste Buchstabe des Konstruktors wird groß geschrieben
Kein Objekt explizit erstellt
Weisen Sie diesem Objekt Eigenschaften und Methoden zu
Keine Rückgabeerklärung
Und der Aufruf des Konstruktors auf diese Weise wird ungefähr mehrere Schritte durchlaufen
Erstellen Sie ein neues Objekt
Weisen Sie den Bereich des Konstruktors diesem Objekt zu (damit dies auf dieses Objekt zeigt)
Führen Sie den Code im Konstruktor aus (d. h. den Prozess des Hinzufügens von Eigenschaften und Methoden zu einem neuen Objekt)
Objekt zurückgeben
Hinweis: Der Konstruktor unterscheidet sich eigentlich nicht wesentlich von einer gewöhnlichen Funktion. Der einzige Unterschied liegt in der aufrufenden Methode. Im Folgenden werden verschiedene Aufrufmethoden demonstriert
// 调用方式1 new 方式 var p1 = new CPerson('谦龙','男','100'); p1.show();//谦龙 100 男 // 调用方式2 普通函数调用 CPerson('谦龙','男','100'); window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上 // 调用方式3 在另一个对象的作用域中调用 var obj = new Object(); CPerson.call(obj,'谦龙','男','100'); obj.show(); //谦龙 100 男 在obj的作用域
Probleme mit Konstruktoren: Das Hauptproblem bei der Verwendung von Konstruktoren besteht darin, dass jede Methode in jeder Instanz neu erstellt werden muss. Sowohl p1 als auch p2 verfügen über Show-Methoden, es handelt sich jedoch nicht um Instanzen derselben Funktion, da die Funktion in Es ist auch eine Objekt in js. Daher sind ihre Shared-Show-Methoden nicht gleich.
Prototyp-Modus
Jede Funktion verfügt über ein Prototypattribut, bei dem es sich um einen Zeiger handelt, der auf ein Objekt zeigt. Der Zweck dieses Objekts besteht darin, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Das heißt, das Prototypobjekt des Objekts, das durch Aufrufen des Konstruktors
erstellt wurdeDer Vorteil besteht darin, dass alle Instanzen eines Objekts seine Eigenschaftsmethoden gemeinsam nutzen können. Das heißt, es ist nicht erforderlich, die Instanzinformationen im Konstruktor zu definieren
function CPerson(){ } CPerson.prototype.name='谦龙'; CPerson.prototype.sex='男'; CPerson.prototype.age=100; CPerson.prototype.show=function(){ console.log(this.name, this.age, this.sex); } var p1 = new CPerson(); p1.show(); //谦龙 100 男 var p2 = new CPerson(); p2.show();//谦龙 100 男 console.log(p1.show == p2.show)//true
Der obige Inhalt befasst sich mit mehreren gängigen Methoden zum objektorientierten Erstellen von Objekten in js (Fabrikmodus, Konstruktormodus, Prototypmodus). Ich hoffe, er gefällt Ihnen.