Konstruktoren in JavaScript verstehen

JavaScript ist eine etablierte Sprache, unterstützt jedoch nur die klassische objektorientierte Programmierung (OOP) in ES6. Bis es Funktionen wie Klassendeklarationen hinzufügte, handhabte JavaScript OOP mit einem weniger bekannten Prototyp-basierten Paradigma. Mit beiden Ansätzen können Sie jedoch komplexe Anwendungen erstellen, die objektbasierte Funktionen verwenden.

Ein Konstruktor in prototypischem JavaScript sieht ähnlich aus wie jede andere Funktion. Der Hauptunterschied besteht darin, dass Sie diese Konstruktorfunktion verwenden können, um Objekte zu erstellen.

Was ist ein Konstruktor in JavaScript?

Konstrukteure sind einer von die grundlegenden Konzepte der objektorientierten Programmierung. Ein Konstruktor ist eine Funktion, mit der Sie eine Instanz eines Objekts erstellen können. Ein Konstruktor erstellt nicht nur ein neues Objekt, sondern legt auch die zugehörigen Eigenschaften und Verhaltensweisen fest.

Konstruktorsyntax

FunktionNamedesKonstruktors() {
 this.property1 = "Eigenschaft1";
 this.property2 = "Eigenschaft2";
 this.property3 = "Eigenschaft3";
}

Sie können einen Konstruktor mit dem erstellen Funktion Schlüsselwort, da es im Wesentlichen ist wie jede andere Funktion. Konstruktoren halten sich jedoch an die folgenden Konventionen:

1. Um sie von anderen Funktionen zu unterscheiden, verwenden Sie einen Namen für Ihren Konstruktor, der mit einem Großbuchstaben beginnt.
2. Konstrukteure verwenden die Das Stichwort anders. Innerhalb eines Konstruktors, Das bezieht sich auf das neue Objekt, das der Konstruktor erstellt.
3. Im Gegensatz zu JavaScript-Funktionen definieren Konstruktoren Eigenschaften und Verhaltensweisen, anstatt Werte zurückzugeben.

Verwenden eines Konstruktors zum Erstellen neuer Objekte

In JavaScript ist die Verwendung eines Konstruktors zum Erstellen eines Objekts eine einfache Aufgabe. Hier ist ein einfacher Konstruktor mit einem darauf folgenden Aufruf:

FunktionStudent() {
 this.name = "Gloria";
 this.gender = "Weiblich";
Das.Alter = 19;
}
lassen Studentin = neu Student();

In diesem Beispiel Studentin ist ein Objekt, das aus der erstellt wurde Student Konstrukteur. Verwenden Sie die neu Schlüsselwort zum Aufrufen der Funktion als Konstruktor. Dieses Schlüsselwort weist JavaScript an, eine neue Instanz von zu erstellen Student. Sie sollten diese Funktion nicht ohne aufrufen neu Stichwort, weil die Das innerhalb des Konstruktors zeigt nicht auf ein neues Objekt. Nach dem Bau, Studentin hat alle Eigenschaften von Student. Sie können auf diese Eigenschaften wie bei jedem anderen Objekt zugreifen und sie ändern.

Wichtige Dinge, die Sie über JavaScript-Konstruktoren wissen sollten

Die Arbeit mit Konstrukteuren kann so ermüdend sein, und gleichzeitig kann es eine leichte Aufgabe sein. Hier sind einige wichtige Dinge, die jeder Entwickler über die Arbeit mit Konstruktoren wissen sollte.

Verwenden von Konstruktoren mit Argumenten

Sie können einen Konstruktor erweitern, um Argumente zu empfangen. Dies ist sehr wichtig, wenn Sie responsiven, flexiblen Code schreiben möchten.

Immer wenn Sie ein Objekt aus einem Konstruktor erstellen, erbt das Objekt alle im Konstruktor deklarierten Eigenschaften. Zum Beispiel die Studentin Sie haben oben erstellte Eigenschaften Name, Geschlecht, Und Alter mit festen Anfangswerten. Während Sie jede Eigenschaft manuell ändern können, wäre es eine Menge Arbeit, wenn Sie ein Programm mit vielen Objekten schreiben würden.

Glücklicherweise können JavaScript-Konstruktoren wie jede andere Funktion Parameter akzeptieren. Sie können die ändern Student Konstruktor, um zwei Parameter zu akzeptieren:

FunktionStudent(Name / Geschlecht) {
Das.name = Name;
Das.gender = Geschlecht;
Das.Alter = 19;
}

Sie können jetzt eindeutige Objekte aus demselben Konstruktor definieren, indem Sie verschiedene Argumente übergeben.

Argumente machen Konstruktoren flexibler. Sie sparen Zeit und fördern sauberen Code.

Objektmethoden definieren

Eine Methode ist eine Objekteigenschaft, die eine Funktion ist. Methoden verbessern Ihren Code in OOP, da sie Ihren Objekten unterschiedliche Verhaltensweisen hinzufügen. Hier ist ein Beispiel:

FunktionStudent(Name / Geschlecht) {
Das.name = Name;
Das.gender = Geschlecht;
Das.Alter = 19 ;
Das.sayName = Funktion () {
zurückkehren„Mein Name ist ${name}`; 
 }
}

Das obige fügt die Funktion hinzu sagName zum Konstrukteur.

Angenommen, Sie verwenden diesen Konstruktor, um ein Objekt zu erstellen, das Sie in einer Variablen speichern. Studentin. Sie können diese Funktion dann mit dem folgenden Code aufrufen:

Studentin.sagenName()

der Prototyp

Früher haben wir erstellt Student in einer Weise, dass alle seine Instanzen eine haben Alter Eigentum mit einem Wert von 19. Dies führt dazu, dass für jeden eine duplizierte Variable vorhanden ist Student Instanz, die Sie erstellen.

Um diese Duplizierung zu vermeiden, verwendet JavaScript das Konzept von Prototypen. Alle von einem Konstruktor erstellten Objekte teilen die Eigenschaften seines Prototyps. Sie können die hinzufügen Alter Eigentum zu Student Prototyp wie unten gezeigt:

Schüler.Prototyp.Alter = 19;

Dadurch werden alle Instanzen von Student wird die haben Alter Eigentum. Deklarieren Prototypische Eigenschaften ist eine Möglichkeit, doppelten Code in Ihrer Anwendung zu reduzieren. Es macht Ihren Code so standardisiert wie möglich.

Eine Prototypeigenschaft kann ein Objekt sein

Sie können Prototyp-Eigenschaften wie oben beschrieben einzeln hinzufügen. Wenn Sie jedoch viele Eigenschaften hinzufügen müssen, kann dies unpraktisch sein.

Alternativ können Sie alle gewünschten Eigenschaften in einem neuen Objekt enthalten. Auf diese Weise legen Sie alle Eigenschaften auf einmal fest. Zum Beispiel:

Schüler.prototyp = {
 Alter: 19,
 Wettrennen: "Weiss",
 Behinderung: "Keiner"
}

Schüler.prototyp = { 
Konstrukteur: Student, 
 Alter: 19, 
 Wettrennen: "Weiss", 
 Behinderung: "Keiner"
}

Supertypen und Vererbung

Nachlass ist eine Methode, die Programmierer anwenden, um Fehler in ihren Anwendungen zu reduzieren. Es ist eine Art, am festzuhalten Wiederhole dich nicht (trocken) Prinzip.

Angenommen, Sie haben zwei Konstruktoren—Student Und Lehrer– die zwei ähnliche Prototypeigenschaften haben.

Schüler.prototyp = { 
Konstrukteur: Student,
sagName: Funktion () {
zurückkehren„Mein Name ist ${name}`; 
 }
}
Teacher.prototype = { 
Konstrukteur: Lehrer,
sagName: Funktion () {
zurückkehren„Mein Name ist ${name}`;
 }
}

Diese beiden Konstruktoren definieren die sagName Methode identisch. Um diese unnötige Duplizierung zu vermeiden, können Sie eine erstellen Supertyp.

FunktionIndividuelle Details(){};
IndividuelleDetails.prototype = { 
Konstrukteur: Individuelle Details, 
sagName: Funktion () {
zurückkehren„Mein Name ist ${name}`; 
 }
};

Sie können dann entfernen sagName von beiden Konstrukteuren.

Um die Eigenschaften vom Supertyp zu erben, verwenden Sie Objekt.erstellen(). Sie setzen den Prototyp beider Konstruktoren auf eine Instanz des Supertyps. In diesem Fall setzen wir die Student Und Lehrer Prototypen zu einer Instanz von IndividualDetails.

Hier ist es:

Student.prototyp = Objekt.create (IndividualDetails.prototype);
Teacher.prototype = Objekt.create (IndividualDetails.prototype);

Indem Sie dies tun, Student Und Lehrer alle Eigenschaften des Supertyps erben, Individuelle Details.

So üben Sie DRY in OOP mit Supertypen.

Konstrukteure sind Game Changer

Konstruktoren sind eine Schlüsselkomponente von JavaScript, und die Beherrschung ihrer Funktionalität ist entscheidend für die Entwicklung von OOP-JavaScript-Anwendungen. Sie können einen Konstruktor verwenden, um Objekte zu erstellen, die Eigenschaften und Methoden gemeinsam nutzen. Sie können die Vererbung auch verwenden, um Objekthierarchien zu definieren.

In ES6 können Sie die Klasse Schlüsselwort zur Definition klassischer objektorientierter Klassen. Diese Version von JavaScript unterstützt auch a Konstrukteur Stichwort.