Lära Hantering av Egenskaper med Getters och Setters | Bemästra JavaScript-klasser och Arv

Getter- och setter-metoder erbjuder ett kraftfullt sätt att kontrollera åtkomst till ett objekts egenskaper i JavaScript.

Vad är getters och setters?

I JavaScript är getters och setters speciella metoder som möjliggör kontrollerad åtkomst till ett objekts egenskaper. De ger flexibilitet att definiera hur en egenskap hämtas och modifieras, samtidigt som objektets interna tillstånd skyddas.

Getter: En metod som används för att hämta (get) värdet av en egenskap;
Setter: En metod som används för att sätta eller uppdatera värdet av en egenskap.

Tänk på ett bankvalv. Valvet innehåller värdefulla föremål (privata egenskaper), och banktjänstemannen (getter/setter) fungerar som grindvakt. Du kan inte komma åt valvet direkt, men tjänstemannen kan hämta eller uppdatera föremål åt dig baserat på vissa regler och valideringar.

Hur man definierar och använder getters och setters

Getters och setters definieras med hjälp av nyckelorden get och set inuti en klass. När du kommer åt en egenskap anropas gettern automatiskt. På samma sätt, när du modifierar en egenskap, anropas settern istället för att egenskapen ändras direkt.


              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 detta exempel är #type en privat egenskap, och vi definierar en getter (get type()) för att hämta dess värde samt en setter (set type(newType)) för att ändra det. Settern innehåller validering för att förhindra att ett ogiltigt värde anges, vilket visar hur du kan kontrollera uppdateringar av privat data.

Fördelar med getters och setters

Kontrollerad åtkomst

Getters gör det möjligt att definiera hur ett egenskapsvärde hämtas, vilket möjliggör bearbetning eller manipulering av värdet innan det returneras;
Setters ger kontroll över hur en egenskap uppdateras, vilket tillåter validering eller omvandling av data innan den tilldelas ett privat fält.

Dataskydd

Användning av getters och setters bidrar till att skydda det interna tillståndet hos ett objekt genom att erbjuda ett kontrollerat gränssnitt för interaktion;
Privata egenskaper kan förbli dolda, och endast nödvändig information kan exponeras för extern kod.

Flexibilitet

Getters och setters möjliggör tillägg av ytterligare logik—som validering eller loggning—vid åtkomst eller modifiering av egenskaper utan att ändra hur extern kod interagerar med objektet.

Exempel: Användarkonto med lösenordsvalidering

Föreställ dig att du hanterar användarkonton där lösenord måste uppfylla vissa säkerhetskrav. Med en setter kan du upprätthålla lösenordsstyrka, medan en getter kan hämta en maskerad version av lösenordet för visningsändamål.


              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 det här exemplet returnerar gettern en maskerad version av lösenordet för att dölja det faktiska värdet, och settern tillämpar lösenordsvalidering, vilket säkerställer att lösenordet är minst 8 tecken långt.

Exempel med valideringslogik med hjälp av getters och setters

Här är ytterligare ett exempel där vi hanterar en persons ålder och säkerställer att värdet håller sig inom ett rimligt intervall:


              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

Detta exempel visar hur en setter kan säkerställa att en ålder förblir inom ett giltigt intervall och förhindrar att ogiltiga data lagras.

1. Vad är det primära syftet med att använda getters?

2. I följande kod, vad kommer `console.log(user.password);` att skriva ut?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 9

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

Svep för att visa menyn

Getter- och setter-metoder erbjuder ett kraftfullt sätt att kontrollera åtkomst till ett objekts egenskaper i JavaScript.

Vad är getters och setters?

Getter: En metod som används för att hämta (get) värdet av en egenskap;
Setter: En metod som används för att sätta eller uppdatera värdet av en egenskap.

Hur man definierar och använder getters och setters


              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

Fördelar med getters och setters

Kontrollerad åtkomst

Getters gör det möjligt att definiera hur ett egenskapsvärde hämtas, vilket möjliggör bearbetning eller manipulering av värdet innan det returneras;
Setters ger kontroll över hur en egenskap uppdateras, vilket tillåter validering eller omvandling av data innan den tilldelas ett privat fält.

Dataskydd

Användning av getters och setters bidrar till att skydda det interna tillståndet hos ett objekt genom att erbjuda ett kontrollerat gränssnitt för interaktion;
Privata egenskaper kan förbli dolda, och endast nödvändig information kan exponeras för extern kod.

Flexibilitet

Getters och setters möjliggör tillägg av ytterligare logik—som validering eller loggning—vid åtkomst eller modifiering av egenskaper utan att ändra hur extern kod interagerar med objektet.

Exempel: Användarkonto med lösenordsvalidering


              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

Exempel med valideringslogik med hjälp av getters och setters

Här är ytterligare ett exempel där vi hanterar en persons ålder och säkerställer att värdet håller sig inom ett rimligt intervall:


              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

Detta exempel visar hur en setter kan säkerställa att en ålder förblir inom ett giltigt intervall och förhindrar att ogiltiga data lagras.

1. Vad är det primära syftet med att använda getters?

2. I följande kod, vad kommer `console.log(user.password);` att skriva ut?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 9

Hantering av Egenskaper med Getters och Setters

Vad är getters och setters?

Hur man definierar och använder getters och setters

Fördelar med getters och setters

Kontrollerad åtkomst

Dataskydd

Flexibilitet

Exempel: Användarkonto med lösenordsvalidering

Exempel med valideringslogik med hjälp av getters och setters

1. Vad är det primära syftet med att använda getters?

2. I följande kod, vad kommer console.log(user.password); att skriva ut?

Awesome!

Hantering av Egenskaper med Getters och Setters

Vad är getters och setters?

Hur man definierar och använder getters och setters

Fördelar med getters och setters

Kontrollerad åtkomst

Dataskydd

Flexibilitet

Exempel: Användarkonto med lösenordsvalidering

Exempel med valideringslogik med hjälp av getters och setters

1. Vad är det primära syftet med att använda getters?

2. I följande kod, vad kommer console.log(user.password); att skriva ut?

2. I följande kod, vad kommer `console.log(user.password);` att skriva ut?

2. I följande kod, vad kommer `console.log(user.password);` att skriva ut?