Eine kurze Diskussion zur Realisierung objektorientierter Klassen in JavaScript_Grundkenntnisse

Ein Objekt ist alles, was Menschen studieren möchten, von den einfachsten ganzen Zahlen bis hin zu komplexen Flugzeugen. Sie können nicht nur bestimmte Dinge darstellen, sondern auch abstrakte Regeln, Pläne oder Ereignisse. --Zitiert aus der Baidu-Enzyklopädie

Objektorientierte Programmierung ist derzeit das beliebteste Programmiermodell. Frustrierend ist jedoch, dass JavaScript, die am weitesten verbreitete Front-End-Anwendung, keine objektorientierte Programmierung unterstützt.

JavaScript hat keine Zugriffskontrollzeichen, es verfügt nicht über das Schlüsselwort class zum Definieren einer Klasse, es unterstützt keine Erweiterung oder Doppelpunkt zur Vererbung und es verwendet kein Virtual zur Unterstützung virtueller Funktionen. Javascript ist jedoch flexibel Lassen Sie uns einen Blick darauf werfen, wie Javascript ohne das Schlüsselwort class die Klassendefinition implementiert und Objekte erstellt.

Definieren Sie eine Klasse und erstellen Sie ein Instanzobjekt der Klasse

In Javascript verwenden wir Funktionen zum Definieren von Klassen wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Shape()
{
var x=1;
var y=2;
}

Man könnte sagen: Zweifel? Ist das nicht eine definierende Funktion? Ja, das ist eine Definitionsfunktion. Wir definieren eine Formfunktion und initialisieren x und y. Wenn Sie es jedoch aus einem anderen Blickwinkel betrachten, definieren Sie eine Shape-Klasse mit zwei Attributen x und y, und die Anfangswerte sind 1 bzw. 2. Das Schlüsselwort, das wir zum Definieren verwenden Klasse ist Funktion statt Klasse.

Dann können wir wie folgt ein Objekt aShape der Shape-Klasse erstellen:

Code kopieren Der Code lautet wie folgt:

var aShape = new Shape();

Definieren Sie öffentliche und private Eigenschaften

Wir haben ein Shape-Objekt erstellt, aber wenn wir versuchen, auf seine Eigenschaften zuzugreifen, tritt ein Fehler wie folgt auf:

Code kopieren Der Code lautet wie folgt:

aShape.x=1;

Dies zeigt, dass mit var definierte Eigenschaften privat sind. Wir müssen dieses Schlüsselwort verwenden, um öffentliche Eigenschaften zu definieren.

Code kopieren Der Code lautet wie folgt:

Funktion Shape()
{
This.x=1;
This.y=2;
}

Auf diese Weise können wir auf die Attribute von Shape zugreifen, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

aShape.x=2;

Okay, wir können basierend auf dem obigen Code zusammenfassen: Verwenden Sie var, um die privaten Attribute der Klasse zu definieren, und verwenden Sie dies, um die öffentlichen Attribute der Klasse zu definieren.

Definieren Sie öffentliche und private Methoden

In Javascript ist eine Funktion eine Instanz der Function-Klasse. Daher ist eine Funktion auch ein Objekt. Daher können wir dies auch tun Weisen Sie einer Klasse eine Funktion zu. Dann kann diese Attributvariable als Methode bezeichnet werden, da es sich um eine ausführbare Funktion handelt. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Shape()
{
var x=0;
var y=1;
This.draw=function()
{
            //print;
};
}

Wir haben im obigen Code eine Zeichnung definiert und ihr eine Funktion zugewiesen. Als Nächstes können wir diese Funktion über aShape aufrufen, das in OOP als öffentliche Methode bezeichnet wird, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

aShape.draw();

Wenn es mit var definiert wird, wird dieser Draw privat, was in OOP als private Methode bezeichnet wird, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktion Shape()
{
var x=0;
var y=1;
var draw=function()
{
            //print;
};
}

Auf diese Weise können Sie aShape.draw nicht zum Aufrufen dieser Funktion verwenden.

Konstrukteur

Javascript unterstützt kein OOP und natürlich gibt es keinen Konstruktor. Wir können jedoch selbst einen Konstruktor simulieren und ihn beim Erstellen des Objekts automatisch aufrufen lassen. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Shape()
{
var init = function()
{
//Konstruktorcode
};
init();
}

Am Ende von Shape haben wir die Funktion init künstlich aufgerufen. Wenn dann ein Shape-Objekt erstellt wird, wird init immer automatisch aufgerufen und unser Konstruktor kann simuliert werden.

Konstruktor mit Parametern

Wie bringt man den Konstruktor dazu, Parameter anzunehmen? Tatsächlich ist es sehr einfach, die zu übergebenden Parameter in die Parameterliste der Funktion zu schreiben, z. B.:

Code kopieren Der Code lautet wie folgt:

Funktion Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//Konstruktor
         x=ax;
y=ay;
};
init();
}

Auf diese Weise können wir Objekte wie dieses erstellen:

Code kopieren Der Code lautet wie folgt:

var aShape = new Shape(0,1);

Statische Eigenschaften und statische Methoden

Wie definiere ich statische Eigenschaften und Methoden in Javascript? Wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

Funktion Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//Konstruktor
         x=ax;
y=ay;
};
init();
}
Shape.count=0; //Definieren Sie eine statische Attributanzahl. Dieses Attribut gehört zur Klasse, nicht zum Objekt.
Shape.staticMethod=function(){};//Definieren Sie eine statische Methode

Mit statischen Eigenschaften und Methoden können wir wie folgt über den Klassennamen darauf zugreifen:

Code kopieren Der Code lautet wie folgt:

Warnung ( aShape.count );
aShape.staticMethod();

Hinweis: Statische Eigenschaften und Methoden sind öffentlich. Bisher weiß ich nicht, wie ich statische Eigenschaften und Methoden privat machen kann
Greifen Sie in Methoden auf die öffentlichen und privaten Eigenschaften dieser Klasse zu

Zugriff auf Ihre eigenen Eigenschaften in der Klassenmethode. Javascript verfügt über verschiedene Zugriffsmethoden für öffentliche Eigenschaften und private Eigenschaften. Bitte sehen Sie sich den folgenden Code an:

Code kopieren Der Code lautet wie folgt:

Funktion Shape(ax,ay)
{
var x=0;
var y=0;
This.gx=0;
This.gy=0;
var init = function()
{
           x=ax;//Um auf private Eigenschaften zuzugreifen, schreiben Sie einfach den Variablennamen direkt
y=ay;
This.gx=ax;//Um auf öffentliche Eigenschaften zuzugreifen, müssen Sie this.
vor dem Variablennamen hinzufügen This.gy=ay;
};
init();
}

Hinweise dazu

Nach der Erfahrung des Autors verweist dies in der Klasse nicht immer auf unser Objekt selbst. Der Hauptgrund dafür ist, dass Javascript keine OOP-Sprache ist. Darüber hinaus werden Funktionen und Klassen mit Funktionen definiert, was natürlich zu einigen führt kleinere Probleme.

Die Situation, in der dieser Zeiger auf einen Fehler hinweist, liegt normalerweise in der Ereignisverarbeitung vor. Wir möchten, dass die Mitgliedsfunktion auf ein Ereignis reagiert this Der Zeiger ist nicht mehr unser eigenes Objekt. Der Aufruf dieser Funktion in der Member-Funktion führt natürlich zu einem Fehler.

Die Lösung besteht darin, dass wir dies zu Beginn der Klassendefinition in einem privaten Attribut speichern. In Zukunft können wir dieses Attribut verwenden, um dies zu ersetzen. Ich verwende diese Methode, um diesen Zeiger zu verwenden, was ziemlich sicher und sorgenfrei ist~

Ändern wir den Code, um dieses Problem zu lösen. Vergleichen Sie den Code in Teil 6 und Sie werden verstehen:

Code kopieren Der Code lautet wie folgt:

Funktion Shape(ax,ay)
{
var _this=this; //Speichern Sie dies und ersetzen Sie dies in Zukunft durch _this, damit Sie dadurch nicht verwirrt werden
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
           x=ax;//Um auf private Eigenschaften zuzugreifen, schreiben Sie einfach den Variablennamen direkt
y=ay;
​​​​ _this.gx=ax;//Um auf öffentliche Eigenschaften zuzugreifen, müssen Sie this.
vor dem Variablennamen hinzufügen ​​​​ _this.gy=ay;
};
init();
}

Oben haben wir darüber gesprochen, wie man Klassen in Javascript definiert, Objekte von Klassen erstellt, öffentliche und private Eigenschaften und Methoden erstellt, statische Eigenschaften und Methoden erstellt, Konstruktoren simuliert und die Fehleranfälligkeit besprochen.

Das ist alles, was wir über die OOP-Implementierung in Javascript sagen. Das Obige ist der praktischste Inhalt. Im Allgemeinen wird Javascript zum Definieren von Klassen verwendet und der obige Code reicht aus, um Objekte zu erstellen. Natürlich können Sie auch Mootools oder Prototypen verwenden, um Klassen zu definieren und Objekte zu erstellen. Ich habe das Mootools-Framework verwendet und finde es sehr gut. Es verfügt über eine umfassendere Javascript-Klassensimulation und unterstützt die Klassenvererbung. Wenn Sie ein Framework verwenden, müssen Sie natürlich die relevanten js-Header-Dateien in Ihre Webseite einbinden, daher hoffe ich immer noch, dass Leser Klassen ohne Framework erstellen können. Auf diese Weise ist der Code effizienter, und Sie können dies auch tun Sehen Sie, es ist nicht mühsam, eine einfache Klasse zu erstellen~