Lære Håndtering av Egenskaper med Getters og Setters | Mastering JavaScript-klasser og Arv

Gettere og settere gir en effektiv måte å kontrollere tilgangen til et objekts egenskaper i JavaScript.

Hva er gettere og settere?

I JavaScript er gettere og settere spesielle metoder som gir kontrollert tilgang til et objekts egenskaper. De gir fleksibilitet til å definere hvordan en egenskap hentes og endres, samtidig som objektets interne tilstand beskyttes.

Getter: En metode som brukes til å hente (lese) verdien av en egenskap;
Setter: En metode som brukes til å sette eller oppdatere verdien av en egenskap.

Tenk på en bankboks. Boksen inneholder verdifulle gjenstander (private egenskaper), og bankfunksjonæren (getter/setter) fungerer som portvokter. Du kan ikke få tilgang til boksen direkte, men funksjonæren kan hente eller oppdatere gjenstander for deg basert på bestemte regler og valideringer.

Hvordan definere og bruke gettere og settere

Gettere og settere defineres ved å bruke nøkkelordene get og set inne i en klasse. Når du får tilgang til en egenskap, blir getter automatisk kalt. På samme måte, når du endrer en egenskap, blir setter kalt i stedet for å endre egenskapen direkte.


              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

I dette eksemplet er #type en privat egenskap, og vi definerer en getter (get type()) for å hente verdien og en setter (set type(newType)) for å endre den. Setteren inkluderer validering for å forhindre at en ugyldig verdi settes, og viser hvordan du kan kontrollere oppdateringer av private data.

Fordeler med getters og setters

Kontrollert tilgang

Gettere lar deg definere hvordan en egenskaps verdi hentes, slik at du kan behandle eller manipulere verdien før den returneres;
Settere gir deg kontroll over hvordan en egenskap oppdateres, slik at du kan validere eller transformere dataene før de tilordnes et privat felt.

Databeskyttelse

Bruk av gettere og settere bidrar til å beskytte den interne tilstanden til et objekt ved å tilby et kontrollert grensesnitt for interaksjon;
Private egenskaper kan forbli skjult, og du kan kun eksponere nødvendig informasjon til ekstern kode.

Fleksibilitet

Gettere og settere gir mulighet til å legge til ekstra logikk—som validering eller logging—ved tilgang til eller endring av egenskaper uten å endre hvordan ekstern kode samhandler med objektet.

Eksempel: Brukerkonto med passordvalidering

Tenk deg at du administrerer brukerkontoer der passord må oppfylle visse sikkerhetskrav. Ved å bruke en setter kan du håndheve passordstyrke, mens en getter kan hente en maskert versjon av passordet for visning.


              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

I dette eksemplet returnerer getter-en en maskert versjon av passordet for å skjule den faktiske verdien, og setter-en håndhever passordvalidering ved å sikre at passordet er minst 8 tegn langt.

Eksempel med valideringslogikk ved bruk av getters og setters

Her er et annet eksempel hvor vi håndterer en persons alder og sørger for at verdien holder seg innenfor et rimelig område:


              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

Dette eksemplet viser hvordan en setter kan sikre at en alder forblir innenfor et gyldig område, og forhindrer at ugyldige data lagres.

1. Hva er hovedformålet med å bruke getters?

2. Hva vil `console.log(user.password);` skrive ut i følgende kode?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 9

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

Sveip for å vise menyen

Gettere og settere gir en effektiv måte å kontrollere tilgangen til et objekts egenskaper i JavaScript.

Hva er gettere og settere?

Getter: En metode som brukes til å hente (lese) verdien av en egenskap;
Setter: En metode som brukes til å sette eller oppdatere verdien av en egenskap.

Hvordan definere og bruke gettere og settere


              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

Fordeler med getters og setters

Kontrollert tilgang

Gettere lar deg definere hvordan en egenskaps verdi hentes, slik at du kan behandle eller manipulere verdien før den returneres;
Settere gir deg kontroll over hvordan en egenskap oppdateres, slik at du kan validere eller transformere dataene før de tilordnes et privat felt.

Databeskyttelse

Bruk av gettere og settere bidrar til å beskytte den interne tilstanden til et objekt ved å tilby et kontrollert grensesnitt for interaksjon;
Private egenskaper kan forbli skjult, og du kan kun eksponere nødvendig informasjon til ekstern kode.

Fleksibilitet

Gettere og settere gir mulighet til å legge til ekstra logikk—som validering eller logging—ved tilgang til eller endring av egenskaper uten å endre hvordan ekstern kode samhandler med objektet.

Eksempel: Brukerkonto med passordvalidering


              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

I dette eksemplet returnerer getter-en en maskert versjon av passordet for å skjule den faktiske verdien, og setter-en håndhever passordvalidering ved å sikre at passordet er minst 8 tegn langt.

Eksempel med valideringslogikk ved bruk av getters og setters

Her er et annet eksempel hvor vi håndterer en persons alder og sørger for at verdien holder seg innenfor et rimelig område:


              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

Dette eksemplet viser hvordan en setter kan sikre at en alder forblir innenfor et gyldig område, og forhindrer at ugyldige data lagres.

1. Hva er hovedformålet med å bruke getters?

2. Hva vil `console.log(user.password);` skrive ut i følgende kode?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 9

Håndtering av Egenskaper med Getters og Setters

Hva er gettere og settere?

Hvordan definere og bruke gettere og settere

Fordeler med getters og setters

Kontrollert tilgang

Databeskyttelse

Fleksibilitet

Eksempel: Brukerkonto med passordvalidering

Eksempel med valideringslogikk ved bruk av getters og setters

1. Hva er hovedformålet med å bruke getters?

2. Hva vil console.log(user.password); skrive ut i følgende kode?

Awesome!

Håndtering av Egenskaper med Getters og Setters

Hva er gettere og settere?

Hvordan definere og bruke gettere og settere

Fordeler med getters og setters

Kontrollert tilgang

Databeskyttelse

Fleksibilitet

Eksempel: Brukerkonto med passordvalidering

Eksempel med valideringslogikk ved bruk av getters og setters

1. Hva er hovedformålet med å bruke getters?

2. Hva vil console.log(user.password); skrive ut i følgende kode?

2. Hva vil `console.log(user.password);` skrive ut i følgende kode?

2. Hva vil `console.log(user.password);` skrive ut i følgende kode?