JavaScript-Klassen: Konstruktor, Methoden und Vererbung

Definition

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Eine Klasse deklarierst du mit dem Schlüsselwort class und dem Namen der Klasse (hier Rectangle).

Constructor: eine besondere Methode, die eine Instanz dieser Klasse initialisiert. Jedes Mal, wenn du eine neue Instanz der Klasse erzeugst, ruft JavaScript den Konstruktor auf.

Methoden in einer Klasse

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width; 
    }
    // Méthode prototype
    area() {
        return console.log(`La zone est ${this.height*this.width}`); 
    }
    // Méthode statique
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`); 
    }
}

const rectangle = new Rectangle(5, 4);  // Instancier la classe
rectangle.area(); 
// La zone est 20
Rectangle.display(rectangle); 
// Height: 5 Width: 4 

• Prototyp-Methode: area() ist eine Prototyp-Methode.
• Statische Methode: display() ist eine statische Methode.

Prototyp-Methode

Eine Prototyp-Methode steht erst zur Verfügung, wenn du eine Instanz der Klasse erzeugt hast. Im Beispiel oben siehst du die Prototyp-Methode in Zeile 17: Du sprichst sie über den Methodennamen am Objekt an, gefolgt von Klammern (eventuelle Parameter kämen in diese Klammern).

Statische Methode

Eine statische Methode rufst du auf, ohne die Klasse zu instanziieren. Statische Methoden hängen an der Klasse selbst, nicht am Objekt. Du kannst sie also nicht auf dem Objekt (rectangle) aufrufen, sondern nur auf der Klasse (Rectangle), wie in Zeile 19 zu sehen.

Vererbung

class Car {
    constructor(brand) {
        this.carname = brand; 
    }
    present() {
        return 'c\'est ' + this.carname;  
    }
}

class Model extends Car {
    constructor(brand, model) {
        super(brand); 
        this.model = model; 
    }
    show() {
        return console.log(`${this.present()} ${this.model}`); 
    }
}

const mycar = new Model("Ford", "Mustang"); 
mycar.show(); 
// c'est Ford Mustang

Für die Vererbung zwischen Klassen nimmst du das Schlüsselwort extends. Der Name der Elternklasse folgt direkt auf extends.

Eine Klasse mit Vererbung übernimmt sämtliche Methoden der anderen Klasse. Im Beispiel oben erbt die Klasse Model alle Methoden der Klasse Car.

Der Aufruf super() verweist auf die Elternklasse. Rufst du super() im Konstruktor auf, führst du den Konstruktor der Elternklasse aus und bekommst Zugriff auf deren Eigenschaften und Methoden.
Vererbung hilft dir, Code wiederzuverwenden: Beim Anlegen einer neuen Klasse greifst du auf Eigenschaften und Methoden einer bestehenden zurück.