Detaillierte Erläuterung der drei Methoden zum Definieren von Klassen in Javascript_Javascript-Kenntnissen

Vor fast 20 Jahren, als Javascript geboren wurde, war es nur eine einfache Web-Skriptsprache. Wenn Sie vergessen, Ihren Benutzernamen einzugeben, wird eine Warnung angezeigt.

Heutzutage ist es fast allmächtig geworden, vom Front-End bis zum Backend, mit allen möglichen unglaublichen Einsatzmöglichkeiten. Programmierer nutzen es, um immer größere Projekte abzuschließen.

Auch die Komplexität des Javascript-Codes ist sprunghaft angestiegen. Es ist seit langem üblich, dass eine einzelne Webseite 10.000 Zeilen Javascript-Code enthält. Im Jahr 2010 enthüllte ein Ingenieur, dass die Codelänge von Gmail 443.000 Zeilen betrug!

Das Schreiben und Warten eines solch komplexen Codes erfordert eine modulare Strategie. Derzeit besteht der Mainstream-Ansatz in der Branche darin, „objektorientierte Programmierung“ einzuführen. Daher ist die Implementierung objektorientierter Programmierung in Javascript zu einem heißen Thema geworden.
Das Problem besteht darin, dass die Javascript-Syntax „Klasse“ (Klasse) nicht unterstützt, sodass herkömmliche objektorientierte Programmiermethoden nicht direkt verwendet werden können. Programmierer haben viel darüber geforscht, wie man „Klassen“ in Javascript simuliert. Dieser Artikel fasst drei Möglichkeiten zum Definieren von „Klassen“ in Javascript zusammen, erörtert die Eigenschaften jeder Methode und konzentriert sich auf die meiner Meinung nach beste Methode.

============================================

Drei Möglichkeiten, Klassen in Javascript zu definieren

In der objektorientierten Programmierung ist eine Klasse eine Vorlage für ein Objekt, die die Eigenschaften und Methoden definiert, die derselben Gruppe von Objekten gemeinsam sind (auch „Instanzen“ genannt).

Javascript-Sprache unterstützt keine „Klassen“, aber Sie können einige Problemumgehungen verwenden, um „Klassen“ zu simulieren.

1. Konstruktormethode

Dies ist eine klassische Methode und eine Methode, die in Lehrbüchern gelehrt werden muss. Es verwendet einen Konstruktor, um eine „Klasse“ zu simulieren, und verwendet intern das Schlüsselwort this, um auf das Instanzobjekt zu verweisen.

Code kopieren Der Code lautet wie folgt:

Funktion Cat() {
　　this.name = "大毛";
}

Verwenden Sie beim Generieren einer Instanz das Schlüsselwort new.

Code kopieren Der Code lautet wie folgt:

var cat1 = new Cat();
Alert(cat1.name); // Da Mao

Die Attribute und Methoden einer Klasse können auch im Prototypobjekt des Konstruktors definiert werden.

Code kopieren Der Code lautet wie folgt:

Cat.prototype.makeSound = function(){
alarm("miau miau miau");
}

Für eine detaillierte Einführung in diese Methode lesen Sie bitte die von mir geschriebene Artikelserie „Javascript Object-Oriented Programming“, daher werde ich hier nicht auf Details eingehen. Sein Hauptnachteil besteht darin, dass es relativ kompliziert ist, dies und einen Prototyp verwendet und sehr mühsam zu schreiben und zu lesen ist.

2. Object.create()-Methode

Um die Mängel der „Konstruktormethode“ zu beheben und Objekte bequemer zu generieren, schlägt die fünfte Ausgabe von ECMAScript, dem internationalen Standard für Javascript (die dritte Ausgabe ist derzeit beliebt), eine neue Methode Object.create() vor .
Bei dieser Methode ist eine „Klasse“ ein Objekt, keine Funktion.

Code kopieren Der Code lautet wie folgt:

var Cat = {
　　Name: „大毛“,
　　makeSound: function(){ alarm("Meow Meow Meow"); };

Verwenden Sie dann direkt Object.create(), um eine Instanz zu generieren, ohne new zu verwenden.

Code kopieren Der Code lautet wie folgt:

​var cat1 = Object.create(Cat);
Alert(cat1.name); // Da Mao
cat1.makeSound(); // Miau Miau Miau

Derzeit nutzen die neuesten Versionen aller gängigen Browser (einschließlich IE9) diese Methode. Wenn Sie auf einen alten Browser stoßen, können Sie ihn mit dem folgenden Code selbst bereitstellen.

Code kopieren Der Code lautet wie folgt:

​if (!Object.create) {
　　Object.create = function (o) {
　　　 Funktion F() {}
　　　F.prototype = o;
　　　return new F();
　　};
}

Diese Methode ist einfacher als die „Konstruktormethode“, kann jedoch weder private Eigenschaften und private Methoden implementieren noch Daten zwischen Instanzobjekten austauschen, und die Simulation von „Klassen“ ist nicht umfassend genug.

3. Minimalismus-Methode

Der niederländische Programmierer Gabor de Mooij schlug eine neue Methode vor, die besser ist als Object.create(), die er den „minimalistischen Ansatz“ nannte. Dies ist auch die Methode, die ich empfehle.

3.1 Verpackung

Diese Methode verwendet keinen Prototyp und der Code ist sehr einfach bereitzustellen. Dies ist wahrscheinlich der Grund, warum sie als „minimalistische Methode“ bezeichnet wird.

Zuallererst wird auch ein Objekt verwendet, um eine „Klasse“ zu simulieren. Definieren Sie in dieser Klasse einen Konstruktor createNew(), um Instanzen zu generieren.

Code kopieren Der Code lautet wie folgt:

var Cat = {
​​createNew: function(){
　　　 // hier etwas Code
　　}
};

Definieren Sie dann in createNew() ein Instanzobjekt und verwenden Sie dieses Instanzobjekt als Rückgabewert.

Code kopieren Der Code lautet wie folgt:

var Cat = {
​​createNew: function(){
　　 var cat = {};
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alarm("Meow Meow Meow");
　　　Katze zurück;
　　}
};

Wenn Sie es verwenden, rufen Sie die Methode createNew() auf, um das Instanzobjekt abzurufen.

Code kopieren Der Code lautet wie folgt:

​var cat1 = Cat.createNew();
cat1.makeSound(); // Miau Miau Miau

Der Vorteil dieser Methode besteht darin, dass sie leicht zu verstehen ist, eine klare und elegante Struktur aufweist und dem traditionellen Konstrukt der „objektorientierten Programmierung“ entspricht, sodass die folgenden Funktionen problemlos bereitgestellt werden können.

3.2 Vererbung

Lassen Sie eine Klasse eine andere Klasse erben, was sehr praktisch zu implementieren ist. Rufen Sie einfach die Methode createNew() des letzteren in der Methode createNew() des ersteren auf.

Definieren Sie zunächst eine Animal-Klasse.

Code kopieren Der Code lautet wie folgt:

var Tier = {
​​createNew: function(){
　　 var animal = {};
animal.sleep = function(){ alarm("Sleep in"); };
　　　Tier zurückgeben;
　　}
};

Dann rufen Sie in der Methode createNew() von Cat die Methode createNew() von Animal auf.

Code kopieren Der Code lautet wie folgt:

var Cat = {
​​createNew: function(){
　　 var cat = Animal.createNew();
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alarm("Meow Meow Meow");
　　　Katze zurück;
　　}
};

Die auf diese Weise erhaltene Cat-Instanz erbt sowohl die Cat-Klasse als auch die Animal-Klasse.

Code kopieren Der Code lautet wie folgt:

​var cat1 = Cat.createNew();
cat1.sleep(); // Ausschlafen

3.3 Private Eigenschaften und private Methoden

In der Methode createNew() sind alle Methoden und Eigenschaften, die nicht für das Cat-Objekt definiert sind, privat.

Code kopieren Der Code lautet wie folgt:

var Cat = {
​​createNew: function(){
　　 var cat = {};
　　 var sound = "miau miau miau";
　　　cat.makeSound = function(){ alarm(sound); };
　　　Katze zurück;
　　}
};

Die interne Variable sound im obigen Beispiel kann nicht extern gelesen werden, sondern nur über die öffentliche Methode makeSound() von cat.

Code kopieren Der Code lautet wie folgt:

​var cat1 = Cat.createNew();
alarm(cat1.sound); // undefiniert

3.4 Datenfreigabe

Manchmal benötigen wir alle Instanzobjekte, um dieselben internen Daten lesen und schreiben zu können. Kapseln Sie zu diesem Zeitpunkt einfach die internen Daten innerhalb des Klassenobjekts und außerhalb der Methode createNew().

Code kopieren Der Code lautet wie folgt:

var Cat = {
Ton: „miau miau miau“,
​​createNew: function(){
　　 var cat = {};
　　　cat.makeSound = function(){ alarm(Cat.sound); };
　　　cat.changeSound = function(x){ Cat.sound = x };
　　　Katze zurück;
　　}
};

Generieren Sie dann zwei Instanzobjekte:

Code kopieren Der Code lautet wie folgt:

​var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // Miau Miau Miau

Wenn zu diesem Zeitpunkt ein Instanzobjekt die gemeinsam genutzten Daten ändert, ist auch das andere Instanzobjekt betroffen.

Code kopieren Der Code lautet wie folgt:

cat2.changeSound("La La La");
cat1.makeSound(); // La La La

(Ende)