Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung, wie JavaScript den Factory-Modus, den Konstruktormodus und den Prototyp-Modus verwendet, um Objektinstanzen zu erstellen

Ausführliche Erläuterung, wie JavaScript den Factory-Modus, den Konstruktormodus und den Prototyp-Modus verwendet, um Objektinstanzen zu erstellen

伊谢尔伦
Freigeben: 2017-07-26 10:38:36
Original
1566 Leute haben es durchsucht

Obwohl es sehr praktisch ist, ein Objekt mit dem Objektkonstruktor oder mit Objektliteralen zu erstellen, 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.

Fabrikmuster

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();
Nach dem Login kopieren

Factory-Modus-Test

Probleme mit der Factory-Methode: Durch die Verwendung des Factory-Modus kann ein Objekt erstellt werden, das alle Informationen enthält, die als unzählige bezeichnet werden können mal Funktion. 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();
Nach dem Login kopieren

Konstruktormustertest

Beachten Sie, dass sich der Konstruktor wie folgt geringfügig vom Fabrikmuster unterscheidet

Konstruktor zuerst Großbuchstaben

hat das Objekt nicht explizit erstellt

hat diesem Objekt die Eigenschaften und Methoden zugewiesen

hatte keine Return-Anweisung

und auf diese Weise Der Aufruf des Konstruktors durchläuft grob mehrere Schritte

Erstellen Sie ein neues Objekt

Weisen Sie den Bereich des Konstruktors diesem Objekt zu (damit dies auf dieses Objekt zeigt)

Führen Sie das aus Code im Konstruktor (d. h. der 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 Nur Der Unterschied liegt in der aufrufenden Methode. Im Folgenden werden verschiedene Aufrufmethoden veranschaulicht.


 // 调用方式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的作用域
Nach dem Login kopieren

Probleme mit Konstruktoren: Das Hauptproblem bei der Verwendung von Konstruktoren besteht darin, dass jede Methode nach der Erstellung auf jeder Instanz erneut ausgeführt werden muss Sowohl p1 als auch p2 verfügen über Show-Methoden, sind jedoch keine Instanzen derselben Funktion, da die Funktion auch ein Objekt in js ist. Daher sind ihre Shared-Show-Methoden nicht gleich.

Prototypmuster

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 durch den Aufruf des Konstruktors erstellten Objekts hat den Vorteil, dass alle Instanzen des Objekts seine Attribute 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
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie JavaScript den Factory-Modus, den Konstruktormodus und den Prototyp-Modus verwendet, um Objektinstanzen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage