Objekte sind alles, was Menschen studieren wollen, von den einfachsten Ganzzahlen bis hin zu komplexen Flugzeugen usw., die nicht nur konkrete Dinge, sondern auch abstrakte Regeln, Pläne oder Ereignisse darstellen können. -Ausgezogen aus Baidu Encyclopedia
Objektorientierte Programmierung ist derzeit das beliebteste Programmiermodell. Es ist jedoch frustrierend, dass das am häufigsten verwendete Front-End-JavaScript keine objektorientierte Unterstützung unterstützt.
JavaScript hat keine Zugriffskontrollzeichen, definiert nicht die Schlüsselwortklasse, unterstützt nicht geerbte Extend oder Dickdarm und verwendet nicht virtuell, um virtuelle Funktionen zu unterstützen. JavaScript ist jedoch eine flexible Sprache. Schauen wir uns an, wie JavaScript ohne Keyword -Klasse Klassendefinition implementiert und Objekte erstellt.
Definieren Sie die Klasse und erstellen Sie das Instanzobjekt der Klasse
In JavaScript definieren wir die Funktion, um die Klasse wie folgt zu definieren:
Die Codekopie lautet wie folgt:
Funktionsform ()
{
var x = 1;
var y = 2;
}
Sie könnten sagen, Zweifel? Ist das nicht eine definierende Funktion? Das ist richtig, dies ist eine definierende Funktion. Wir definieren eine Formfunktion und initialisieren x und y. Wenn Sie es jedoch aus einer anderen Perspektive betrachten, soll dies eine Formklasse definieren, die zwei Eigenschaften x und y enthält, und die Anfangswerte betragen 1 bzw. 2. Die Schlüsselwörter, die wir definieren, sind jedoch eher die Funktion als die Klasse.
Anschließend können wir wie folgt ein Objekt Ashape der Formklasse erstellen:
Die Codekopie lautet wie folgt:
var ashape = new Shape ();
Öffentliche und private Eigenschaften definieren
Wir haben Ashape -Objekt erstellt, aber wenn wir versuchen, auf die Eigenschaften zuzugreifen, erhalten wir einen solchen Fehler:
Die Codekopie lautet wie folgt:
Ashape.x = 1;
Dies zeigt, dass Eigenschaften, die mit var definiert sind, privat sind. Wir müssen dieses Schlüsselwort verwenden, um öffentliche Attribute zu definieren.
Die Codekopie lautet wie folgt:
Funktionsform ()
{
this.x = 1;
this.y = 2;
}
Auf diese Weise können wir auf Formeigenschaften zugreifen, wie z. B.:
Die Codekopie lautet wie folgt:
Ashape.x = 2;
OK, wir können aus dem obigen Code zusammenfassen: Verwenden Sie VAR, um das private Attribut der Klasse zu definieren und diese zu verwenden, um das öffentliche Attribut der Klasse zu definieren.
Definieren Sie öffentliche und private Methoden
In JavaScript ist eine Funktion eine Instanz der Funktionsklasse, und die Funktion wird indirekt aus dem Objekt geerbt, sodass eine Funktion auch ein Objekt ist. Daher können wir eine Funktion unter Verwendung der Zuordnungsmethode erstellen. Natürlich können wir einer Attributvariablen der Klasse auch eine Funktion zuweisen. Dann kann diese Attributvariable als Methode bezeichnet werden, da es sich um eine ausführbare Funktion handelt. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
Funktionsform ()
{
var x = 0;
var y = 1;
this.draw = function ()
{
//drucken;
};
}
Wir definieren einen Zeichnen im obigen Code und weisen ihm eine Funktion zu. Im Folgenden können wir diese Funktion durch Ashape nennen, die als öffentliche Methode in OOP bezeichnet wird, wie beispielsweise:
Die Codekopie lautet wie folgt:
Ashape.Draw ();
Wenn sie mit Var definiert sind, wird das Zeichnung privat, was als private Methode in OOP bezeichnet wird, z. B.:
Die Codekopie lautet wie folgt:
Funktionsform ()
{
var x = 0;
var y = 1;
var draw = function ()
{
//drucken;
};
}
Auf diese Weise können Sie Ashape.Draw nicht verwenden, um diese Funktion aufzurufen.
Konstruktor
JavaScript unterstützt OOP nicht, daher gibt es natürlich keinen Konstruktor. Wir können jedoch einen Konstruktor selbst simulieren und das Objekt automatisch aufgerufen werden, wenn es erstellt wird. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
Funktionsform ()
{
var init = function ()
{
// Konstruktorcode
};
init ();
}
Am Ende der Form haben wir künstlich die Init -Funktion bezeichnet. Beim Erstellen eines Formobjekts wird init immer automatisch aufgerufen, was unseren Konstruktor simulieren kann.
Konstruktor mit Parametern
Wie kann der Konstruktor Parameter einnehmen? Tatsächlich ist es sehr einfach. Schreiben Sie einfach die Parameter, die in die Liste der Funktionsparameter übergeben werden sollen, z. B.:
Die Codekopie lautet wie folgt:
Funktionsform (AX, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
// Konstruktor
x = ax;
y = ay;
};
init ();
}
Auf diese Weise können wir das Objekt wie dieses erstellen:
Die Codekopie lautet wie folgt:
var ashape = neue Form (0,1);
Statische Eigenschaften und statische Methoden
Wie definieren Sie statische Eigenschaften und Methoden in JavaScript? Wie unten gezeigt:
Die Codekopie lautet wie folgt:
Funktionsform (AX, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
// Konstruktor
x = ax;
y = ay;
};
init ();
}
Shape.Count = 0; // Definieren Sie eine statische Eigenschaftenzahl, die zur Klasse gehört, nicht zum Objekt.
Shape.staticMethod = function () {}; // Definieren Sie eine statische Methode
Mit statischen Eigenschaften und Methoden können wir wie folgt mit Klassennamen darauf zugreifen:
Die Codekopie lautet wie folgt:
Alarm (Ashape.Count);
Ashape.staticMethod ();
Hinweis: Statische Eigenschaften und Methoden sind beide öffentlich. Bisher weiß ich nicht, wie ich statische Eigenschaften und Methoden privat machen kann ~
Zugang zu öffentlichen und privaten Eigenschaften dieser Klasse in einer Methode
Zugriff auf Ihre eigenen Eigenschaften in Klassenmethoden. Die Zugriffsmethoden von JavaScript für öffentliche und private Eigenschaften sind unterschiedlich. Bitte beachten Sie den folgenden Code:
Die Codekopie lautet wie folgt:
Funktionsform (AX, ay)
{
var x = 0;
var y = 0;
this.gx = 0;
this.gy = 0;
var init = function ()
{
x = ax; // private Attribute hinzufügen und den Variablennamen direkt schreiben
y = ay;
this.gx = ax; // Um auf öffentliche Attribute zuzugreifen, müssen Sie dies vor dem variablen Namen hinzufügen.
this.gy = ay;
};
init ();
}
Dinge zu beachten, die dazu zu beachten sind
Nach meiner Erfahrung zeigt dies in der Klasse nicht immer auf unser Objekt selbst. Der Hauptgrund ist, dass JavaScript keine OOP -Sprache ist und Funktionen und Klassen durch Funktionen definiert werden, was natürlich einige geringfügige Probleme verursacht.
Die Situation, in der dieser Zeiger falsch zeigt, ist im Allgemeinen in der Ereignisverarbeitung. Wir möchten, dass die Mitgliedsfunktion eines bestimmten Objekts auf ein Ereignis reagiert. Wenn das Ereignis ausgelöst wird, ruft das System unsere Mitgliedsfunktion auf. Der übergebene dieser Zeiger ist jedoch nicht mehr unser eigenes Objekt. Natürlich ist es ein Fehler, dies zu diesem Zeitpunkt in der Mitgliedsfunktion aufzurufen.
Die Lösung besteht darin, dies zu Beginn der Definitionsklasse in ein Privateigentum zu speichern. Später können wir diese Eigenschaft anstelle davon verwenden. Ich benutze diesen Zeiger mit dieser Methode ist ziemlich sicher und besorgnisfrei ~
Ändern wir den Code, um dieses Problem zu lösen. Wenn Sie den Code in Teil 6 vergleichen, werden Sie definitiv verstehen:
Die Codekopie lautet wie folgt:
Funktionsform (AX, ay)
{
var _this = this; // Speichern Sie dies und verwenden
var x = 0;
var y = 0;
_this.gx = 0;
_this.gy = 0;
var init = function ()
{
x = ax; // private Attribute hinzufügen und den Variablennamen direkt schreiben
y = ay;
_this.gx = ax; // Um auf öffentliche Attribute zuzugreifen, müssen Sie dies vor dem Variablennamen hinzufügen.
_this.gy = ay;
};
init ();
}
Oben haben wir darüber gesprochen, wie Klassen in JavaScript definiert werden, Klassenobjekte erstellen, öffentliche und private Eigenschaften und Methoden erstellen, statische Eigenschaften und Methoden erstellen, Konstruktoren simulieren und diesen fehleranfälligen Anschlag diskutieren.
Hier geht es um die OOP -Implementierung in JavaScript. Das obige ist der praktischste Inhalt. Im Allgemeinen definiert JavaScript Klassen, und die Verwendung des obigen Code zum Erstellen von Objekten reicht aus. Natürlich können Sie auch Mootools oder Prototypen verwenden, um Klassen zu definieren und Objekte zu erstellen. Ich habe das Mootools -Framework benutzt und es fühlt sich sehr gut an. Es ist perfekter für die Simulation der JavaScript -Klassen und unterstützt die Klassenvererbung. Interessierte Leser können es versuchen. Wenn Sie ein Framework verwenden, müssen Sie natürlich relevante JS -Header -Dateien in Ihre Webseite aufnehmen. Daher hoffe ich immer noch, dass Leser Klassen ohne Framework erstellen können. Auf diese Weise ist der Code effizienter und Sie können auch erkennen, dass es nicht problematisch ist, eine einfache Klasse zu erstellen ~