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, müssen Sie eine Klasse haben.

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

Wenn Sie eine Klasse in JavaScript erstellen, benötigen Sie immer eine grundlegende Komponente – die Klasse Stichwort. 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 Klasse Schlüsselwort (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:

Klasse Klassenname{
//Klasse Körper
}

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.

Klasse Schüler{
Konstruktor (firstName, lastName, startDate){
this.firstName = firstName;
this.nachname = nachname;
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 Konstrukter zu erstellen. Es verwendet die Konstrukteur Schlüsselwort, wie Sie im obigen Beispiel sehen können.

Verwandt: Erfahren Sie, wie Sie Klassen in Java erstellen

Das Konstrukteur im obigen Beispiel nimmt drei Parameter und verwendet die Das Schlüsselwort, 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 Das Schlüsselwort 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.

Verwandt: So deklarieren Sie Variablen in JavaScript

Wenn Sie sich den Schülerklassenkonstruktor oben 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.

//ein neues Objekt erstellen
const john = neuer Student('John', 'Brown', '2018');

Der obige Code verwendet die Student Klasse, um ein Objekt zu erstellen.

Wenn Sie ein Objekt einer Klasse erstellen, müssen Sie die Neu Schlüsselwort 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 das John -Variable können Sie immer noch ein neues Objekt erstellen, indem Sie die Student Klasse, 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.

Klasse Schüler{
Konstruktor (firstName, lastName, startDate){
this.firstName = firstName;
this.nachname = nachname;
this.startDate = startDate;
}
// Methode melden
Prüfbericht(){
return `${this.firstName} ${this.lastName} besucht diese Institution seit ${this.startDate}`
}
}

Die obige Klasse enthält eine Methode, die einen Bericht über jeden Schüler erstellt, der mit dem erstellt wurde Student Klasse. Um die zu verwenden Prüfbericht() -Methode müssen Sie ein vorhandenes Objekt der Klasse verwenden, um einen einfachen Funktionsaufruf durchzuführen.

Dank des obigen „Beispielobjekts erstellen“ sollten Sie ein Objekt der Student Klasse, die der Variablen zugewiesen ist John. Verwenden von John, können Sie nun erfolgreich die Prüfbericht() Methode.

Beispiel für die Verwendung von Klassenmethoden

Unten sehen Sie ein Beispiel für die Verwendung von Klassenmethoden in JavaScript.

//ein neues Objekt erstellen
const john = neuer Student('John', 'Brown', '2018');
//Aufrufen der Report-Methode und Speichern des Ergebnisses in einer Variablen
let result = john.report();
// Ergebnis an die Konsole ausgeben
console.log (Ergebnis);

Der obige Code verwendet die Studenten Klasse, um die folgende Ausgabe in der Konsole zu erzeugen:

John Brown begann im Jahr 2018, diese Institution zu besuchen

Statische 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 nicht verwenden Prüfbericht() Methode ohne ein Objekt der Klasse. Dies liegt daran, dass Prüfbericht() -Methode beruht auf den Attributen eines Objekts, 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.

Klasse Schüler{
Konstruktor (firstName, lastName, startDate){
this.firstName = firstName;
this.nachname = nachname;
this.startDate = startDate;
}
// Methode melden
Prüfbericht(){
return `${this.firstName} ${this.lastName} besucht diese Institution seit ${this.startDate}`
}
//statische Methode
statisches endDate (startDate){
Startdatum + 4 zurückgeben;
}
}

Das Wichtigste aus dem obigen Beispiel ist, dass jede statische Methode mit dem beginnt statisch Stichwort.

Verwenden eines statischen Methodenbeispiels

Unten ist ein Beispiel für die Verwendung einer statischen Methode in JavaScript.

//eine statische Methode aufrufen und ihr Ergebnis an die Konsole ausgeben
console.log (Student.endDate (2018));

Die obige Codezeile verwendet die Studenten Klasse, um die folgende Ausgabe in der Konsole zu erzeugen:

2022

Das 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 Stichwort.
• 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.

Das Konsole.Protokoll() -Methode 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.

Machen Sie sich mit dem vertraut Konsole.log() -Methode ist eines der wichtigsten Dinge, die Sie als JavaScript-Entwickler tun können.

Der ultimative JavaScript-Spickzettel

Holen Sie sich mit diesem Spickzettel eine schnelle Auffrischung von JavaScript-Elementen.

Weiter lesen

Über den Autor