Klassen und Objekte in JavaScript: Einführung in ES6

Im vorigen Kapitel hast du gesehen, wie du in JavaScript mit Events arbeitest. In diesem Kapitel geht es um Klassen und Objekte in JavaScript.

Es lohnt sich, Klassen und Objekte in JavaScript zu verstehen: Mit ihnen baust du komplexere Datenstrukturen auf und hältst deinen Code besser sortiert. Bevor du dich an Klassen und Objekte machst, solltest du die Grundlagen der objektorientierten Programmierung kennen.

Was ist eine Klasse in JavaScript?

Eine Klasse ist eine Vorlage, aus der sich Objekte erzeugen lassen. Sie legt fest, welche Eigenschaften und Methoden diese Objekte haben. Über Klassen erzeugst du also mehrere Objekte, die sich dieselben Eigenschaften und Methoden teilen, in vielen Fällen ausgesprochen praktisch.

Eine Klasse deklarieren

Eine Klasse legst du in JavaScript mit dieser Syntax an:

class MaClasse {
  // Konstruktor der Klasse
  constructor() {
    // Eigenschaften und Methoden der Klasse initialisieren
  }

// Methoden der Klasse
  maMethode() {
    // Code der Methode
  }
}

Konstruktor und Methoden einer Klasse

Zur Definition einer Klasse in JavaScript gehört der Konstruktor: eine besondere Methode, die ein Objekt dieser Klasse erzeugt und initialisiert.

Der Konstruktor einer Klasse wird mit dem Schlüsselwort „constructor“ definiert. Zum Beispiel:

// Konstruktor der Klasse
constructor() {
// Eigenschaften und Methoden der Klasse initialisieren
}

Die Methoden einer Klasse definierst du wie Funktionen, nur ohne das Schlüsselwort „function“.

// Methoden der Klasse
maMethode() {
 // Code der Methode
}

Auf die Methoden eines Objekts greifst du genauso zu wie auf seine Eigenschaften, mit dieser Syntax: monObjet.maMethode();

const monObjet = new MaClasse();
monObjet.maMethode();

Vererbung mit Klassen

Vererbung ist ein Kernkonzept der objektorientierten Programmierung (OOP). Dabei entsteht eine neue Klasse aus einer bestehenden und übernimmt deren Eigenschaften und Methoden. So verwendest du Code wieder und organisierst deine Anwendung leichter.

In JavaScript funktioniert Vererbung über die Syntax „extends“. Hier ein Beispiel für eine Klasse „Enfant“, die von einer Klasse „Parent“ erbt:

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Bonjour, je suis Marie

Die Methode super verwenden

Mit super rufst du aus einer Kindklasse heraus eine Methode der Elternklasse auf. Angenommen, du hast eine Klasse Animal mit einer Methode „move()“, die festlegt, wie sich Tiere fortbewegen, und eine Klasse Chat, die von Animal erbt. Dann rufst du aus der Klasse Chat heraus mit super die Methode „move()“ der Klasse Animal auf. Hier ein Codebeispiel:

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move();
// gibt "Je me déplace en sautant" und dann "Je me déplace" aus

Statische Methoden

Statische Methoden gehören zur Klasse selbst, nicht zu ihren Instanzen. Sie lassen sich aufrufen, ohne die Klasse zu instanziieren. Du kannst zum Beispiel in der Klasse Animal eine statische Methode „getAnimalType()“ definieren, die den Typ des Tiers zurückgibt. Hier ein Codebeispiel:

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // gibt 'Animal' aus

Auf Instanzen der Klasse lassen sich statische Methoden nicht aufrufen. Rufst du „getAnimalType()“ auf einer Instanz der Klasse Animal auf, bekommst du einen Fehler.

Wie bearbeitest du die Eigenschaften deines Objekts?

Du kannst dem Konstruktor der Klasse auch Parameter übergeben, um Eigenschaften des Objekts zu initialisieren:

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Auf eine Eigenschaft eines Objekts greifst du mit dieser Syntax zu:

monObjet.maPropriete;

Eine Eigenschaft eines Objekts änderst du mit dieser Syntax:

monObjet.maPropriete = "Nouvelle valeur";

Zum Löschen einer Eigenschaft nimmst du den Operator „delete“, so:

delete monObjet.maPropriete;

Eine Eigenschaft, die auf dem Prototyp des Objekts definiert ist, lässt sich nicht löschen. Wie du mit geerbten Eigenschaften umgehst, steht im folgenden Abschnitt zur Vererbung mit Objekten.

Getter und Setter in der Klasse nutzen

Getter und Setter sind Methoden, mit denen du die Eigenschaften eines Objekts kontrolliert ausliest und änderst. Sie kommen vor allem dann zum Einsatz, wenn beim Lesen oder Ändern einer Eigenschaft eine besondere Logik greifen soll.

Hier ein Beispiel für Getter und Setter in einer Klasse:

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

// Getter
  get propriete() {
    return this._propriete;
  }

// Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // gibt 'valeur initiale' aus

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // gibt 'nouvelle valeur' aus

Getter und Setter sind Methoden, keine Eigenschaften. Um ihren Wert abzurufen, nimmst du also die Syntax objet.propriete() statt objet.propriete (ohne Klammern).

Im Beispiel oben liest ein Getter den Wert der Eigenschaft _propriete aus, ein Setter ändert ihn. Die Eigenschaft _propriete haben wir im Konstruktor der Klasse über das Schlüsselwort this definiert. Sie ist privat und lässt sich nur über Getter und Setter ändern.

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

get maPropriete() {
    return this._maPropriete;
  }

set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Gibt 'ma valeur' aus
monObj.maPropriete = 42; // Gibt 'La valeur

Fazit

Du hast gesehen, wie du Klassen und Objekte einsetzt, um deinen JavaScript-Code klarer zu strukturieren, und wie du Objekte aus Klassen erzeugst und bearbeitest, über den Konstruktor und die Methoden. Dazu kam die Vererbung mit Klassen samt der Methode super und den statischen Methoden. Zum Schluss ging es um Getter und Setter, mit denen du den Zugriff auf die Eigenschaften eines Objekts und deren Änderung steuerst.

Im nächsten Kapitel sehen wir, wie du Fehler behandelst und deinen Code mit try-catch debuggst und welche Debugging-Werkzeuge dein Browser mitbringt. Damit verstehst du besser, was in deinem Code passiert, und korrigierst ihn bei Bedarf.