get (геттеры) и set (сеттеры)

Содержание

• Геттеры и сеттеры в JS
• В каком синтаксисе используются
• Метод get
• Метод set
• Установка геттера и сеттера с помощью дескриптора свойств
• Установка геттера и сеттера в классах
• Выводы по главе
• Упражнения

Вводная информация

• 1. В классическом объектно-ориентированном программировании относятся к так называемым "магическим методам"

• 2. В JS могут геттеры и сеттеры использоваться, как в обычных об-тах, так и в ф-ции - конструкторе (классе)

• 3. get связывает свойство объекта с функцией, которая будет вызываться при ОБРАЩЕНИИ к этому свойству

  Листинг 1. Примеры установки геттера

          // ПРИМЕР 1 простой
          var obj1 = {		
              get someProp(){	
                  console.log('someProp code')
              }	
          }		
          
          // ПРОСТОЙ ВЫВОД В КОНСОЛЬ
          obj1.someProp;		
  
  
          // ПРИМЕР 2 более сложный
          var obj2 = {				
              // определяем геттер для `a`				
              get a() {				
                  return 2;				
              }				
          };		
          
          // ЧТО БЫ МЫ НЕ ПРИСВАИВАЛИ a
          // ПРИ ВЫЗОВЕ СВ-ВА a ВСЕГДА БУДЕТ СРАБАТЫВАТЬ ГЕТТЕР
          // И ВОЗВРАЩАТЬ УСТАНОВЛЕННОЕ ТАМ ЗНАЧЕНИЕ
          obj2.a = 3;				
          obj2.a; // 2		
          
          
          
          // ПРИМЕР 3 более сложный
          const obj3 = {
              log: ['a', 'b', 'c'],
              get latest() {
                  if (this.log.length === 0) {
                  return undefined;
                  }
                  return this.log[this.log.length - 1];
              }
          };
  
          console.log(obj3.latest); // ВЫВЕДЕТ "c"

• 4. set связывает свойство объекта с функцией, которая будет вызвана при попытке УСТАНОВИТЬ это свойство.

  Листинг 2. Установка сеттера

          // ПРИМЕР 1 простой
          var obj = {
              get a() {
                  return this._a_;
              },
              // !!! ПЕРВЫМ ОТРАБАТЫВАЕТ СЕТТЕР
              set a(val) {
                  this._a_ = val * 2;
              }
          };
          obj.a = 2;
          obj.a; // 4	
          
          
          // ПРИМЕР 2 простой
          // форматирование цены
          const obj2 = {
              get price(){
                  return this._price
              },
              set price(v){
                  this._price = `$ ${v}`
              }
          }
  
          obj2.price = 200
          obj2.price // $ 200
  
  
          // ПРИМЕР 3 более сложный
          // БЕЗ ГЕТТЕРА
          // ПРИ ПРИСВОЕНИИ ЗНАЧЕНИЯ СВ-ВУ current
          // МЫ КАЖДЫЙ РАЗ ЗАПИСЫВАЕМ В СВ-ВО log
          // ТО, ЧТО ЕМУ БЫЛО ПРИСОВЕНО
          var obj3 = {
              set current(str) {
                  this.log[this.log.length] = str;
              },
              log: []
          }
  
          obj3.current = 2
          obj3.current = 'ok'
          console.log(obj3.log); // [2, "ok"]

• 5. Установка геттера и сеттера с помощью дескриптора свойств в ф-ции - конструкторе.

  С помощью дескриптора св-в, сеттер и геттер можно установить более детально

  Установка сеттера и геттера с помощью дескриптора св-в возможна также и в простых об-тах

  Листинг 3. Установка геттера и сеттера в ф-ции - конструкторе с помощью дескрипторов доступа

          function Product(){
              this.price
              Object.defineProperty(this,'price',{
                  get(){
                      return this._price
                  },
                  set(value){
                      this._price = `$ ${value}`
                  }
              })
          }
  
          const product1 = new Product()
          product1.price = 200
          console.log( product1.price ) // $ 200

• 6. Установка геттера и сеттера в классах, рассматривается в соответсвующем разделе