JavaScript-Klassen: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der JavaScript-Klassen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir werden dies Schritt für Schritt angehen. Am Ende dieses Tutorials wirst du in der Lage sein, deine eigenen Klassen wie ein Profi zu erstellen!

Was sind JavaScript-Klassen?

Stell dir vor, du baust einen virtuellen Zoo. Du würdest nicht jede Tierart einzeln beschreiben wollen, oder? Genau hier kommen Klassen ins Spiel. Eine Klasse ist wie ein Bauplan für die Erstellung von Objekten. Sie definiert, welche Eigenschaften und Verhaltensweisen alle Objekte dieser Art haben sollten.

Lassen wir mit einem einfachen Beispiel beginnen:

class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}

makeSound() {
console.log("Das Tier macht einen Laut");
}
}

In diesem Beispiel ist Animal unsere Klasse. Es ist so, als ob man sagt: "Jedes Tier in unserem Zoo hat einen Namen, eine Art und die Fähigkeit, Geräusche zu machen."

Definition von JavaScript-Klassen

Um eine Klasse in JavaScript zu definieren, verwenden wir das class-Schlüsselwort, gefolgt vom Namen der Klasse. Klassenamen beginnen typischerweise mit einem Großbuchstaben – das ist nicht erforderlich, aber es ist eine gängige Konvention, die dabei hilft, Klassen von anderen Codearten zu unterscheiden.

Die constructor()-Methode

Die constructor()-Methode ist eine besondere Methode zur Erstellung und Initialisierung von Objekten, die mit einer Klasse erstellt wurden. Sie wird automatisch aufgerufen, wenn wir ein neues Objekt aus dieser Klasse erstellen.

class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}

Hier sind title, author und year Eigenschaften, die jedes Book-Objekt haben wird. Das this-Schlüsselwort bezieht sich auf das gerade erstellte Objekt.

Erstellung von JavaScript-Objekten

Nun, da wir unsere Klasse haben, lassen uns einige Objekte erstellen!

let myBook = new Book("Der groβe Gatsby", "F. Scott Fitzgerald", 1925);
console.log(myBook.title); // Ausgabe: Der groβe Gatsby

Das new-Schlüsselwort wird verwendet, um eine neue Instanz unserer Book-Klasse zu erstellen. Es ist so, als ob man sagt: "Hey JavaScript, bitte mache mir ein neues Buch basierend auf diesem Book-Bauplan!"

JavaScript-Klassenmethoden

Methoden sind Funktionen, die zu einer Klasse gehören. Sie definieren die Verhaltensweisen, die Objekte der Klasse ausführen können.

class Dog {
constructor(name) {
this.name = name;
}

bark() {
console.log(`${this.name} sagt: Wuff wuff!`);
}

fetch(item) {
console.log(`${this.name} apportiert den ${item}`);
}
}

let myDog = new Dog("Buddy");
myDog.bark(); // Ausgabe: Buddy sagt: Wuff wuff!
myDog.fetch("Ball"); // Ausgabe: Buddy apportiert den Ball

In diesem Beispiel sind bark() und fetch() Methoden der Dog-Klasse. Jedes Dog-Objekt, das wir erstellen, wird diese Fähigkeiten haben.

Arten von JavaScript-Klassen

JavaScript unterstützt zwei Hauptarten von Klassen:

1. Deklaration: Das ist das, was wir bisher verwendet haben.

   class Rectangle {
   // Klassenkörper
   }

2. Ausdruck: Klassen können auch in Ausdrücken definiert werden.

   let Rectangle = class {
   // Klassenkörper
   };

Beide erzielen das gleiche Ergebnis, aber Klassen-Deklarationen sind häufiger und einfacher zu lesen.

JavaScript-Klassenhoisting

Im Gegensatz zu Funktionsdeklarationen werden Klassen-Deklarationen nicht gehoistet. Das bedeutet, du kannst eine Klasse nicht verwenden, bevor sie in deinem Code definiert ist.

// Dies wird einen Fehler werfen
let p = new Rectangle(); // ReferenceError

class Rectangle {}

Definiere immer deine Klassen, bevor du sie verwendest!

Strict Mode mit Klassen

Hier ist ein interessantes Fakten: Der Körper einer Klasse wird immer in strengem Modus ausgeführt. Was bedeutet das? Nun, es ist so, als hättest du einen strengen Lehrer, der dir nicht erlaubt, schlampigen Code zu schreiben. Zum Beispiel:

class StrictClass {
method() {
undeclaredVariable = 5; // Dies wird einen Fehler werfen
}
}

Im strengen Modus musst du deine Variablen.deklarieren, bevor du sie verwendest. Es hilft, häufige Codierungsfehler zu fangen und deinen Code sauber zu halten!

Tabelle der Klassenmethoden

Hier ist eine praktische Tabelle einiger gängiger klassenbezogener Methoden:

Methode	Beschreibung
constructor()	Initialisiert eine neue Instanz der Klasse
static	Definiert eine statische Methode für eine Klasse
extends	Erzeugt eine Klasse als Kind einer anderen Klasse
super	Ruft den Constructor der Elternklasse auf
get	Definiert eine Getter-Methode
set	Definiert eine Setter-Methode

Schlussfolgerung

Glückwunsch! Du hast gerade die ersten Schritte in die Welt der JavaScript-Klassen gemacht. Erinnere dich daran, dass Übung den Meister macht. Versuche, deine eigenen Klassen zu erstellen – vielleicht eine Car-Klasse mit Methoden wie startEngine() und drive(), oder eine Superhero-Klasse mit einer useSpecialPower()-Methode.

Klassen sind ein leistungsfähiges Werkzeug in JavaScript, das es ermöglicht, organisierten, wiederverwendbaren Code zu erstellen. Sie sind wie die Lego-Steine des Programmierens –单独看起来很简单，但组合在一起可以构建惊人的事物。

Weiterschreiben, weiterlernen, und bevor du es bemerkst, wirst du komplexe Anwendungen mit Leichtigkeit erstellen. Frohes Coden, zukünftige Entwickler!

Credits: Image by storyset