Vor fast 20 Jahren, als JavaScript geboren wurde, war es nur eine einfache Web -Skriptsprache. Wenn Sie vergessen, Ihren Benutzernamen auszufüllen, wird eine Warnung angezeigt.
Heutzutage ist es fast allmächtig geworden, mit allen möglichen unglaublichen Verwendungen vom vorderen Ende bis zum hinteren Ende. Programmierer verwenden es, um zunehmend große Projekte abzuschließen.
Die Komplexität des JavaScript -Codes hat ebenfalls stark zugenommen. Eine einzelne Webseite enthält 10.000 Zeilen JavaScript -Code, die seit langem alltäglich sind. Im Jahr 2010 gab ein Ingenieur bekannt, dass die Codelänge von Google Mail 443.000 Zeilen beträgt!
Um einen solchen komplexen Code zu schreiben und aufrechtzuerhalten, müssen modulare Strategien verwendet werden. Derzeit besteht der Mainstream-Ansatz in der Branche darin, eine "objektorientierte Programmierung" anzuwenden. Wie JavaScript die objektorientierte Programmierung implementiert, ist daher zu einem heißen Thema geworden.
Das Problem ist, dass die Javascipt-Syntax "Klasse" (Klasse "(Klasse) nicht unterstützt, wodurch herkömmliche, objektorientierte Programmiermethoden unmöglich sind. Programmierer haben viele Erkundungen durchgeführt, um zu untersuchen, wie "Klassen" mit JavaScript simuliert werden. Dieser Artikel fasst drei Methoden des JavaScript -Definierens "Klassen" zusammen, erörtert die Eigenschaften jeder Methode und betont die beste Methode in meinen Augen.
===================================================================
Drei Möglichkeiten, eine Klasse in JavaScript zu definieren
In der objektorientierten Programmierung ist eine Klasse eine Vorlage für ein Objekt, das die Eigenschaften und Methoden definiert, die von derselben Gruppe von Objekten geteilt werden (auch als "Instanzen" bezeichnet.
Die JavaScript -Sprache unterstützt keine "Klassen", aber einige Problemumgehungen können verwendet werden, um "Klassen" zu simulieren.
1. Konstruktormethode
Dies ist eine klassische Methode und eine Must-Teach-Methode in Lehrbüchern. Es verwendet einen Konstruktor, um "Klasse" zu simulieren und dieses Schlüsselwort zu dem Instanzobjekt darin zu beziehen.
Die Codekopie lautet wie folgt:
Funktion cat () {
this.name = "Big Hair";
}
Verwenden Sie beim Generieren einer Instanz das neue Keyword.
Die Codekopie lautet wie folgt:
var cat1 = new Cat ();
Alert (Cat1.Name); // große Haare
Die Eigenschaften und Methoden der Klasse können auch im Prototypobjekt des Konstruktors definiert werden.
Die Codekopie lautet wie folgt:
Cat.Prototype.Makesound = function () {
alarm ("miow miow");
}
Für eine detaillierte Einführung in diese Methode finden Sie in der Artikelreihe, die ich geschrieben habe. Der Hauptnachteil ist, dass es relativ komplex ist und diesen und Prototypen verwendet, was sehr mühsam ist, zu schreiben und zu lesen.
2. Objekt.Create () Methode
Um die Mängel der "Konstruktormethode" zu lösen und bequemer Objekte zu generieren, schlug die fünfte Ausgabe von ECMascript, dem internationalen Standard von JavaScript (die dritte Ausgabe verfügbar), ein neues Methodenobjekt vor. Create ().
Mit dieser Methode ist eine "Klasse" ein Objekt, keine Funktion.
Die Codekopie lautet wie folgt:
var cat = {
Name: "große Haare",
macht: function () {alert ("miow miow miow"); }
};
Verwenden Sie dann Object.create () direkt, um eine Instanz zu generieren, ohne neue zu verwenden.
Die Codekopie lautet wie folgt:
var cat1 = Object.create (cat);
Alert (Cat1.Name); // große Haare
Cat1.Makesound (); // miow miow miow miow
Derzeit haben die neuesten Versionen der wichtigsten Browser (einschließlich IE9) diese Methode bereitgestellt. Wenn Sie auf einen alten Browser stoßen, können Sie den folgenden Code selbst zur Bereitstellung selbst verwenden.
Die Codekopie lautet wie folgt:
if (! object.create) {
Object.create = Funktion (o) {
Funktion f () {}
F.Prototyp = o;
Neue f () zurückgeben;
};
}
Diese Methode ist einfacher als die "Konstruktormethode", kann jedoch keine privaten Attribute und privaten Methoden implementieren, und Daten können nicht zwischen Instanzobjekten geteilt werden, sodass die Simulation von "Klassen" nicht umfassend genug ist.
3. minimalistisches Gesetz
Der niederländische Programmierer Gabor de Mooij schlug einen neuen Ansatz vor, der besser war als Objekt.Create (), den er als "minimalistischen Ansatz" bezeichnete. Dies ist auch die Methode, die ich empfehle.
3.1 Verpackung
Diese Methode verwendet dies und den Prototyp nicht, und der Code ist sehr einfach zu bereitstellen, weshalb er wahrscheinlich als "minimalistisches Gesetz" bezeichnet wird.
Erstens verwendet es auch ein Objekt, um "Klasse" zu simulieren. Definieren Sie in dieser Klasse einen Konstruktor CreateNew (), um eine Instanz zu generieren.
Die Codekopie lautet wie folgt:
var cat = {
createNew: function () {
// hier ein Code hier
}
};
Definieren Sie dann in CreateNew () ein Instanzobjekt und verwenden Sie dieses Instanzobjekt als Rückgabewert.
Die Codekopie lautet wie folgt:
var cat = {
createNew: function () {
var cat = {};
Cat.Name = "Big Hair";
Cat.Makesound = function () {alert ("miow miow"); };
Katze zurückkehren;
}
};
Rufen Sie bei der Verwendung die Methode createNew () auf, um das Instanzobjekt zu erhalten.
Die Codekopie lautet wie folgt:
var cat1 = cat.createNew ();
Cat1.Makesound (); // miow miow miow miow
Der Vorteil dieses Ansatzes besteht darin, dass es leicht zu verstehen ist, eine klare und elegante Struktur hat und der traditionellen "objektorientierten Programmierkonstruktion" übereinstimmt, sodass die folgenden Merkmale leicht bereitgestellt werden können.
3.2 Vererbung
Es ist sehr bequem, eine Klasse in der nächsten Klasse zu implementieren. Rufen Sie einfach die Methode createNew () in der Methode createNew () auf.
Definieren Sie zuerst eine Tierklasse.
Die Codekopie lautet wie folgt:
var Animal = {
createNew: function () {
var Animal = {};
Animal.sleep = function () {alert ("Schlaf in"); };
Tiertier;
}
};
Dann wird bei Cat's CreateNew () -Methode die CreateNew () -Methode von Animal aufgerufen.
Die Codekopie lautet wie folgt:
var cat = {
createNew: function () {
var cat = Animal.createNew ();
Cat.Name = "Big Hair";
Cat.Makesound = function () {alert ("miow miow"); };
Katze zurückkehren;
}
};
Die auf diese Weise erhaltene Katzeninstanz erbt sowohl die Katzenklasse als auch die Tierklasse.
Die Codekopie lautet wie folgt:
var cat1 = cat.createNew ();
cat1.sleep (); // schlafen in
3.3 Private Attribute und private Methoden
In der Methode createNew (), solange die Methoden und Eigenschaften, die nicht auf dem Katzenobjekt definiert sind, privat sind.
Die Codekopie lautet wie folgt:
var cat = {
createNew: function () {
var cat = {};
var sound = "miow miow miow";
cat.Makesound = function () {alert (sound); };
Katze zurückkehren;
}
};
Der interne variable Klang im obigen Beispiel kann nicht extern gelesen werden und kann nur durch die öffentliche Methode von Cat Makeound () gelesen werden.
Die Codekopie lautet wie folgt:
var cat1 = cat.createNew ();
alarm (Cat1.Sound); // undefiniert
3.4 Datenaustausch
Manchmal brauchen wir alle Instanzobjekte, um dieselben internen Daten lesen und schreiben zu können. In diesem Zeitpunkt sind diese internen Daten zu diesem Zeitpunkt innerhalb des Klassenobjekts und außerhalb der Methode createNew () zusammenfasst.
Die Codekopie lautet wie folgt:
var cat = {
Sound: "Meow Meow Meow",
createNew: function () {
var cat = {};
cat.Makesound = function () {alert (cat.Sound); };
cat.changesound = function (x) {cat.Sound = x; };
Katze zurückkehren;
}
};
Dann werden zwei Instanzobjekte generiert:
Die Codekopie lautet wie folgt:
var cat1 = cat.createNew ();
var cat2 = cat.createNew ();
Cat1.Makesound (); // miow miow miow miow
Wenn es zu diesem Zeitpunkt ein Instanzobjekt gibt und die gemeinsam genutzten Daten geändert werden, wird auch das andere Instanzobjekt betroffen.
Die Codekopie lautet wie folgt:
Cat2.Changesound ("lalala");
Cat1.Makesound (); // lalala
(über)