Геттеры и сеттеры: Что такое геттеры и сеттеры в JavaScript?


Введение:

Программисты часто используют геттеры и сеттеры, и мы видим их в коде. Если вам трудно понять геттеры и сеттеры, я постараюсь объяснить это так, чтобы вы смогли понять.
В этой статье мы рассмотрим геттеры и сеттеры, что они собой представляют и object.defineproperty().

Что такое геттеры и сеттеры:

Геттеры и сеттеры — это функции, которые используются для доступа к значениям.
Геттеры и сеттеры называются свойствами доступа. В JavaScript существует два вида свойств объектов: свойства данных и свойства доступа. 
Обычно мы используем свойства данных в объектах. Например,

const names = {
    myName: 'Ezinne';
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код является примером свойства данных. Он принимает данные и выдает результат, если используется console.log.

Геттеры и сеттеры могут принимать данные, а также получать доступ к значениям этих данных или манипулировать ими. Они отличаются друг от друга, так как их применение различно.

Геттеры могут получать, как следует из названия, значение свойства. В приведенном выше примере кода мы могли бы использовать геттер для получения значения переменной myName. Вот пример:

const  names = {
    myName: 'Ezinne',

    //using get to access the value
    get getmyName() {
        return this.myName;
    }
};
console.log(names.getmyName);
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы можем получить значение объекта names с помощью консольного лога метода getter.

Примечание: мы можем использовать любое другое имя, кроме getmyName.

Давайте рассмотрим другой пример.

const topics = {
    arrays: "reduce",
    objects: "literals",

    get someTopics() {
        return `${this.arrays} ${this.objects}`;
    }
};
console.log(topics.someTopics);
Вход в полноэкранный режим Выход из полноэкранного режима

В этом примере метод getter используется для чтения двух значений. Вы можете добавить больше значений. Но вы не можете присвоить ему новое значение, так как геттеры принимают нулевые параметры. Здесь на помощь приходит сеттер.
 
Сеттеры определяются просто как метод, который может установить или изменить значение. Он принимает параметр, который и является ожидаемым изменением. 
Если бы мы хотели присвоить новое имя нашей переменной myName в первом примере, нам пришлось бы использовать сеттер.

const  names = {
  myName: 'Ezinne',
//using get to access the value
get getmyName() {
  return this.myName;
},
//using set to change the value
set changeMyName(newName) {
  this.myName = newName;
 }
};
console.log(names.getmyName);
names.changeMyName = 'Anna';
console.log(names.myName);
Вход в полноэкранный режим Выход из полноэкранного режима

Определение свойства Object.Define

Это свойство используется для добавления геттеров и сеттеров.

Синтаксис следующий:

Применить Object.defineProperty в предыдущих примерах,

const topics = {
  arrays: "reduce",
  objects: "literals",
};

Object.defineProperty(topics, 'someTopics', {
  get () {
    return `${this.arrays} ${this.objects}`;
  },
});

Object.defineProperty(topics, 'otherTopics', {
  set (otherTopics) {
    [this.arrays, this.objects] = otherTopics;
 }
});

console.log(topics.someTopics);
topics.otherTopics = ['variables','symbols'];
console.log(topics.arrays);
console.log(topics.objects);
Войдите в полноэкранный режим Выйти из полноэкранного режима

В Object.defineProperty, когда мы используем getter, он не использует имя, как getTopics, а setter принимает только параметр, как мы могли видеть из примера.

Object.defineProperty принимает три аргумента;
Первый аргумент — это имя объекта. В нашем примере это topics. Второй аргумент — имя свойства, которое является someTopics, а третий аргумент — описание. Оно содержит геттеры и сеттеры, используемые в данном случае.

Другой пример

const game = {
  player1: "dreadking",
  player2: "invincible",
};

Object.defineProperty(game, 'players', {
  get () {
    return `${this.player1} ${this.player2}`
  },
});

Object.defineProperty(game, "new Players", {
  set (newPlayers) {
    [this.player1,this.player2] = [newPlayers];
  }
});

console.log(game.players)
game.newPlayers = ['tigerarrow', 'fiercely'];
console.log(`new player: ${game.player1}`);
console.log(`new player: ${game.player2}`);
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом примере мы пишем простое игровое приложение, которое возвращает имена игроков в игре, записывая их в консоль с помощью геттеров. Используя сеттеры, мы можем изменить имена этих игроков и также записать их в консоль.

Почему мы используем геттеры и сеттеры?

  • Мы используем геттеры и сеттеры для доступа к свойствам объектов.

  • Мы используем геттеры и сеттеры, когда хотим добавить больше логики в наш код.

  • В объектно-ориентированном программировании (ООП) мы используем их для инкапсуляции, чтобы скрыть сложность нашего кода.

Заключение

Итак, мы изучили геттеры и сеттеры, Object.defineProperty и когда их использовать. Кроме того, мы сделали несколько упражнений, чтобы наш мозг мог приложить некоторые когнитивные усилия для понимания темы.

Спасибо за прочтение и успехов в изучении темы.

Оцените статью
Procodings.ru
Добавить комментарий