AJAX-Grundlagen: Implementierung von Klassen in JavaScript In JavaScript können Sie das Schlüsselwort function verwenden, um eine „Klasse“ zu definieren und zu erfahren, wie Mitglieder zur Klasse hinzugefügt werden. Variablen oder Methoden, auf die durch diesen Zeiger innerhalb einer Funktion verwiesen wird, werden zu Mitgliedern der Klasse. Beispiel:
Das Folgende ist ein Codeausschnitt:
function class1(){.
var s="abc";
this.p1=s;
this.method1=function(){
Alert("Dies ist eine Testmethode");
}
}
var obj1=new class1();
Erhalten Sie Objekt obj1 über new class1 (), und Objekt obj1 erhält automatisch das Attribut p1 und die Methode method1.
In JavaScript ist die Definition einer Funktion selbst der Konstruktor einer Klasse. Im Folgenden wird der Prozess zum Erstellen von Objekten mithilfe von new beschrieben. Dabei werden die zuvor eingeführten Eigenschaften von Objekten und die Verwendung des new-Operators kombiniert.
(1) Wenn der Interpreter auf den neuen Operator stößt, erstellt er ein leeres Objekt.
(2) Beginnt mit der Ausführung der Funktion class1 und zeigt den darin enthaltenen Zeiger auf das neu erstellte Objekt
. Wenn Sie einem Attribut einen Wert zuweisen, erstellt der Interpreter das Attribut für das Objekt. Wenn beispielsweise in Klasse 1 die Anweisung this.p1=s ausgeführt wird, wird ein Attribut p1 hinzugefügt und der Wert der Variablen s Ihm zugewiesen, so dass die Funktionsausführung der Prozess der Initialisierung dieses Objekts ist, dh die Realisierung der Rolle des Konstruktors
(4) Wenn die Funktion ausgeführt wird, gibt der neue Operator das initialisierte Objekt zurück.
Während dieses gesamten Prozesses wird der grundlegende objektorientierte Mechanismus in JavaScript implementiert. Es ist ersichtlich, dass in JavaScript die Definition einer Funktion tatsächlich darin besteht, den Konstruktor eines Objekts zu implementieren, der durch Funktionen vervollständigt wird. Die Nachteile dieser Methode sind:
· Wenn alle Initialisierungsanweisungen und Elementdefinitionen zusammengefügt werden, ist die Codelogik nicht klar genug und es ist schwierig, komplexe Funktionen zu implementieren.
·Jedes Mal, wenn eine Instanz einer Klasse erstellt wird, muss der Konstruktor einmal ausgeführt werden. Die im Konstruktor definierten Eigenschaften und Methoden werden immer wiederholt erstellt. Beispiel:
Das Folgende ist ein Codefragment:
this.method1=function(){.
Alert("Dies ist eine Testmethode");
}
Jedes Mal, wenn Methode1 hier eine Instanz von Klasse1 erstellt, wird diese einmal erstellt, was zu einer Speicherverschwendung führt. Im nächsten Abschnitt wird ein weiterer Klassendefinitionsmechanismus vorgestellt: das Prototypobjekt, mit dem die durch die Definition von Klassenmitgliedern im Konstruktor verursachten Mängel behoben werden können.
Verwenden von Prototypobjekten zum Definieren von Klassenmitgliedern
Im vorherigen Abschnitt wurde der Implementierungsmechanismus von Klassen und die Implementierung von Konstruktoren vorgestellt. Jetzt stellen wir einen weiteren Mechanismus zum Hinzufügen von Mitgliedern zu Klassen vor: Prototypobjekte. Wenn eine Funktion neu ist, werden die Mitglieder des Objekts automatisch dem erstellten Objekt zugewiesen. Beispiel:
Das Folgende ist ein Codeausschnitt:
<script language="JavaScript" type="text/javascript">
<!--
//Definieren Sie eine Klassenfunktion class1(){ mit nur einem Attribut prop
this.prop=1;
}
//Verwenden Sie das Prototypattribut der Funktion, um neue Mitglieder für die Klasse zu definieren class1.prototype.showProp=function(){
alarm(this.prop);
}
//Eine Instanz von Klasse1 erstellen var obj1=new class1();
// Rufen Sie die durch das Prototyp-Prototypobjekt definierte showProp-Methode auf obj1.showProp();
//-->
</script>
Prototype ist ein JavaScript-Objekt, das dem Prototypobjekt Methoden und Eigenschaften hinzufügen, ändern und löschen kann. Dadurch werden einer Klasse Memberdefinitionen hinzugefügt.
Nachdem wir nun das Prototypobjekt der Funktion verstanden haben, schauen wir uns den Ausführungsprozess von new an.
(1) Erstellen Sie ein neues Objekt und lassen Sie diesen Zeiger darauf zeigen.
(2) Weisen Sie diesem neuen Objekt alle Mitglieder des Funktionsprototyps zu.
(3) Führen Sie den Funktionskörper aus und initialisieren Sie das
Objekt erstellt in (1).
Im Vergleich zum im vorherigen Abschnitt eingeführten Ausführungsprozess von new gibt es einen zusätzlichen Prozess, bei dem Prototyp zum Initialisieren des Objekts verwendet wird. Dies steht auch im Einklang mit der wörtlichen Bedeutung von Prototyp, bei dem es sich um den Prototyp der Instanz der entsprechenden Klasse handelt. Dieser Initialisierungsprozess findet vor der Ausführung des Funktionskörpers (Konstruktors) statt, sodass die im Prototyp definierten Eigenschaften und Methoden innerhalb des Funktionskörpers aufgerufen werden können:
Das Folgende ist ein Codeausschnitt:
<script language="JavaScript" type="text/javascript">
<!--
//Definieren Sie eine Klasse mit nur einer Attribut-Requisite
Funktion class1(){
this.prop=1;
this.showProp();
}
//Verwenden Sie das Prototypattribut der Funktion, um neue Mitglieder für die Klasse zu definieren
class1.prototype.showProp=function(){
alarm(this.prop);
}
//Erstelle eine Instanz von Klasse1
var obj1=new class1();
//-->
</script>
Im Vergleich zum vorherigen Code wird hier die im Prototyp definierte Methode showProp innerhalb von Klasse1 aufgerufen, sodass während des Konstruktionsprozesses des Objekts ein Dialogfeld angezeigt wird, das anzeigt, dass der Wert des Prop-Attributs 1 ist.
Es ist zu beachten, dass die Definition des Prototypobjekts vor der Anweisung stehen muss, die die Klasseninstanz erstellt, sonst funktioniert es nicht. Beispiel:
Das Folgende ist ein Codeausschnitt:
<script language="JavaScript" type="text/javascript">
<!--
//Definieren Sie eine Klasse mit nur einer Attribut-Requisite
Funktion class1(){
this.prop=1;
this.showProp();
}
//Erstelle eine Instanz von Klasse1
var obj1=new class1();
//Verwenden Sie das Prototypattribut der Funktion, um nach der Anweisung, die die Instanz erstellt, neue Mitglieder für die Klasse zu definieren. Dies ist nur für später erstellte Objekte wirksam.
class1.prototype.showProp=function(){
alarm(this.prop);
}
//-->
</script>
Dieser Code generiert einen Laufzeitfehler, der darauf hinweist, dass das Anzeigeobjekt keine showProp-Methode hat, da die Methode nach der Anweisung definiert wird, die eine Klasse instanziiert.
Es ist ersichtlich, dass das Prototypobjekt den Mitgliedern der Designklasse gewidmet ist. Darüber hinaus verfügt der Prototyp über ein wichtiges Attribut, das beispielsweise einen Verweis auf den Konstruktor
darstellt Es folgt das Code-Snippet:
Funktion class1(){
Warnung(1);
}
class1.prototype.constructor(); //Rufen Sie den Konstruktor der Klasse auf
Nachdem dieser Code ausgeführt wurde, wird ein Dialogfeld mit dem darauf angezeigten Text „1“ angezeigt. Dies zeigt, dass ein Prototyp eng mit der Definition einer Klasse zusammenhängt. Eigentlich: class1.prototype.constructor===class1.
Ein Entwurfsmuster für JavaScript-Klassen.
Wir haben bereits erläutert, wie eine Klasse definiert und eine Instanz einer Klasse initialisiert wird. Die Klasse kann Mitglieder zum durch die Funktion definierten Funktionskörper hinzufügen und auch Prototypen verwenden, um Mitglieder der Klasse zu definieren . Der Programmiercode erscheint verwirrend. Wie kann man Klassen klar definieren? Nachfolgend finden Sie ein Implementierungsmuster für eine Klasse.
In JavaScript können aufgrund der Flexibilität von Objekten auch Mitglieder im Konstruktor zur Klasse hinzugefügt werden, was nicht nur die Flexibilität erhöht, sondern auch die Komplexität des Codes erhöht. Um die Lesbarkeit und Entwicklungseffizienz des Codes zu verbessern, können Sie diese Methode zum Definieren von Mitgliedern verwenden und stattdessen das Prototypobjekt verwenden. Auf diese Weise ist die Definition der Funktion der Konstruktor der Klasse, der mit der Implementierung übereinstimmt der traditionellen Klasse: Der Klassenname und der Konstruktorname sind gleich. Zum Beispiel:
Hier ist der Codeausschnitt:
Funktion class1(){
//Konstrukteur
}
//Mitgliedsdefinition
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
//Methodenimplementierungscode
}
Obwohl der obige Code die Definition der Klasse viel klarer gemacht hat, muss jedes Mal, wenn eine Eigenschaft oder Methode definiert wird, class1.prototype verwendet werden. Nicht nur wird die Codegröße größer, sondern auch die Lesbarkeit reicht nicht aus. Zur weiteren Verbesserung können Sie den Konstruktor eines untypisierten Objekts verwenden, um das Prototypobjekt anzugeben, um die Memberdefinition der Klasse zu implementieren:
Das Folgende ist ein Codeausschnitt:
//Definiere eine Klasse class1
Funktion class1(){
//Konstrukteur
}
// Realisieren Sie die Mitgliedsdefinition der Klasse, indem Sie das Prototypobjekt angeben
class1.prototype={
someProperty:"sample", someMethod:function(){
//Methodencode
},
...//Andere Eigenschaften und Methoden.
}
Der obige Code definiert Klasse1 auf sehr klare Weise. Der Konstruktor wird direkt mit dem Klassennamen implementiert, und die Mitglieder werden mithilfe untypisierter Objekte definiert. Alle Eigenschaften und Methoden werden gleichzeitig mit ihnen initialisiert definiert. Der Wert des Attributs. Dies ähnelt auch eher der Implementierung von Klassen in traditionellen objektorientierten Sprachen. Es ist lediglich so, dass die Definitionen des Konstruktors und der Klassenmitglieder in zwei Teile unterteilt sind. Dies kann als festes Muster für die Definition von Klassen in JavaScript angesehen werden, was das Verständnis bei der Verwendung erleichtert.
Hinweis: Referenzen zwischen Mitgliedern einer Klasse müssen über diesen Zeiger erfolgen. Wenn Sie beispielsweise in der someMethod-Methode im obigen Beispiel das Attribut someProperty verwenden möchten, müssen Sie die Form von this.someProperty übergeben, da in JavaScript jeweils Eigenschaften und Methoden sind unabhängig, sie sind über diesen Zeiger mit einem Objekt verbunden.