Javascript Neue Klasse

__del__ | exp | iat | JavaScript | mean | open | sin

Michael Zippo 04.11.2021

JavaScript basiert auf Prototypen. Jedes Mal, wenn Sie ein Objekt deklarieren, wird eine Prototypeigenschaft erstellt, die die mit diesem Objekt verknüpften Eigenschaften und Methoden erweitert.

In den letzten Jahren haben viele JavaScript-Entwickler nach Möglichkeiten gesucht, Objekte zum Einbetten auszurichten. Designobjekte in ihrem Code. Dies führte zu einem neuen Objekttyp in JavaScript, der Klasse genannt wird, die einen Prototyp erweitert.

In diesem Leitfaden werden wir besprechen, was Klassen sind, warum sie verwendet werden und wie Sie eine implementieren können Klasse in Ihrem Code. Wir geben ein Beispiel, um Ihnen den Einstieg in Klassen zu erleichtern.

Was ist eine JavaScript-Klasse?

Klassen sind eine Möglichkeit, ein Modell für ein Objekt zu deklarieren.

Wenn Sie mit objektorientierten Programmiersprachen vertraut sind, wissen Sie, dass sie stark von Klassen und Objekten abhängig sind. Eine Klasse ist wie eine Vorlage für einen Datentyp: Sie sagt aus, welche Daten gespeichert und auf welche Methoden zugegriffen werden kann. Ein Objekt ist eine Instanz dieser Klasse.

Ein Beispiel für eine Klasse wäre Book. Diese Klasse würde die Blaupause dafür enthalten, welche Informationen in den Büchern gespeichert werden könnten und wie diese Daten geändert werden könnten. Ein Objekt könnte eine Straßenbahn namens Desire sein, die ein individuelles Buch ist.

In JavaScript sind Klassen das, was wir syntaktischen Zucker nennen. Die Syntax der Klassen ist nett zu haben, aber sie fügen nicht unbedingt neue Funktionen hinzu.

Klassen werden häufig in modernen JavaScript-Frameworks wie React und Next.js verwendet.

Lektionen in Bezug auf Funktionen

Wenn Sie sich an eine Sache aus diesem Artikel erinnern, sei es diese: Klassen sind ganz normale Funktionen

Der einzige Unterschied zwischen einer Klasse und einem Funktionsausdruck ist die Art und Weise, wie sie deklariert sind, Funktionen verwenden das Schlüsselwort und Klassen verwenden die Klasse . Technisch gesehen, können Sie eine Klasse deklarieren, ohne das Schlüsselwort class zu verwenden

wir können sagen, dass sie gleich sind, indem wir zwei Funktionen erstellen und ihre Prototypen drucken.

Unser Klassen- und Funktionsausdruck gibt zurück:

function ()

die beiden unsere Funktionen und Klassen verwenden die gleiche Bogenlesung basierend auf einem Prototyp.

Wie definieren Sie eine Klasse? Das ist eine gute Frage.

Sie können eine Klasse mit dem Schlüsselwort definieren. Nachdem Sie eine Klasse definiert haben, können Sie sie mit der Funktion constructor () mit Standardwerten initialisieren.

Öffnen Sie eine JavaScript-Konsole und fügen Sie diesen Code ein:.

Dies erstellt eine Klasse namens Book. Unsere Klasse kann zwei Werte speichern, Titel und Autor, die wir in unserer Klassenkonstruktionsmethode definiert haben. Um ein Objekt dieser Klasse zu erstellen, könnten wir diesen Code verwenden:

Wir können die Werte unserer Klasse wie jedes Objekt abrufen:

Unser Code gibt zurück:. Einer der Vorteile der Verwendung von Klassen für Prototypen besteht darin, dass Sie eine Methode innerhalb einer Klasse deklarieren können. Das bedeutet, dass Sie nicht die prototype-Syntax verwenden müssen, um einer vorhandenen Funktion eine neue Methode hinzuzufügen.

Nehmen wir dieses Beispiel:.

Wir haben eine Methode namens GetDetails () deklariert, die in unserer Klasse existiert. Es ist schön, weil es unseren gesamten Code gruppiert hält. Wir rufen unsere Funktion GetDetails() auf:

Unser Code gibt zurück:

Ein Wunsch namens Streetcar ist ein Buch von Tennessee Williams

Lektion erben

Wie in jeder objektorientierten Struktur können Klassen Eigenschaften von anderen Klassen erben.

Vererbung bezieht sich auf einen Prozess, in dem eine untergeordnete Klasse kann auf die Methoden und Daten einer übergeordneten Klasse zugreifen. Um von einer Klasse zu erben, können Sie das Schlüsselwort Extend verwenden. Erstellen Sie eine JavaScript-Datei oder öffnen Sie Ihre JavaScript-Konsole und fügen Sie diesen Code ein:

Wir haben eine Klasse namens Fiktion erstellt, die die Klasse aus dem Buch verwendet, das wir zuvor als Projekt deklariert haben. In unserem Code haben wir das Schlüsselwort super () verwendet, um den Titel und die Werte „Äã‚Äãvom Autor der übergeordneten Klasse, nämlich Book, zu erben. Also haben wir ein neues Attribut definiert, fiction, dessen Wert standardmäßig auf true gesetzt ist

Unser Code gibt zurück: wahr. Die fiction-Klasse speichert ein Element namens fiction, das standardmäßig wahr ist. Wenn wir versucht haben, von einer Instanz der Book-Klasse aus auf diesen Wert zuzugreifen, wird nichts zurückgegeben. Tatsächlich ist "Fiction" in unserem Belletristikunterricht zugänglich.

Getter und Setter

Wenn Sie mit Klassen arbeiten, müssen Sie die Getter- und Setter-Funktionen verwenden.

Get-Funktionen ermöglichen es Ihnen, Methoden einer Klasse abzurufen. Mit Setter-Funktionen können Sie den Wert eines bestimmten Elements in einer Klasse ändern. Diese Funktionen werden mit den Schlüsselwörtern get bzw. together angegeben

In diesem Beispiel haben wir zwei Methoden namens author deklariert. Eine dieser Methoden ermöglicht es uns, den Wert von author abzurufen; das ist unsere get-Methode. Die andere Methode ermöglicht es uns, den Autor-Wert zu ändern

Wir initialisierte ein Objekt namens tra m und gab ihm den Titel A Streetcar Named Desire. Wir haben dann den Autor-Wert Tennessee Williams unter Verwendung des Komponisten, den wir in unserem Code definiert haben. Schließlich haben wir den Autor-Wert auf der Konsole unter Verwendung von ausgedruckt play-Methode.

Fazit

Obwohl Klassen nicht der neuen JavaScript-Funktionalität entsprechen, machen sie das Schreiben von Funktionen leichter verständlich, wenn Sie an objektorientierte Programmierung gewöhnt sind.

Abstrakte Designklassen, die auf einem JavaScript-Prototypen basieren und ihn objektorientierter erscheinen lassen. Das Wort „Aussehen“ ist entscheidend, denn denken Sie daran, dass Klassen Funktionen sind. Klassen sind nichts anderes als syntaktischer Zucker.