Heim  >  Artikel  >  Web-Frontend  >  Klassenimplementierung in Javascript

Klassenimplementierung in Javascript

黄舟
黄舟Original
2016-12-19 17:37:541162Durchsuche

Javascript selbst unterstützt keine Objektorientierung, es verfügt über keine Zugriffskontrollzeichen, es verfügt nicht über das Schlüsselwort class zum Definieren einer Klasse, es unterstützt weder Extend noch Doppelpunkt für die Vererbung und es verwendet Virtual nicht zur Unterstützung von Virtual Da Javascript jedoch eine flexible Sprache ist, schauen wir uns an, wie Javascript ohne das Schlüsselwort class die Klassendefinition implementiert und Objekte erstellt.

1: Definieren Sie eine Klasse und erstellen Sie ein Instanzobjekt der Klasse
In Javascript verwenden wir eine Funktion, um eine Klasse wie folgt zu definieren:

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

Sie mögen 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 ein Objekt aShape der Shape-Klasse wie folgt erstellen:

var aShape = new Shape();


Zwei: Definieren Sie public und private Eigenschaften
Wir haben ein aShape-Objekt erstellt, aber wenn wir versuchen, auf seine Eigenschaften zuzugreifen, tritt ein Fehler wie folgt auf:
aShape.x=1;

Dies zeigt, dass mit var definierte Attribute ist privat. Wir müssen das Schlüsselwort this verwenden, um die öffentlichen Attribute
function Shape()
{
this.x=1;
this.y=2;
}

Auf diese Weise können wir auf die Eigenschaften von Shape zugreifen, z.

aShape.x=2;

Okay, wir können basierend auf dem obigen Code zusammenfassen: Verwenden Sie var, um das PRivate-Attribut der Klasse zu definieren, und verwenden Sie dieses, um das öffentliche Attribut der Klasse zu definieren.

Drei: Definieren Sie öffentliche und private Methoden

In Javascript ist eine Funktion eine Instanz der Function-Klasse, und Function erbt daher indirekt von Object. Daher ist die Funktion auch ein Objekt. Wir können die Zuweisungsmethode verwenden, um eine Funktion zu erstellen. Natürlich können wir auch eine Funktion einer Attributvariablen der Klasse zuweisen. Dann kann diese Attributvariable als Methode bezeichnet werden, da es sich um eine ausführbare Funktion handelt. Der Code lautet wie folgt:

function 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, OOP Es ist Wird in OOP als öffentliche Methode bezeichnet, z. B.:

aShape.draw();

Wenn mit var definiert, wird die Zeichnung privat. In OOP wird sie als private Methode bezeichnet function 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.

3: Konstruktor

Javascript unterstützt kein OOP, und natürlich gibt es keinen Konstruktor. Wir können jedoch selbst einen Konstruktor simulieren und ihn automatisch aufrufen lassen, wenn das Objekt vorhanden ist Der Code lautet wie folgt:

function Shape()
{
var init = function()
{
;
}

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.


Viertens: 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.

function Shape(ax,ay)

{
var x=0;
var y =0;

var init = function()

{
//Konstruktorfunktion
x=ax;
y=ay;
};

init( );
}

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

var aShape = new Shape(0,1);

Fünf: Statische Eigenschaften und statische Methoden
Wie definiere ich statische Eigenschaften und Methoden in Javascript? Wie unten gezeigt

function Shape(ax,ay)

{
var x=0;
var y=0;

var init = function()

{
                                                                                    Dieses Attribut gehört zur Klasse , nicht das Objekt.
Shape.staticMethod=function(){};//Definieren Sie eine statische Methode

Mit statischen Eigenschaften und Methoden können wir wie folgt über den Klassennamen darauf zugreifen
alert ( aShape.count );
aShape.staticMethod();
Hinweis: Statische Eigenschaften und Methoden Sie sind Alles öffentlich. Bisher weiß ich nicht, wie ich statische Eigenschaften und Methoden privat machen kann >Greifen Sie in der Klassenmethode auf Ihre eigenen Eigenschaften zu. Schauen Sie sich den Code unten an.

function Shape(ax,ay)

var x=0;

var y=0;

this.gx=0;

this.gy=0;

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

init();
}

Sieben: Hinweise dazu
Nach der Erfahrung des Autors weist dies in der Klasse nicht immer auf The hin Der Hauptgrund für unser Objekt selbst ist, dass Javascript keine OOP-Sprache ist und Funktionen und Klassen mit Funktionen definiert werden, was natürlich einige kleinere Probleme verursachen wird.
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 ~

Lassen Sie uns den Code ändern, um dieses Problem zu lösen. Vergleichen Sie den Code in Teil 6, Sie werden
function Shape(ax,ay)

{

var _this=this; //Speichern Sie dies und verwenden Sie _this, um dies in Zukunft wie folgt zu ersetzen Dann wird Sie das nicht verwirren
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function ( )
{
x=ax;//Um auf private Attribute zuzugreifen, schreiben Sie einfach den Variablennamen direkt
y=ay;
_this.gx=ax;//Um auf öffentliche Attribute zuzugreifen, Sie muss vor dem Variablennamen stehen. Fügen Sie dies hinzu.
_this.gy=ay;
};

init();
}


Oben haben wir darüber gesprochen wie man in Javascript Klassen definiert, Objekte von Klassen erstellt, öffentliche und private Eigenschaften und Methoden erstellt, statische Eigenschaften und Methoden erstellt, Konstruktoren verspottet und die Fehleranfälligkeit diskutiert.
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 ~

In der nächsten Version von Javascript wird Unterstützung für OOP hinzugefügt. Bis dahin werden wir das Klassenschlüsselwort sowie öffentliche und private Zugriffskontrollzeichen sehen, die die Vererbung erweitern. Wenn Sie sich für die nächste Generation von Javascript interessieren, sollten Sie sich zuerst mit ActionScript 3.0 befassen. Es handelt sich um ein Meisterwerk, nachdem Adobe Macromedia übernommen hat, aber es ist nichts Neues ist AS3. 0 ist die Implementierung von ECMAScript Version 4. Zum Erlernen von ActionScript 3.0 empfehle ich wärmstens „Road to the Palace of ActionScript 3“. Dieses Buch ist absolut gut geschrieben, insbesondere der objektorientierte Teil. Es ist sehr leicht zu verstehen und die Beispiele sind anschaulich , Ich fühle mich sehr gut, während ich die neue Version von ECMAScript bewundere, gab es mir auch große Motivation, die OOP-Programmierideen weiter eingehend zu erlernen~


Das Obige ist das Inhalt der Klassenimplementierung in Javascript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn