Menu
CoddyTech

Die Schlüsselwörter get und set

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

Getter und Setter sind spezielle Methoden, die wie Eigenschaften aussehen, aber tatsächlich Funktionen sind. Sie geben dir Kontrolle darüber, wie auf Eigenschaften zugegriffen wird und wie sie geändert werden.

Erstellen wir eine einfache Person-Klasse:

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  
  // Getter für fullName
  get fullName() {
    return `${this._firstName} ${this._lastName}`;
  }
  
  // Setter für fullName
  set fullName(value) {
    const parts = value.split(' ');
    this._firstName = parts[0];
    this._lastName = parts[1];
  }
}

Der Unterstrich in _firstName und _lastName ist eine Namenskonvention: Er weist andere Entwickler darauf hin, dass diese Eigenschaften intern sind und über den Getter und Setter gelesen und geändert werden sollten, nicht direkt. JavaScript erzwingt dies nicht.

Jetzt können wir diese Getter und Setter wie Eigenschaften verwenden:

// Erstelle eine neue Person
const person = new Person('John', 'Doe');

// Verwende den Getter
console.log(person.fullName); // Ausgabe: John Doe

// Verwende den Setter
person.fullName = 'Jane Smith';

// Der Setter hat die internen Eigenschaften aktualisiert
console.log(person.fullName); // Ausgabe: Jane Smith

Beachte, dass wir diese Methoden nicht mit Klammern aufrufen. Sie verhalten sich wie Eigenschaften, führen aber Code aus, wenn auf sie zugegriffen oder sie geändert werden.

challenge icon

Aufgabe

Dir wird eine User-Klasse mit einer age-Eigenschaft gegeben. Deine Aufgabe ist es, einen Getter und Setter für age hinzuzufügen, die Folgendes tun:

  1. Getter get age(): gibt das gespeicherte Alter zurück
  2. Setter set age(newAge): überprüft, ob das Alter zwischen 0 und 120 liegt
    • Wenn gültig (0-120): speichere es in this._age
    • Wenn ungültig: ändere es nicht und gib "Invalid age!" aus

Probier es selbst

import { User } from './user.js';

// Testcode - nicht ändern
const user = new User("Alice", 25);
console.log(user.age);      // Sollte 25 ausgeben

user.age = 30;
console.log(user.age);      // Sollte 30 ausgeben

user.age = 150;             // Sollte "Invalid age!" anzeigen
console.log(user.age);      // Sollte weiterhin 30 ausgeben (unverändert)

quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Objektorientierte Programmierung

Übe selbstständig: Online-JavaScript-Compiler