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

Ihnen wird eine Calculator-Klasse zur Verfügung gestellt, die nur einen Konstruktor enthält. Ihre 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 auf Calculator-Instanzen aufgerufen: calc.add(3)

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

Nimmt zwei Zahlen entgegen und gibt deren Produkt zurück
Verwendet this NICHT (statische Methoden haben keine Instanzdaten)
*Sie wird auf der Calculator-Klasse selbst aufgerufen: Calculator.multiply(4, 6)

Spickzettel

JavaScript-Klassen haben zwei Ebenen von Eigenschaften und Methoden:

Instanzebene: Gehören zu jedem einzelnen Objekt, das aus der Klasse erstellt wurde
Klassenebene: Gehören zur Klasse selbst, nicht zu Instanzen

Instanzmethoden:

Reguläre Methoden, die mit this auf Instanzeigenschaften zugreifen können:

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

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

Statische Methoden:

Verwenden Sie das Schlüsselwort static, um Methoden zu erstellen, die zur Klasse selbst gehören. Sie werden auf der Klasse aufgerufen, nicht auf Instanzen:

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

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

// Aufruf auf der Klasse selbst
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// Der Aufruf auf einer Instanz verursacht einen Fehler
car1.compareModels(car1, car2); // Fehler: car1.compareModels is not a function

Statische Methoden sind nützlich für Hilfsfunktionen, die nicht von spezifischen Instanzdaten abhängen.

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