Klassenebene vs. Instanzebene

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy. Lektion 31 von 56.

In JavaScript-Klassen gibt es zwei verschiedene Ebenen von Eigenschaften und Methoden:

Instanzebene: Eigenschaften und Methoden, die zu jedem einzelnen aus der Klasse erstellten Objekt gehören.
Klassenebene: Eigenschaften und Methoden, die zur Klasse selbst gehören und nicht zu den Instanzen.

Lassen Sie uns den Unterschied verstehen:

Zuerst schauen wir uns die Member auf Instanzebene an. Erstellen Sie eine reguläre Klasse mit einer Instanzmethode:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Erstellen Sie eine Instanz der Klasse Car:

const myCar = new Car("Toyota");

Rufen Sie die Instanzmethode auf:

console.log(myCar.drive()); // Ausgabe: "The Toyota is driving"

Beachten Sie, dass jede Instanz ihre eigene Kopie der drive-Methode erhält und mithilfe von this auf ihre eigenen Eigenschaften zugreifen kann.

Schauen wir uns nun die Member auf Klassenebene an. Wir fügen unserer Klasse eine statische Methode hinzu. Verwenden Sie das Schlüsselwort static vor dem Methodennamen, um eine Methode zu erstellen, die zur Klasse selbst gehört und nicht zu Instanzen.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Statische Methoden sind nützlich für Hilfsfunktionen, die nicht von spezifischen Instanzdaten abhängen. Die statische Methode wird auf der Klasse selbst aufgerufen, nicht auf Instanzen:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Ausgabe: "Comparing Toyota with Honda"

Der Versuch, eine statische Methode auf einer Instanz aufzurufen, führt zu einem Fehler:

car1.compareModels(car1, car2); // Fehler: car1.compareModels ist keine Funktion

Aufgabe

Du erhältst eine Calculator-Klasse mit nur einem Konstruktor. Deine Aufgabe ist es, zwei Methoden hinzuzufügen:

1. Instanzmethode <strong>add(number)</strong>

Addiert die angegebene Zahl zum aktuellen Wert des Taschenrechners
Aktualisiert this.value und gibt den neuen Wert zurück
*Sie wird für Taschenrechnerinstanzen aufgerufen: calc.add(3)

2. Statische Methode <strong>multiply(num1, num2)</strong>

Nimmt zwei Zahlen entgegen und gibt ihr Produkt zurück
Verwendet NICHT this (statische Methoden verfügen nicht über Instanzdaten)
*Sie wird für die Calculator-Klasse selbst aufgerufen: Calculator.multiply(4, 6)

Probier es selbst

import { Calculator } from './calculator.js';


// Den untenstehenden Code nicht ändern
const calc = new Calculator(5);        // Erstellt einen Taschenrechner mit dem Wert = 5
const result1 = calc.add(3);           // Sollte 3 addieren → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Sollte 4 × 6 multiplizieren = 24
console.log(result1);                   // Erwartet: 8
console.log(result2);                   // Erwartet: 24