Ausführliche Erklärung, wie man Klasseninstanzen in JavaScript durch Funktionen definiert

Veranschaulichen Sie zunächst anhand eines Beispiels:

function myClass() 
{ 
var id = 1; 
var name = "johnson"; 
//properties 
this.ID = id; 
this.Name = name; 
//method 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

Die Definition der Funktion entspricht tatsächlich dem Konstruktor der Klasse, und die letzten beiden Sätze dienen dazu, eine Instanz davon zu erstellen Klasse. Analysieren wir zunächst den ersten Satz: var obj1 = new myClass(); Wenn new zum Erstellen einer Instanz einer Klasse verwendet wird, erstellt der Interpreter zunächst ein leeres Objekt. Führen Sie dann diese myClass-Funktion aus und zeigen Sie diesen Zeiger auf eine Instanz dieser Klasse. Wenn Sie auf this.ID = id; und this.showMessage = function(){...} stoßen, werden diese beiden Eigenschaften und diese Methode erstellt und die Variablen id und name werden definiert Diesen beiden Eigenschaften und diesem Funktionsobjekt (shwoMessage) wird die Funktion auf Wertebene zugewiesen. Dieser Vorgang entspricht der Initialisierung des Objekts, ähnlich dem Konstruktor in C#. Schließlich gibt new dieses Objekt zurück. Schauen Sie sich den zweiten Satz an: var obj2 = new myClass(); Der Ausführungsprozess ist der gleiche wie im vorherigen Satz, d. h. es wird ein leeres Objekt erstellt, dann wird die Funktion myClass ausgeführt und zwei Eigenschaften und eine Methode definiert.
Wie aus der obigen Analyse ersichtlich ist, besteht die obige Art der Implementierung einer Klasse darin, die Attributmethoden der Klasse in der Definition der Funktion zu definieren. Es gibt Nachteile. Wenn zwei oder mehr Instanzen dieser Klasse erstellt werden müssen, wie oben gezeigt, werden diese Eigenschaften mehrmals erstellt.
Wie kann man diese Situation vermeiden? Prototyp ist wie sein Name ein Prototyp, der tatsächlich die Sammlung von Mitgliedern dieses Funktionsobjekts darstellt. Wir können sagen, dass Prototyp tatsächlich die Sammlung einer Klasse ist der Mitglieder. Die vom Prototyp definierten Eigenschaften und Methoden werden ausgeführt, bevor der Konstruktor der Funktion ausgeführt wird. Bevor ein Objekt also neu ist, wurden die Mitglieder des Prototyps tatsächlich ausgeführt. Schauen wir uns zunächst ein Beispiel an: Die Struktur der Klasse

function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

ist immer noch dieselbe wie im vorherigen Beispiel, wird hier jedoch mithilfe eines Prototyps implementiert. Schauen wir uns zunächst die letzten beiden Sätze an. Prototyp wird vor der Ausführung des Funktionskonstruktors ausgeführt, d. h. bevor var obj1 = new myClass(); ausgeführt wird, verfügt diese Klasse bereits über eine ID, ein Name-Attribut und eine showMessage-Methode. Wenn der Ausführende einen Satz schreibt, läuft der Ausführungsprozess wie folgt ab: Beachten Sie den Vergleich mit dem vorherigen Beispiel: Erstellen Sie zunächst ein leeres Objekt und zeigen Sie mit dem Zeiger auf dieses Objekt. Weisen Sie dann diesem Objekt alle Mitglieder des Prototypobjekts der Funktion zu (beachten Sie, dass diese Mitglieder nicht erneut erstellt werden). Führen Sie dann den Funktionskörper aus. Schließlich gibt new dieses Objekt zurück. Beim Ausführen des nächsten Satzes: Dieser Prozess wird ebenfalls ausgeführt und diese Mitglieder werden nicht wiederholt erstellt.
Der obige Code ist nur ein Beispiel. In tatsächlichen Projekten gibt es möglicherweise eine große Anzahl von Mitgliedern in der Klasse und es muss möglicherweise eine große Anzahl von Instanzen erstellt werden. Dieser Prototyp wird seine Überlegenheit zeigen. Darüber hinaus verwendet der obige Code die Klammersyntax, um Mitglieder des Prototyps zu definieren, sodass der Code klarer aussieht. Dies ist ein empfohlenes Klassenentwurfsmuster. Natürlich werden wir in vielen Projekten auch bessere Modelle für die JavaScript-Programmierung finden und hoffen, dass mit der Zeit auch alle gängigen Browser die JavaScript-Analyse vereinheitlichen .
Wie oben erwähnt, treten die vom Prototyp definierten Elemente vor dem Konstruktor auf. Es kann bewiesen werden, dass der Konstruktor leer ist. Fügen Sie dem Konstruktor eine Warnung hinzu var obj1 = new myClass(); wird ein Popup-Dialogfeld mit den korrekten Attributwerten angezeigt.
Der folgende Code:

function subClass(){ } 
subClass.prototype = 
{ 
Name: "sub" 
} 
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
SubObj: new subClass(), 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); 
} 
} 
var obj1 = new myClass(); 
obj1.SubObj.Name = "XXX"; 
obj1.showMessage(); 
var obj2 = new myClass(); 
obj2.showMessage();

Hier wird ein Referenztyp in myClass definiert, sein Typ ist eine von uns angepasste Unterklassenklasse und es gibt ein Name-Attribut in dieser Unterklasse. Da das Prototypobjekt laut unserer obigen Analyse gemeinsam genutzt wird: Bei der Ausführung von var obj1 = new myClass(); werden die Mitglieder des Prototyps von myClass in diese obj1-Instanz kopiert. Aber SubObj ist hier ein Referenztyp. Wenn var obj2 = new myClass(); ausgeführt wird, werden die ID- und Name-Mitglieder im Prototyp nach obj2 kopiert, aber das SubObj-Attribut wird nicht kopiert, sondern verweist auf den Prototyp. SubObj. Da der vorherige Satz den Wert von obj1.Subobj.Name geändert hat, wird bei Verwendung von new zum Generieren einer obj2-Instanz auf den geänderten Wert verwiesen.
Wenn Sie also einen Prototyp zum Definieren einer Klasse verwenden, müssen Sie weiterhin die Attribute im Konstruktor und die Methoden im Prototyp des Konstruktors definieren. Wie folgt:

function myClass(id, name) 
{ 
this.ID = id; 
this.Name = name; 
} 
myClass.prototype = 
{ 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
}, 
showMessage2: function() 
{ 
alert("Method2"); 
} 
} 
var obj1 = new myClass(1, "johnson"); 
obj1.showMessage(); 
obj1.Name="John"; 
obj1.showMessage(); 
var obj2 = new myClass(2, "Amanda"); 
obj2.showMessage();

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Klasseninstanzen in JavaScript durch Funktionen definiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!