Detaillierte Erläuterung der Erstellung von JavaScript-Objekten und des Konstruktormustercodes

Objektorientierte Javascript-Kenntnisse sind sehr umfangreich und es dauert einige Zeit, sie gründlich zu verstehen

Erstellung von Objekten:

1 Erstellen Sie ein objektorientiert

var obj = new Object(); 
obj.name = 'haha';
obj.showName = function(){ 
 alert(obj.name);
}
obj.showName();

Nachteile: Wenn wir mehrere objektorientierte Objekte erstellen möchten, gibt es zu viel sich wiederholenden Code und wir müssen ihn kapseln. wir haben also eine Factory-Methode.

2 Factory-Methode

function CreatePerson(name){ 
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 } 
 return obj;//出厂
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其实就是简单的封装函数，整个过程像工厂的流水线，所以叫工厂方式

Nachteile: Der Typ des erstellten Objekts kann nicht identifiziert werden. Da es sich bei allen um Objekte handelt, gibt es im Gegensatz zu Datum, Array usw. keinen Unterschied, sodass das Konstruktormuster entstand.

3 Konstruktormuster

function CreatePerson(name){ 
 this.name = name; 
 this.showName = function(){ 
  alert(this.name);
 } 
} 
var p1 =new CreatePerson('haha'); 
p1.showName();
var p2 = new CreatePerson('hehe'); 
p2.showName();

Wir verändern uns durch diese beiden Aspekte:

Das Der erste Buchstabe des Funktionsnamens wird groß geschrieben

Dies dient der Unterscheidung von gewöhnlichen Funktionen. Der Konstruktor selbst ist eigentlich eine gewöhnliche Funktion, aber wir verwenden ihn speziell zur Implementierung der Konstruktionsfunktion, also haben wir ihn Speziell Ein Name wird als Konstruktor bezeichnet. Je nachdem, wie Sie die Funktion aufrufen, wird sie zum Konstruktor.

New-Schlüsselwortaufruf

Das New-Schlüsselwort wird beim Aufruf der Funktion verwendet. Was genau macht New also? Was ist der Unterschied zwischen der Verwendung von „Neu“ und der Nichtverwendung? Wenn wir uns das folgende Beispiel ansehen

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name); 
 }; 
 console.log(this);
} 
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

, werden wir feststellen, dass der Sinn darin anders liegt, wenn New zum Aufrufen einer Funktion verwendet wird. Tatsächlich macht New hauptsächlich die folgenden Dinge, aber was unten geschrieben wird, ist nur ein allgemeines Verhalten, nicht der interne Quellcode.

function CreatePerson(name){ 
 var obj = {}; //声明一个空对象obj 
 obj._proto_= CreatePerson.prototype;
 //把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法 ，这里原型先知道结论，下面会讲。
 CreatePerson.apply(obj); //用apply方法让this指向obj对象
 this.name = name; //obj对象添加属性，方法
 this.showName = function(){ 
  alert(this.name);
  }; 
 return obj;//返回这个对象
}

Probleme mit dem Funktionskonstruktionsmuster:

alert(p1.showName==p2.showName);//false

Nachteile: Diese beiden Objekte sind sichtbar Sie teilen sich nicht die gleiche Methode. Jedes Mal, wenn new verwendet wird, erstellt das System einen neuen Speicher. Jedes dieser beiden Objekte hat jedoch die gleiche Funktion und wird nicht gemeinsam genutzt, was definitiv nicht das ist, was wir wollen . Es gibt also die nächste Methode, Prototyp + Konstruktionsmodus

4 Prototyp + Konstruktionsmodus

Prototyp: Jede Funktion verfügt über ein Prototypattribut, das ein Objekt ist, auch genannt Als Prototypobjekt können wir Methoden und Eigenschaften darauf schreiben (das Prototypobjekt verfügt jedoch nicht nur über die Eigenschaften und Methoden, die wir geschrieben haben, sondern auch über andere, die im Folgenden vorgestellt werden), und die durch diese Funktion erstellten Instanzen können alle gemeinsam genutzt werden Methoden und Eigenschaften unter diesem Prototypobjekt. Wir müssen also nur die Dinge, die wir teilen möchten, unter den Prototyp der Funktion stellen, und die Dinge, die wir nicht teilen möchten, können über den Konstruktor erstellt werden.
Sehen Sie sich eine Kastanie an (Prototyp + Konstruktion)

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

Der Test ist wahr, dass die Methode showName() geteilt wird , was bedeutet, dass sie gemeinsam genutzt werden, außerdem haben sie eine Referenzbeziehung, was bedeutet, dass eine Änderung des showName von p1 auch Auswirkungen auf den showName von p2 hat.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Erstellung von JavaScript-Objekten und des Konstruktormustercodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!