Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Getter und Setter | Klassen
Fortgeschrittene JavaScript-Meisterschaft
course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

2. DOM-Manipulation
3. Ereignisse und Ereignisbehandlung
4. Asynchrones JavaScript und APIs

book
Getter und Setter

Getter und Setter bieten eine leistungsstarke Möglichkeit, den Zugriff auf die Eigenschaften eines Objekts in JavaScript zu steuern.

Was sind Getter und Setter?

In JavaScript sind Getter und Setter spezielle Methoden, die einen kontrollierten Zugriff auf die Eigenschaften eines Objekts ermöglichen. Sie geben Ihnen die Flexibilität, zu definieren, wie eine Eigenschaft abgerufen und modifiziert wird, während der interne Zustand des Objekts geschützt wird.

  • Getter: Eine Methode, die verwendet wird, um den Wert einer Eigenschaft abzurufen (get);
  • Setter: Eine Methode, die verwendet wird, um den Wert einer Eigenschaft festzulegen oder zu aktualisieren.

Denken Sie an einen Banktresor. Der Tresor enthält wertvolle Gegenstände (private Eigenschaften), und der Bankangestellte (Getter/Setter) fungiert als Torwächter. Sie können nicht direkt auf den Tresor zugreifen, aber der Angestellte kann Gegenstände für Sie abrufen oder aktualisieren, basierend auf bestimmten Regeln und Validierungen.

Wie man Getter und Setter definiert und verwendet

Getter und Setter werden mit den Schlüsselwörtern get und set innerhalb einer Klasse definiert. Wenn Sie auf eine Eigenschaft zugreifen, wird der Getter automatisch aufgerufen. Ebenso wird beim Ändern einer Eigenschaft der Setter aufgerufen, anstatt die Eigenschaft direkt zu ändern.

12345678910111213141516171819202122232425262728293031323334
class Animal { #type; // Private field constructor(name, type) { this.name = name; this.#type = type; // Assigning the private field } // Getter for the type property get type() { return this.#type; } // Setter for the type property set type(newType) { if (newType) { this.#type = newType; } else { console.log('Invalid type'); } } } const lion = new Animal('Lion', 'Wild'); // Using getter to access the private type console.log(lion.type); // Output: Wild // Using setter to modify the private type lion.type = 'Domestic'; console.log(lion.type); // Output: Domestic // Trying to set an invalid value lion.type = ''; // Output: Invalid type
copy

In diesem Beispiel ist #type eine private Eigenschaft, und wir definieren einen Getter (get type()), um ihren Wert abzurufen, und einen Setter (set type(newType)), um ihn zu ändern. Der Setter enthält eine Validierung, um zu verhindern, dass ein ungültiger Wert gesetzt wird, was zeigt, wie Sie Aktualisierungen privater Daten steuern können.

Vorteile von Gettern und Settern

Kontrollierter Zugriff

  • Getter ermöglichen es Ihnen, zu definieren, wie auf den Wert einer Eigenschaft zugegriffen wird, sodass Sie den Wert verarbeiten oder manipulieren können, bevor er zurückgegeben wird;
  • Setter geben Ihnen die Kontrolle darüber, wie eine Eigenschaft aktualisiert wird, sodass Sie die Daten validieren oder transformieren können, bevor Sie sie einem privaten Feld zuweisen.

Datenschutz

  • Die Verwendung von Gettern und Settern hilft, den internen Zustand eines Objekts zu schützen, indem eine kontrollierte Schnittstelle für die Interaktion bereitgestellt wird;
  • Private Eigenschaften können verborgen bleiben, und Sie können nur die notwendigen Informationen für externen Code freigeben.

Flexibilität

Getter und Setter ermöglichen es Ihnen, zusätzliche Logik wie Validierung oder Protokollierung hinzuzufügen, wenn Sie auf Eigenschaften zugreifen oder diese ändern, ohne die Art und Weise zu ändern, wie externer Code mit dem Objekt interagiert.

Beispiel: Benutzerkonto mit Passwortvalidierung

Stellen Sie sich vor, Sie verwalten Benutzerkonten, bei denen Passwörter bestimmten Sicherheitsstandards entsprechen müssen. Mit einem Setter können Sie die Passwortstärke durchsetzen, während ein Getter eine maskierte Version des Passworts für Anzeigezwecke abrufen könnte.

12345678910111213141516171819202122232425262728293031323334
class UserAccount { #password; // Private field constructor(username, password) { this.username = username; this.#password = password; } // Getter for password (returning a masked version) get password() { return '*'.repeat(this.#password.length); // Mask the password when retrieved } // Setter for password with validation set password(newPassword) { if (newPassword.length >= 8) { this.#password = newPassword; } else { console.log('Password must be at least 8 characters long'); } } } const user = new UserAccount('nick_feather', 'secret123'); // Accessing the password using the getter (masked) console.log(user.password); // Output: ********* // Setting a new valid password using the setter user.password = 'strongPassword123'; console.log(user.password); // Output: *************** // Trying to set an invalid password user.password = '123'; // Output: Password must be at least 8 characters long
copy

In diesem Beispiel gibt der Getter eine maskierte Version des Passworts zurück, um den tatsächlichen Wert zu verbergen, und der Setter erzwingt die Passwortvalidierung, um sicherzustellen, dass das Passwort mindestens 8 Zeichen lang ist.

Beispiel mit Validierungslogik unter Verwendung von Gettern und Settern

Hier ist ein weiteres Beispiel, bei dem wir das Alter einer Person verwalten und sicherstellen, dass der Wert in einem vernünftigen Bereich bleibt:

12345678910111213141516171819202122232425262728293031323334
class Person { #age; // Private field constructor(name, age) { this.name = name; this.#age = age; } // Getter for age get age() { return this.#age; } // Setter for age with validation set age(newAge) { if (newAge > 0 && newAge < 120) { this.#age = newAge; } else { console.log('Invalid age'); } } } const peter = new Person('Peter', 30); // Accessing the age using the getter console.log(peter.age); // Output: 30 // Setting a new valid age using the setter peter.age = 35; console.log(peter.age); // Output: 35 // Trying to set an invalid age peter.age = 150; // Output: Invalid age
copy

Dieses Beispiel zeigt, wie ein Setter sicherstellen kann, dass ein Alter innerhalb eines gültigen Bereichs bleibt, um zu verhindern, dass ungültige Daten gespeichert werden.

1. Was ist der Hauptzweck der Verwendung von Gettern?

2. Im folgenden Code, was wird console.log(user.password); ausgeben?

Was ist der Hauptzweck der Verwendung von Gettern?

Was ist der Hauptzweck der Verwendung von Gettern?

Wählen Sie die richtige Antwort aus

Im folgenden Code, was wird `console.log(user.password);` ausgeben?

Im folgenden Code, was wird console.log(user.password); ausgeben?

Wählen Sie die richtige Antwort aus

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 9
We're sorry to hear that something went wrong. What happened?
some-alt