Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Eigenschappen Beheren met Getters en Setters | Beheersing van JavaScript-Klassen en Overerving
Geavanceerde JavaScript-Beheersing

bookEigenschappen Beheren met Getters en Setters

Getters en setters bieden een krachtige manier om de toegang tot de eigenschappen van een object in JavaScript te beheren.

Wat zijn Getters en Setters?

In JavaScript zijn getters en setters speciale methoden die gecontroleerde toegang tot de eigenschappen van een object mogelijk maken. Ze bieden flexibiliteit om te bepalen hoe een eigenschap wordt opgehaald en aangepast, terwijl de interne status van het object wordt beschermd.

  • Getter: Een methode die wordt gebruikt om de waarde van een eigenschap op te halen;
  • Setter: Een methode die wordt gebruikt om de waarde van een eigenschap in te stellen of bij te werken.

Denk aan een bankkluis. De kluis bevat waardevolle items (privé-eigenschappen), en de bankmedewerker (getter/setter) fungeert als poortwachter. Je hebt geen directe toegang tot de kluis, maar de medewerker kan items voor je ophalen of bijwerken op basis van bepaalde regels en validaties.

Hoe Getters en Setters te Definiëren en te Gebruiken

Getters en setters worden gedefinieerd met behulp van de sleutelwoorden get en set binnen een klasse. Wanneer je een eigenschap benadert, wordt de getter automatisch aangeroepen. Op dezelfde manier wordt bij het aanpassen van een eigenschap de setter aangeroepen in plaats van de eigenschap direct te wijzigen.


              
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 dit voorbeeld is #type een privé-eigenschap, en definiëren we een getter (get type()) om de waarde op te halen en een setter (set type(newType)) om deze te wijzigen. De setter bevat validatie om te voorkomen dat een ongeldige waarde wordt ingesteld, waarmee wordt aangetoond hoe updates aan privégegevens kunnen worden beheerst.

Voordelen van getters en setters

Gecontroleerde Toegang

  • Getters stellen u in staat te bepalen hoe de waarde van een eigenschap wordt benaderd, waardoor u de waarde kunt verwerken of manipuleren voordat deze wordt geretourneerd;
  • Setters geven u controle over hoe een eigenschap wordt bijgewerkt, zodat u de gegevens kunt valideren of transformeren voordat deze aan een privéveld worden toegewezen.

Gegevensbescherming

  • Het gebruik van getters en setters helpt de interne staat van een object te beschermen door een gecontroleerde interface voor interactie te bieden;
  • Privé-eigenschappen kunnen verborgen blijven, en u kunt alleen de noodzakelijke informatie aan externe code blootstellen.

Flexibiliteit

Getters en setters maken het mogelijk om extra logica toe te voegen—zoals validatie of logging—bij het benaderen of wijzigen van eigenschappen zonder de manier waarop externe code met het object omgaat te veranderen.

Voorbeeld: Gebruikersaccount met Wachtwoordvalidatie

Stel u beheert gebruikersaccounts waarbij wachtwoorden aan bepaalde beveiligingsnormen moeten voldoen. Met een setter kunt u de wachtwoordsterkte afdwingen, terwijl een getter een gemaskeerde versie van het wachtwoord kan ophalen voor weergavedoeleinden.


              
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 dit voorbeeld retourneert de getter een gemaskeerde versie van het wachtwoord om de werkelijke waarde te verbergen, en zorgt de setter voor wachtwoordvalidatie, waarbij wordt gegarandeerd dat het wachtwoord minimaal 8 tekens lang is.

Voorbeeld met validatielogica met getters en setters

Hier is een ander voorbeeld waarin we de leeftijd van een persoon beheren en ervoor zorgen dat de waarde binnen een redelijk bereik blijft:


              
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

Dit voorbeeld laat zien hoe een setter ervoor kan zorgen dat een leeftijd binnen een geldig bereik blijft, waardoor wordt voorkomen dat ongeldige gegevens worden opgeslagen.

1. Wat is het primaire doel van het gebruik van getters?

2. Wat zal console.log(user.password); weergeven in de volgende code?

question mark

Wat is het primaire doel van het gebruik van getters?

Select the correct answer

question mark

Wat zal console.log(user.password); weergeven in de volgende code?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 9

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain the difference between getters and setters in more detail?

How do private fields work with getters and setters in JavaScript?

Can you provide more real-world examples of using getters and setters?

Awesome!

Completion rate improved to 2.22

bookEigenschappen Beheren met Getters en Setters

Veeg om het menu te tonen

Getters en setters bieden een krachtige manier om de toegang tot de eigenschappen van een object in JavaScript te beheren.

Wat zijn Getters en Setters?

In JavaScript zijn getters en setters speciale methoden die gecontroleerde toegang tot de eigenschappen van een object mogelijk maken. Ze bieden flexibiliteit om te bepalen hoe een eigenschap wordt opgehaald en aangepast, terwijl de interne status van het object wordt beschermd.

  • Getter: Een methode die wordt gebruikt om de waarde van een eigenschap op te halen;
  • Setter: Een methode die wordt gebruikt om de waarde van een eigenschap in te stellen of bij te werken.

Denk aan een bankkluis. De kluis bevat waardevolle items (privé-eigenschappen), en de bankmedewerker (getter/setter) fungeert als poortwachter. Je hebt geen directe toegang tot de kluis, maar de medewerker kan items voor je ophalen of bijwerken op basis van bepaalde regels en validaties.

Hoe Getters en Setters te Definiëren en te Gebruiken

Getters en setters worden gedefinieerd met behulp van de sleutelwoorden get en set binnen een klasse. Wanneer je een eigenschap benadert, wordt de getter automatisch aangeroepen. Op dezelfde manier wordt bij het aanpassen van een eigenschap de setter aangeroepen in plaats van de eigenschap direct te wijzigen.


              
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 dit voorbeeld is #type een privé-eigenschap, en definiëren we een getter (get type()) om de waarde op te halen en een setter (set type(newType)) om deze te wijzigen. De setter bevat validatie om te voorkomen dat een ongeldige waarde wordt ingesteld, waarmee wordt aangetoond hoe updates aan privégegevens kunnen worden beheerst.

Voordelen van getters en setters

Gecontroleerde Toegang

  • Getters stellen u in staat te bepalen hoe de waarde van een eigenschap wordt benaderd, waardoor u de waarde kunt verwerken of manipuleren voordat deze wordt geretourneerd;
  • Setters geven u controle over hoe een eigenschap wordt bijgewerkt, zodat u de gegevens kunt valideren of transformeren voordat deze aan een privéveld worden toegewezen.

Gegevensbescherming

  • Het gebruik van getters en setters helpt de interne staat van een object te beschermen door een gecontroleerde interface voor interactie te bieden;
  • Privé-eigenschappen kunnen verborgen blijven, en u kunt alleen de noodzakelijke informatie aan externe code blootstellen.

Flexibiliteit

Getters en setters maken het mogelijk om extra logica toe te voegen—zoals validatie of logging—bij het benaderen of wijzigen van eigenschappen zonder de manier waarop externe code met het object omgaat te veranderen.

Voorbeeld: Gebruikersaccount met Wachtwoordvalidatie

Stel u beheert gebruikersaccounts waarbij wachtwoorden aan bepaalde beveiligingsnormen moeten voldoen. Met een setter kunt u de wachtwoordsterkte afdwingen, terwijl een getter een gemaskeerde versie van het wachtwoord kan ophalen voor weergavedoeleinden.


              
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 dit voorbeeld retourneert de getter een gemaskeerde versie van het wachtwoord om de werkelijke waarde te verbergen, en zorgt de setter voor wachtwoordvalidatie, waarbij wordt gegarandeerd dat het wachtwoord minimaal 8 tekens lang is.

Voorbeeld met validatielogica met getters en setters

Hier is een ander voorbeeld waarin we de leeftijd van een persoon beheren en ervoor zorgen dat de waarde binnen een redelijk bereik blijft:


              
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

Dit voorbeeld laat zien hoe een setter ervoor kan zorgen dat een leeftijd binnen een geldig bereik blijft, waardoor wordt voorkomen dat ongeldige gegevens worden opgeslagen.

1. Wat is het primaire doel van het gebruik van getters?

2. Wat zal console.log(user.password); weergeven in de volgende code?

question mark

Wat is het primaire doel van het gebruik van getters?

Select the correct answer

question mark

Wat zal console.log(user.password); weergeven in de volgende code?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 9
some-alt