Detaillierte Einführung in Klassen in JavaScript_Javascript-Kenntnissen

In JavaScript können Sie Klassen verwenden, um objektorientierte Programmierung zu implementieren. Allerdings unterscheiden sich die Klassen in JavaScript von denen in Java, und auch ihre entsprechenden Definitionen und Verwendungen sind unterschiedlich.

Definition von Klassen in JavaScript

In JavaScript bilden alle von demselben Prototypobjekt (Prototyp) abgeleiteten Objekte eine Klasse. Das heißt, eine Klasse ist in JavaScript das Konzept einer Sammlung von Objekten. Wenn zwei Objekte denselben Prototyp haben, gehören sie dazu zur gleichen Klasse; Klassen in JavaScript benötigen nicht einmal einen Klassennamen. Nehmen Sie den folgenden Code als Beispiel:

Code kopieren Der Code lautet wie folgt:

var p = {x:42};
var a = Object.create(p);
var b = Object.create(p);
console.log(a === b);//false
console.log(Object.getPrototypeOf(a) === Object.getPrototypeOf(b));//true

Im obigen Beispiel haben die Objekte a und b dasselbe Prototypobjekt (Prototyp) p, sodass a und b zur selben Klasse gehören (obwohl keine dieser Klassen einen Klassennamen hat) und sie den Wert vom Prototyp erben Objekt p als 42 Attribut x.

Wie Sie diesem Beispiel entnehmen können, fungiert das Prototypobjekt als Vorlage und es können mehrere Objekte daraus abgeleitet/erstellt werden. Sein Status ist derselbe wie der Klassencode in der Java-Sprache . Der Kern der Definition. Das Prototypobjekt im folgenden Beispiel sieht eher wie Klassencode aus:

Code kopieren Der Code lautet wie folgt:

var p = {
INCREMENT_BY : 1,
Inkrement: Funktion(x){
return x this.INCREMENT_BY;
}
}
var a = Object.create(p);
var b = Object.create(p);
console.log(a.increment(7));//8
console.log(b.increment(9));//10

Im obigen Beispiel definiert das Prototypobjekt p eine Eigenschaft (INCREMENT_BY) mit dem Wert 1 und eine Funktion namens inkrementieren; die Objekte a und b erhalten die Funktionen INCREMENT_BY und inkrementieren aus der Vorlage p. Beim Aufrufen der Inkrementierungsfunktion von Objekt a oder b versucht JavaScript, den INCREMENT_BY-Wert von a oder b abzurufen (this.INCREMENT_BY wird von p erhalten, sein Wert ist alle 1 – erhalten von der Vorlage, dem Wert They). sind alle dieselben Variablen, ähnlich den statischen Variablen in Java, daher werden im obigen Beispiel bei der Benennung der INCREMENT_BY-Variablen ausschließlich Großbuchstaben verwendet.

Im obigen Beispiel haben alle aus der Vorlage p erstellten Objekte (die Objekte, die zur gleichen Klasse gehören) genau die gleichen Eigenschaften und Verhaltensweisen. Tatsächlich verfügen verschiedene Objekte derselben Klasse jedoch zusätzlich zu den durch die Klasse definierten Attributen/Verhaltensweisen häufig über einige einzigartige Attribute und Verhaltensweisen. Wenn Sie die Prototypvorlage als Klasse verwenden müssen, müssen Sie daher jedes davon abgeleitete Objekt anpassen:

Code kopieren Der Code lautet wie folgt:

var p = {
INCREMENT_BY : 1,
Inkrement: Funktion(x){
return x this.INCREMENT_BY this.custom_increment_by;
}
}
var a = Object.create(p);
var b = Object.create(p);
a.custom_increment_by = 0;
b.custom_increment_by = 1;
console.log(a.increment(7));//8
console.log(b.increment(9));//11

In diesem Beispiel verfügen die aus der Vorlage p erstellten Objekte a und b über eine Variable „custom_increment_by“, deren Werte nicht unbedingt gleich sind, und das Endergebnis ihrer Funktion „increment()“ hängt mit dem Wert von „custom_increment_by“ zusammen. Im Allgemeinen erfolgt die Anpassung neuer Objekte oft in einer einheitlichen Funktion:

Code kopieren Der Code lautet wie folgt:

var p = {
INCREMENT_BY : 1,
Inkrement: Funktion(x){
return x this.INCREMENT_BY this.custom_increment_by;
}
}
Funktion getIncrementalClassObject(customIncrementByValue){
var incrementalObj = Object.create(p);
incrementalObj.custom_increment_by = customIncrementByValue;
Rückkehr inkrementalObj;
}
var a = getIncrementalClassObject(0);
var b = getIncrementalClassObject(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

Auf diese Weise wird die Definition einer Klasse durch das Prototypobjekt p und die Funktion getIncrementalClassObject() vervollständigt: Sie können Objekte erhalten, deren Prototypobjekte p sind, indem Sie die Funktion getIncrementalClassObject() aufrufen, und diese neuen Objekte können während des Aufrufs erstellt werden der Funktion getIncrementalClassObject() Nehmen Sie einige Anpassungen vor. Es ist erwähnenswert, dass diese definierte Klasse derzeit keinen Klassennamen hat. Der Einfachheit halber nennen wir sie Inkrementell.

Wenn Sie auf die in der Funktion getIncrementalClassObject() geleistete Arbeit zurückblicken, können Sie sehen, dass der Prozess zum Erstellen eines neuen Objekts aus der Incremental-Klasse wie folgt abläuft:

1. Erstellen Sie ein leeres Objekt und definieren Sie sein Prototypobjekt als p.
2. Passen Sie dieses neu erstellte leere Objekt entsprechend verschiedenen Parameterwerten an.
3. Geben Sie das neue, angepasste Objekt zurück.

In JavaScript können Sie die Definition einer Klasse und die Erstellung neuer Objekte mithilfe von Constructor (Konstruktor) schnell abschließen.

Konstruktor in JavaScript

Wie Sie dem obigen Beispiel der Inkrementalklasse entnehmen können, erfordert die Definition einer neuen Klasse zwei Teile des Codes: das Erstellen eines Prototypobjekts als Vorlage und das Erstellen einer benutzerdefinierten Funktion zum Initialisieren des neuen Objekts, während gleichzeitig ein neues Objekt erstellt wird Eine Klasse durchläuft drei Prozesse: Angeben des Prototypobjekts des neuen Objekts, Anpassen/Initialisieren des neuen Objekts und Zurückgeben des neuen Objekts. In JavaScript kann dies alles über den Konstruktor (Konstruktor) erfolgen.

Der Konstruktor in JavaScript ist eine Funktion, die für die Initialisierung neuer Objekte verantwortlich ist, und der Prototyp dieser Konstruktorfunktion wird als Vorlage zum Erstellen neuer Objekte verwendet. Nehmen wir immer noch die obige Inkrementalklasse als Beispiel. Nachdem Sie den Code mit dem Konstruktor neu geschrieben haben, sieht er folgendermaßen aus:

Code kopieren Der Code lautet wie folgt:

Funktion Inkremental(customIncrementByValue){
This.custom_increment_by = customIncrementByValue;
}
Inkremental.prototype = {
INCREMENT_BY : 1,
Inkrement: Funktion(x){
return x this.INCREMENT_BY this.custom_increment_by;
}
}

var a = new Incremental(0);
var b = new Incremental(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

Der Prozess der Verwendung der Constructor-Funktion zum Erstellen eines neuen Objekts über das Schlüsselwort new durchläuft tatsächlich die folgenden Phasen:

Erstellen Sie ein neues leeres Objekt.

1. Richten Sie das Prototypobjekt dieses Objekts auf das Prototypattribut der Konstruktorfunktion.
2. Verwenden Sie dieses Objekt als Parameter, um die Konstruktorfunktion auszuführen.
3. Dies ist die gleiche Arbeit, die in der vorherigen Funktion getIncrementalClassObject() ausgeführt wurde.

Klassenname

Wenn Sie den Konstruktor zum Erstellen eines Objekts verwenden, verfügt das entsprechende Objekt auch über einen „Klassennamen“, der anhand des Ergebnisses des Instanzoperators überprüft werden kann:

Code kopieren Der Code lautet wie folgt:

console.log(eine Instanz von Inkremental);//true
console.log(b Instanz von Inkremental);//true

Der Instanzof-Operator bestimmt jedoch nicht, ob das Objekt vom Inkrementellen Konstruktor erstellt wurde. Der Instanzof-Operator bestimmt nur, ob das Prototypobjekt des Objekts Inkremental.prototype ist. Wenn zwei Konstruktoren mit demselben Prototyp vorhanden sind, gibt der Operator „instanceof“ einheitlich „true“ zurück, ohne zu unterscheiden, welcher Konstruktor zum Erstellen des Objekts verwendet wird.

Code kopieren Der Code lautet wie folgt:

Funktion Inkremental2(customIncrementByValue){
This.custom_increment_by = customIncrementByValue 3;
}
Inkremental2.prototype = Inkremental.prototype;
console.log(eine Instanz von Inkremental2);//true