In der Front-End-Entwicklung ist es häufig notwendig, JS-Klassen zu definieren. In JavaScript gibt es also verschiedene Möglichkeiten, Klassen zu definieren, und was sind die Unterschiede? In diesem Artikel werden die folgenden sechs Möglichkeiten zur Definition von JS -Klassen (Fallbeschreibung) erläutert:
1. Fabrikmethode
Funktion car () {var ocar = neues Objekt; ocar.color = "blau"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)};Wenn diese Funktion aufgerufen wird, wird ein neues Objekt erstellt und alle Eigenschaften und Methoden zugewiesen. Verwenden Sie diese Funktion, um 2 Objekte mit genau den gleichen Eigenschaften zu erstellen.
Natürlich können Sie diese Methode ändern, indem Sie Parameter an sie weitergeben.
Funktion Car (Farbe, Tür) {var ocar = neues Objekt; ocar.color = color; ocar.doors = toor; ocar.showcolor = function () {document.write (this.color)}; // Ausgabe: "rot" car2.showcolor () // Ausgabe: "Blau"Jetzt können Sie Objekte mit unterschiedlichen Werten erhalten, indem Sie unterschiedliche Parameter an die Funktion übergeben.
Im vorherigen Beispiel wird jedes Mal, wenn das Funktion car () aufgerufen wird, Showcolor () erstellt, was bedeutet, dass jedes Objekt eine eigene Showcolor () -Methode hat.
Tatsächlich teilt jedes Objekt dieselbe Funktion. Obwohl eine Methode außerhalb der Funktion definiert werden kann, dann durch Hinweis auf die Eigenschaften der Funktion auf die Methode.
Funktion showcolor () {alert (this.color);} function car () {var ocar = new Object (); ocar.color = color; ocar.doors = toTor; ocar.showcolor = showcolor; return ocar;}Dies sieht jedoch nicht wie eine Funktionsmethode aus.
2. Konstruktormethode
Die Konstruktormethode ist so einfach wie die Fabrikmethode, wie unten gezeigt:
Funktion Car (Farbe, Tür) {this.color = color; this.doors = toTor; this.showcolor = function () {alert (this.color)};} var car1 = neues Auto ("rot", 4); var car2 = neues Auto ("blau", 4);Sie können sehen, dass die Konstruktormethode keine Objekte in der Funktion erstellt und das von diesem verwendete Schlüsselwort. Da beim Aufrufen des Konstruktors ein Objekt erstellt wurde und dies nur zum Zugriff auf die Objekteigenschaften innerhalb der Funktion verwendet werden kann.
Verwenden Sie nun neu, um Objekte zu erstellen, es sieht so aus! Aber es ist dasselbe wie die Fabrik. Jeder Anruf erstellt eine eigene Methode für das Objekt.
3. Prototypmethode
Diese Methode nutzt das Prototypattribut des Objekts. Erstellen Sie zunächst den Klassennamen mit einer leeren Funktion, und dann werden alle Attribute und Methoden dem Prototyp -Attribut zugeordnet.
function car () {} car.prototype.color = "rot"; car.prototype.doors = 4; car.prototype.showcolor = function () {alert (this.color);} var car1 = new car (); var car2 = new car ();In diesem Code wird zuerst eine leere Funktion definiert, und dann werden die Eigenschaften des Objekts durch das Prototyp -Attribut definiert. Wenn diese Funktion aufgerufen wird, werden alle Eigenschaften des Prototyps dem zu erstellenden Objekt zugewiesen. Alle Objekte in dieser Funktion speichern Zeiger auf ShowColor (), die syntaktisch zu demselben Objekt zu gehören scheinen.
Diese Funktion hat jedoch keine Parameter, und das Attribut kann nicht durch Übergabe von Parametern initialisiert werden. Der Standardwert des Attributs muss geändert werden, nachdem das Objekt erstellt wurde.
Ein sehr ernstes Problem mit der Prototypmethode ist, dass das Attribut auf ein Objekt wie ein Array zeigt.
Funktion car () {} car.prototype.color = "rot"; car.prototype.doors = 4; car.prototype.arr = new Array ("a", "b"); car.prototyp.showcolor = function () {alert (this.color); Car (); car1.arr.push ("cc"); alarm (car1.arr); //output:aa,bb,cclert(car2.arr); // Ausgabe: AA, BB, CCAufgrund des Referenzwerts des Arrays weisen beide Autoobjekte auf dasselbe Array hin. Wenn der Wert in CAR1 hinzugefügt wird, können Sie ihn auch in CAR2 sehen.
Union ist eine Methode, mit der Objekte wie andere Programmiersprachen mit Konstruktor/Prototyp erzeugt werden können. Es ist eine Methode, die Konstruktoren zum Definieren nicht funktionierender Eigenschaften von Objekten verwendet und Prototypen zum Definieren von Objekten verwendet.
Funktion Car (Farbe, Tür) {this.color = color; this.doors = toTor; this.arr = new Array ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = new Car ("Red", 4); Auto ("blau", 4); car1.arr.push ("cc"); alarm (car1.arr); //output:aa,bb,ccalert(Car2.arr); // Ausgabe: aa, bb5. Dynamische Prototypmethode
Die dynamische Prototypmethode ähnelt der gemischten Konstruktor-/Prototypmethode. Der einzige Unterschied ist die Position der Methode des Objekts.
Funktion Car (Farbe, Tür) {this.color = color; this.doors = toTor; this.arr = new Array ("aa", "bb"); if (typeof car._initialized == "undefined") {car.prototype.showcolor = function () {ainert (this.color);};};};};};};};Die dynamische Prototypmethode besteht darin, ein Flag zu verwenden, um festzustellen, ob dem Prototyp eine Methode zugewiesen wurde. Dies stellt sicher, dass die Methode nur einmal erstellt wird
6. gemischte Fabrikmethode
Sein Zwecklehrer erstellt einen gefälschten Konstruktor, der nur neue Instanzen eines anderen Objekts zurückgibt.
Funktion car () {var ocar = new Object (); ocar.color = "rot"; ocar.doors = 4; ocar.showcolor = function () {alert (this.color)}; return ocar;}Im Gegensatz zur Fabrikmethode verwendet diese Methode den neuen Bediener.
Die oben genannten sind alle Methoden zum Erstellen von Objekten. Die am weitesten verbreitete Methode ist die Hybridkonstruktor-/Prototypmethode, und die dynamische Prototypmethode ist ebenfalls sehr beliebt. Funktionell äquivalent zur Konstruktor-/Prototypmethode.
Die obige detaillierte Erklärung der sechs Möglichkeiten, JS -Klassen zu definieren, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.