Berechnete Eigenschaften

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

Berechnete Eigenschaften (Computed Properties) sind Getter, die einen Wert berechnen und zurückgeben, anstatt nur gespeicherte Daten zurückzugeben. Sie sehen wie reguläre Eigenschaften aus, berechnen ihren Wert jedoch bei Bedarf.

Werfen wir einen Blick auf das Beispiel. Wir haben ein Objekt mit einer regulären Eigenschaft:

const circle = {
  radius: 5
};

Jetzt fügen wir eine berechnete Eigenschaft mit einem Getter hinzu:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

So greifen wir auf die berechnete Eigenschaft zu:

console.log(circle.diameter); // Ausgabe: 10

Wenn wir den Radius aktualisieren, aktualisiert sich auch der Durchmesser automatisch:

circle.radius = 10;
console.log(circle.diameter); // Ausgabe: 20

Berechnete Eigenschaften sind nützlich, wenn der Wert einer Eigenschaft von anderen Eigenschaften abhängt oder eine Berechnung erfordert.

Aufgabe

Ihnen ist eine Rectangle-Klasse mit den Eigenschaften width und height gegeben. Ihre Aufgabe ist es, berechnete Eigenschaften für area und perimeter hinzuzufügen.

Berechnete Eigenschaft <strong>area</strong> – gibt width × height zurück
Berechnete Eigenschaft <strong>perimeter</strong> – gibt 2 × (width + height) zurück

Spickzettel

Berechnete Eigenschaften (Computed Properties) sind Getter, die einen Wert berechnen und zurückgeben, anstatt nur gespeicherte Daten zurückzugeben. Sie berechnen ihren Wert on-the-fly.

Definieren Sie eine berechnete Eigenschaft mit dem Schlüsselwort get:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

Greifen Sie auf berechnete Eigenschaften wie auf reguläre Eigenschaften zu (ohne Klammern):

console.log(circle.diameter); // Outputs: 10

Berechnete Eigenschaften werden automatisch aktualisiert, wenn sich die Eigenschaften ändern, von denen sie abhängen:

circle.radius = 10;
console.log(circle.diameter); // Outputs: 20

Probier es selbst

import { Rectangle } from './rectangle.js';

// Testcode - nicht ändern
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // Sollte "Area: 50" ausgeben
console.log(`Perimeter: ${rect.perimeter}`); // Sollte "Perimeter: 30" ausgeben