Heim > Web-Frontend > js-Tutorial > Mehrere gängige Methoden zum Erstellen von Objekten in js objektorientiert (Fabrikmodus, Konstruktormodus, Prototypmodus)_Javascript-Kenntnisse

Mehrere gängige Methoden zum Erstellen von Objekten in js objektorientiert (Fabrikmodus, Konstruktormodus, Prototypmodus)_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:33:13
Original
1110 Leute haben es durchsucht

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

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

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

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 wurde

Der 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
Nach dem Login kopieren

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.

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