Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Керування Властивостями за Допомогою Геттерів і Сеттерів | Володіння Класами Та Наслідуванням У JavaScript
Просунуте Володіння JavaScript

bookКерування Властивостями за Допомогою Геттерів і Сеттерів

Гетери та сетери надають потужний спосіб контролю доступу до властивостей об'єкта в JavaScript.

Що таке гетери та сетери?

У JavaScript гетери та сетери — це спеціальні методи, які дозволяють контрольовано отримувати доступ до властивостей об'єкта. Вони забезпечують гнучкість у визначенні того, як властивість отримується та змінюється, захищаючи внутрішній стан об'єкта.

  • Гетер: Метод для отримання (читання) значення властивості;
  • Сетер: Метод для встановлення або оновлення значення властивості.

Уявіть собі банківське сховище. Сховище містить цінні речі (приватні властивості), а банківський касир (гетер/сетер) виступає в ролі контролера. Ви не можете отримати доступ до сховища напряму, але касир може отримати або оновити речі для вас відповідно до певних правил і перевірок.

Як визначати та використовувати гетери й сетери

Гетери та сетери визначаються за допомогою ключових слів get і set всередині класу. При зверненні до властивості автоматично викликається гетер. Аналогічно, при зміні властивості викликається сетер замість прямої зміни властивості.


              
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

У цьому прикладі #type — це приватна властивість, для якої визначено геттер (get type()) для отримання її значення та сеттер (set type(newType)) для його зміни. Сеттер містить перевірку, щоб запобігти встановленню некоректного значення, демонструючи, як можна контролювати оновлення приватних даних.

Переваги геттерів і сеттерів

Керований доступ

  • Геттери дозволяють визначати, як отримується значення властивості, що дає змогу обробляти або змінювати значення перед його поверненням;
  • Сеттери надають контроль над оновленням властивості, дозволяючи перевіряти або трансформувати дані перед присвоєнням їх приватному полю.

Захист даних

  • Використання геттерів і сеттерів допомагає захистити внутрішній стан об'єкта, забезпечуючи контрольований інтерфейс для взаємодії;
  • Приватні властивості можуть залишатися прихованими, і можна відкривати лише необхідну інформацію для зовнішнього коду.

Гнучкість

Геттери та сеттери дозволяють додавати додаткову логіку — наприклад, валідацію або логування — під час доступу чи зміни властивостей без зміни способу взаємодії зовнішнього коду з об'єктом.

Приклад: Обліковий запис користувача з перевіркою пароля

Уявіть, що ви керуєте обліковими записами користувачів, де паролі повинні відповідати певним стандартам безпеки. За допомогою сеттера можна забезпечити надійність пароля, а геттер може повертати замасковану версію пароля для відображення.


              
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

У цьому прикладі геттер повертає замасковану версію пароля для приховування фактичного значення, а сеттер забезпечує валідацію пароля, гарантує, що пароль містить щонайменше 8 символів.

Приклад із логікою валідації за допомогою геттерів і сеттерів

Ось ще один приклад, у якому ми керуємо віком особи та гарантуємо, що значення залишається в розумних межах:


              
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

Цей приклад демонструє, як сеттер може гарантувати, що вік залишається в допустимому діапазоні, запобігаючи збереженню некоректних даних.

1. Яка основна мета використання геттерів?

2. Що виведе console.log(user.password); у наведеному коді?

question mark

Яка основна мета використання геттерів?

Select the correct answer

question mark

Що виведе console.log(user.password); у наведеному коді?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 9

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

bookКерування Властивостями за Допомогою Геттерів і Сеттерів

Свайпніть щоб показати меню

Гетери та сетери надають потужний спосіб контролю доступу до властивостей об'єкта в JavaScript.

Що таке гетери та сетери?

У JavaScript гетери та сетери — це спеціальні методи, які дозволяють контрольовано отримувати доступ до властивостей об'єкта. Вони забезпечують гнучкість у визначенні того, як властивість отримується та змінюється, захищаючи внутрішній стан об'єкта.

  • Гетер: Метод для отримання (читання) значення властивості;
  • Сетер: Метод для встановлення або оновлення значення властивості.

Уявіть собі банківське сховище. Сховище містить цінні речі (приватні властивості), а банківський касир (гетер/сетер) виступає в ролі контролера. Ви не можете отримати доступ до сховища напряму, але касир може отримати або оновити речі для вас відповідно до певних правил і перевірок.

Як визначати та використовувати гетери й сетери

Гетери та сетери визначаються за допомогою ключових слів get і set всередині класу. При зверненні до властивості автоматично викликається гетер. Аналогічно, при зміні властивості викликається сетер замість прямої зміни властивості.


              
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

У цьому прикладі #type — це приватна властивість, для якої визначено геттер (get type()) для отримання її значення та сеттер (set type(newType)) для його зміни. Сеттер містить перевірку, щоб запобігти встановленню некоректного значення, демонструючи, як можна контролювати оновлення приватних даних.

Переваги геттерів і сеттерів

Керований доступ

  • Геттери дозволяють визначати, як отримується значення властивості, що дає змогу обробляти або змінювати значення перед його поверненням;
  • Сеттери надають контроль над оновленням властивості, дозволяючи перевіряти або трансформувати дані перед присвоєнням їх приватному полю.

Захист даних

  • Використання геттерів і сеттерів допомагає захистити внутрішній стан об'єкта, забезпечуючи контрольований інтерфейс для взаємодії;
  • Приватні властивості можуть залишатися прихованими, і можна відкривати лише необхідну інформацію для зовнішнього коду.

Гнучкість

Геттери та сеттери дозволяють додавати додаткову логіку — наприклад, валідацію або логування — під час доступу чи зміни властивостей без зміни способу взаємодії зовнішнього коду з об'єктом.

Приклад: Обліковий запис користувача з перевіркою пароля

Уявіть, що ви керуєте обліковими записами користувачів, де паролі повинні відповідати певним стандартам безпеки. За допомогою сеттера можна забезпечити надійність пароля, а геттер може повертати замасковану версію пароля для відображення.


              
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

У цьому прикладі геттер повертає замасковану версію пароля для приховування фактичного значення, а сеттер забезпечує валідацію пароля, гарантує, що пароль містить щонайменше 8 символів.

Приклад із логікою валідації за допомогою геттерів і сеттерів

Ось ще один приклад, у якому ми керуємо віком особи та гарантуємо, що значення залишається в розумних межах:


              
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

Цей приклад демонструє, як сеттер може гарантувати, що вік залишається в допустимому діапазоні, запобігаючи збереженню некоректних даних.

1. Яка основна мета використання геттерів?

2. Що виведе console.log(user.password); у наведеному коді?

question mark

Яка основна мета використання геттерів?

Select the correct answer

question mark

Що виведе console.log(user.password); у наведеному коді?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 9
some-alt