Berechnete Eigenschaften
Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy. Lektion 44 von 56.
Berechnete Eigenschaften sind Getter, die einen Wert berechnen und zurückgeben, anstatt einfach gespeicherte Daten zurückzugeben. Sie sehen wie gewöhnliche Eigenschaften aus, berechnen ihren Wert jedoch spontan.
Sehen wir uns das Beispiel an. Wir haben ein Objekt mit einer regulären Eigenschaft:
const circle = {
radius: 5
};Jetzt fügen wir mithilfe eines Getters eine berechnete Eigenschaft hinzu:
const circle = {
radius: 5,
get diameter() {
return this.radius * 2;
}
};So greifen wir auf die berechnete Eigenschaft zu:
console.log(circle.diameter); // Ausgabe: 10Wenn wir den Radius aktualisieren, wird auch der Durchmesser automatisch aktualisiert:
circle.radius = 10;
console.log(circle.diameter); // Ausgabe: 20Berechnete Eigenschaften sind nützlich, wenn der Wert einer Eigenschaft von anderen Eigenschaften abhängt oder eine Berechnung erfordert.
Aufgabe
Dir ist eine Rectangle-Klasse mit Eigenschaften für Breite und Höhe gegeben. Deine Aufgabe besteht darin, berechnete Eigenschaften für Fläche und Umfang hinzuzufügen.
- Berechnete Eigenschaft
<strong>area</strong>– gibt Breite × Höhe zurück - Berechnete Eigenschaft
<strong>perimeter</strong>– gibt 2 × (Breite + Höhe) zurück
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" ausgebenDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Objektorientierte Programmierung
1Objekte & das this-Schlüsselwort
Kurze Wiederholung: ObjekteMethoden zu Objekten hinzufügenDas this-Schlüsselwort verstehenKonstruktorfunktionenDas new-SchlüsselwortWiederholungs-Challenge7Vererbung & das extends-Schlüsselwort
VererbungDie „ist-ein“-BeziehungDas extends-SchlüsselwortDie super()-MethodeVererben von Eigenschaften & MethodenWiederholungs-Challenge10Polymorphie
Was ist Polymorphie?Geerbte Methoden überschreibenVerwendung von superWiederholungs-Challenge13Komposition vs. Vererbung
Die "hat-ein"- vs. "ist-ein"-BeziehungDie Grenzen tiefer VererbungObjekte zusammenbauen2Code organisieren
Was sind Module?Exportieren mit exportImportieren mit importDefault- vs. benannte Exports5Kapselung & Zugriff
KapselungÖffentliche & private KlassenfelderPrivate MethodenWiederholungs-Herausforderung8OOP-Code strukturieren
Klassen in Modulen organisieren11Projekt: Ein Shape-Renderer
Setup: Shape-Klasse & ExportCircle-Klasse: VererbungOverriding & Area-MethodeStatischer Shape-Zähler14Bibliotheksverwaltungssystem
Entwurf der BibliothekBuch-Klasse mit KompositionValidierung der Buchautoren3Klassen & Objekte
Was ist eine Klasse?Instanzen erstellenEigenschaften und MethodenWiederholungs-Challenge6Projekt: Ein einfaches Bankkonto
Klasse BankAccountEinzahlungen und AuszahlungenKontostand als privates Feld9Statische Methoden & Eigenschaften
Klassenebene vs. InstanzebeneStatische EigenschaftenStatische HilfsmethodenWiederholungs-Challenge12Getter & Setter
Die Schlüsselwörter get und setBerechnete EigenschaftenValidierung und SeiteneffekteWiederholungs-Challenge15Abschluss-Herausforderungen
Spielfiguren-BuilderE-Commerce ProduktsystemUniversitäts-VerwaltungssystemSmart-Home-GerätesystemÜbe selbstständig: Online-JavaScript-Compiler