Erfahren Sie, wie Sie Klassen in JavaScript erstellen
2015 wurde die ES6-Version der Programmiersprache JavaScript veröffentlicht. Diese Version führte einige wichtige Upgrades der Sprache ein und ordnete sie offiziell in die Kategorie der objektorientierten Programmiersprachen unter anderen Sprachen wie Java und C++ ein.
Objektorientierte Programmierung konzentriert sich auf Objekte und die Operationen, die mit ihnen ausgeführt werden können. Bevor Sie jedoch Objekte haben können, benötigen Sie eine Klasse.
JavaScript-Klassen sind eine der bahnbrechenden Funktionen der ES6-Version der Sprache. Eine Klasse kann als Blaupause beschrieben werden, die verwendet wird, um Objekte zu erstellen.
In diesem Tutorial-Artikel erfahren Sie, wie Sie Objekte mithilfe von JavaScript-Klassen erstellen und bearbeiten.
JavaScript-Klassenstruktur
Beim Erstellen einer Klasse in JavaScript benötigen Sie immer eine grundlegende Komponente – das Schlüsselwort class . Fast alle anderen Aspekte der JavaScript-Klasse sind für ihre erfolgreiche Ausführung nicht erforderlich.
Eine JavaScript-Klasse wird auf natürliche Weise ausgeführt, wenn kein Konstruktor bereitgestellt wird (die Klasse erstellt während der Ausführung einfach einen leeren Konstruktor). Wenn jedoch eine JavaScript-Klasse mit Konstruktoren und anderen Funktionen erstellt wird, aber kein class-Schlüsselwort verwendet wird, ist diese Klasse nicht ausführbar.
Das Schlüsselwort class (das immer in Kleinbuchstaben geschrieben werden sollte) ist eine Notwendigkeit in der Klassenstruktur von JavaScript. Das folgende Beispiel ist die allgemeine Syntax einer JavaScript-Klasse. Die Syntax der JavaScript-Klasse ist unten:
class ClassName{
//class body
}
Erstellen einer Klasse in JavaScript
In der Programmierung kann eine Klasse als eine verallgemeinerte Entität angesehen werden, die verwendet wird, um ein spezialisiertes Objekt zu erstellen. In einer Schulumgebung kann beispielsweise eine verallgemeinerte Entität (eine Klasse) Schüler sein und ein Objekt von Schülern kann John Brown sein. Aber bevor Sie ein Objekt erstellen, müssen Sie die Daten kennen, die es speichert, und hier kommen JavaScript-Konstruktoren ins Spiel.
Verwenden von Konstruktoren in JavaScript-Klassen
Ein Konstruktor ist aus mehreren Gründen für den Klassenerstellungsprozess von entscheidender Bedeutung. es initialisiert den Zustand eines Objekts (über seine Attribute) und wird automatisch aufgerufen, wenn ein neues Objekt instanziiert (definiert und erstellt) wird.
Verwenden eines Konstruktorbeispiels
Unten sehen Sie ein Konstruktorbeispiel mit einer Erklärung dessen, was es bedeutet.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}
Der obige Code stellt einen wichtigen Aspekt des JavaScript-Klassenkonstruktors dar; Im Gegensatz zu anderen Sprachen wie Java und C++ verwendet der Konstrukter von JavaScript nicht den Klassennamen, um einen Konstruktor zu erstellen. Es verwendet das Schlüsselwort constructor, wie Sie im obigen Beispiel sehen können.
Der Konstruktor im obigen Beispiel nimmt drei Parameter und verwendet das Schlüsselwort this , um die Parameter der aktuellen Instanz der Klasse zuzuweisen. Es mag etwas verwirrend erscheinen, aber Sie müssen verstehen, dass eine Klasse als Blaupause angesehen werden kann, mit der viele Häuser erstellt werden.
Jedes gebaute Haus kann dann als Objekt dieser Klasse angesehen werden. Obwohl jedes dieser Häuser nach dem gleichen Bauplan erstellt wurde, sind sie durch ihre spezifische geografische Lage oder die Menschen, die sie besitzen, zu unterscheiden.
Das Schlüsselwort this wird verwendet, um jedes von einer Klasse erstellte Objekt zu unterscheiden. Es stellt sicher, dass für jedes Objekt, das mit derselben Klasse erstellt wird, die richtigen Daten gespeichert und verarbeitet werden.
Erstellen eines Objekts in JavaScript
Konstruktoren sind in einer Sprache wie JavaScript wichtig, weil sie die Anzahl der Attribute angeben, die ein Objekt einer bestimmten Klasse haben sollte. Einige Sprachen erfordern, dass ein Attribut (eine Variable) deklariert wird, bevor es in einem Konstruktor oder anderen Methoden verwendet werden kann. Bei JavaScript ist dies jedoch nicht der Fall.
Wenn Sie sich den obigen Schülerklassenkonstruktor ansehen, können Sie erkennen, dass ein Objekt dieser Klasse drei Attribute hat.
Erstellen eines Objektbeispiels
Unten sehen Sie ein Beispiel zum Erstellen eines Objekts in JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
Der obige Code verwendet die Student- Klasse, um ein Objekt zu erstellen.
Beim Anlegen eines Objekts einer Klasse müssen Sie das Schlüsselwort new verwenden , gefolgt vom Klassennamen und den Werten, die Sie den jeweiligen Attributen zuweisen möchten. Jetzt haben Sie einen neuen Schüler mit dem Vornamen John, dem Nachnamen Brown und dem Startdatum 2018. Sie haben auch eine konstante Variable: john. Diese Variable ist wichtig, da Sie damit das erstellte Objekt verwenden können.
Ohne die Variable john können Sie mit der Klasse Student immer noch ein neues Objekt erstellen, aber dann gibt es keine Möglichkeit, auf dieses Objekt zuzugreifen und es mit den verschiedenen Methoden der Klasse zu verwenden.
Verwenden von Methoden in JavaScript-Klassen
Eine Methode ist eine Funktion einer Klasse, die verwendet wird, um Operationen an Objekten durchzuführen, die aus der Klasse erstellt wurden. Eine gute Methode zum Hinzufügen zur Schülerklasse ist die Erstellung eines Berichts für jeden Schüler.
Beispiel für Klassenmethoden erstellen
Unten ist ein Beispiel für das Erstellen von Klassenmethoden in JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}
Die Klasse oben enthält eine Methode , die einen Bericht über jeden Schüler erstellt mit der Student – Klasse generieren. Um die Methode report() zu verwenden, müssen Sie ein vorhandenes Objekt der Klasse verwenden, um einen einfachen Funktionsaufruf durchzuführen.
Dank des obigen Beispiels zum Erstellen eines Objekts sollten Sie ein Objekt der Klasse Student haben , das der Variablen john zugewiesen ist. Mit john können Sie nun erfolgreich die Methode report() aufrufen.
Beispiel für die Verwendung von Klassenmethoden
Unten sehen Sie ein Beispiel für die Verwendung von Klassenmethoden in JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);
Der obige Code verwendet die Students- Klasse, um die folgende Ausgabe in der Konsole zu erzeugen:
John Brown started attending this institution in 2018Statische Methoden in JavaScript-Klassen verwenden
Statische Methoden sind einzigartig, da sie die einzigen Methoden in einer JavaScript-Klasse sind, die ohne ein Objekt verwendet werden können.
Aus dem obigen Beispiel können Sie die Methode report() nicht ohne ein Objekt der Klasse verwenden. Dies liegt daran, dass die Methode report() auf die Attribute eines Objekts angewiesen ist, um ein wünschenswertes Ergebnis zu erzielen. Um eine statische Methode zu verwenden, benötigen Sie jedoch nur den Namen der Klasse, die die Methode speichert.
Erstellen eines statischen Methodenbeispiels
Unten ist ein statisches Methodenbeispiel für JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}
Die wichtige Sache zu beachten vom Beispiel oben , dass jede statische Methode mit dem Schlüsselwort static beginnt.
Verwenden eines statischen Methodenbeispiels
Unten ist ein Beispiel für die Verwendung einer statischen Methode in JavaScript.
//calling a static method and printing its result to the console
console.log(Student.endDate(2018));
Die obige Codezeile verwendet die Students- Klasse, um die folgende Ausgabe in der Konsole zu erzeugen:
2022Das Erstellen einer JavaScript-Klasse ist einfach
Es gibt mehrere Dinge, die Sie beachten müssen, wenn Sie eine JavaScript-Klasse erstellen und daraus ein oder mehrere Objekte instanziieren möchten:
- Eine JavaScript – Klasse muss die Klasse Schlüsselwort haben.
- Ein JavaScript-Konstruktor gibt die Anzahl der Werte an, die ein Objekt haben kann.
- Allgemeine Klassenmethoden können nicht ohne ein Objekt verwendet werden.
- Statische Methoden können ohne ein Objekt verwendet werden.
Die Konsole . Die Methode log() wird in diesem Artikel verwendet, um die Ergebnisse der Verwendung sowohl der allgemeinen als auch der statischen Methode in einer JavaScript-Klasse bereitzustellen. Diese Methode ist ein nützliches Werkzeug für jeden JavaScript-Entwickler, da sie beim Debugging-Prozess hilft.
Sich mit der Methode console.log() vertraut zu machen ist eines der wichtigsten Dinge, die Sie als JavaScript-Entwickler tun können.