Классы

Содержание

• Классы в JS - часть стандарта ES6
• Объявление и получение экземпляра класса
• Публичные поля и методы класса
• Приватные поля и методы класса
• Статические поля и методы
• Геттеры и сеттеры
• Наследование классов
• Что такое экземпляр класса и зачем он нужен?
• Выводы по главе
• Упражнения

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

• 1. . Классы в JS - часть стандарта ES6 (2015). На деле представляют собой высокоуровневые асбтракции над ф-цией - конструктором

• 2. . Объявление и получение экземпляра класса

  Операции с классами для корректности работы кода, проводятся в строгом режиме

  Листинг 1. Объявление класса с получением его экземпляра

          "use strict";
      
          // ОБЪЯВЛЕНИЕ КЛАССА
          class User{}
  
          // ОБ-Т user1 - ЭКЗЕМПЛЯРА КЛАССА User
          let user1 = new User() 
          
          // если нет конструктора, скобки можно опустить
          // т.е. new User
  

• 3. . Публичные поля и методы класса

  Доступ к публичным полям и методам осуществляется, как из экземпляра класса, так и в самом классе и его наследниках

  Листинг 2. Объявление публичных полей класса. Публичные поля можно объявлять, как в конструкторе, так и вне его

          "use strict";
  
          class Calculator{
              // ПУБЛИЧНОЕ ПОЛЕ ОБЪЯВЛЕНО ВНЕ КОНСТРУКТОРА
              counter = 0
              // ПУБЛИЧНОЕ ПОЛЕ ОБЪЯВЛЕНО В КОНСТРУКТОРЕ
              constructor(amount){
                  this.amount = amount
              }
  
              getFormattedAmount(){
                  return '$' + ' ' + this.amount
              }
          }
  
          let calculator = new Calculator(10) 
          
          calculator.counter // 0
          calculator.amount // 10
          calculator.getFormattedAmount() // $ 10

• 4. Приватные поля и методы класса

  Доступ к приватным полям и методам осуществляется только в самом классе. Но не в его экземпляре и наследниках

  Листинг 3. Объявление и получение доступа к приватным полям класса и методам

          "use strict";
  
          class Calculator{
              // ПРИВАТНЫЕ ПОЛЯ ОБЪЯВЛЯЮТСЯ ТОЛЬКО В НАЧАЛЕ КЛАССА
              #amount = 10
  
              // ПРИВАТНЫЙ МЕТОД
              // ДОСТУП К ПОЛЮ #amount ВНУТРИ КЛАССА ОТКРЫТ
              #formattAmmount(){
                  return '$ ' + this.#amount
              }
  
              getFormattedAmount(){
                  return this.#formattAmmount()
              }
          }
  
          let calculator = new Calculator(10) 
          
          // ОШИБКА - ПРИВАТНЫЕ ПОЛЯ НЕЛЬЗЯ ВЫЗВАТЬ ИЗ ЭКЗЕМПЛЯРА КЛАССА
          // ДОСТУП К ПОЛЮ #amount ВНЕ КЛАССА ЗАКРЫТ
          calculator.#amount 
  
          // ОШИБКА
          // ТАКЖЕ НЕ МОЖЕТ БЫТЬ ПОЛУЧЕН ДОСТУП К МЕТОДУ #formattAmmount
          calculator.#formattAmmount()
  
          calculator.getFormattedAmount() // $ 10

  
  

  Если приватному полю при инициализации об-та класса надо присовить значение, то поле дублируется в конструкторе

  Листинг 4. Присвоение значений приватным полям при инициализации об-та класса

          "use strict";
  
          class Calculator{
              // ПРИВАТНЫЕ ПОЛЯ ОБЪЯВЛЯЮТСЯ ТОЛЬКО В НАЧАЛЕ КЛАССА
              #amount
  
              constructor(amount){
                  // ПРИ ПРИСВОЕНИЕ ЗНАЧЕНИЙ ЧЕРЕЗ КОНСТРУКТОР, ДУБЛИРУЮТСЯ В КОНСТРУКТОРЕ
                  this.#amount = amount
              }
  
              #formattAmmount(){
                  return '$ ' + this.#amount
              }
  
              getFormattedAmount(){
                  return this.#formattAmmount()
              }
          }
  
          let calculator = new Calculator(100) 
  
          calculator.getFormattedAmount() // $ 100

• 5. . Статические поля и методы

  Это поля, которые вызываются прямо из об-та класса без создания его экземпляра

  Листинг 5. Объявление и вызов полей переменных

          "use strict";
  
          class MathConstants{
              static Pi = 3.14
          }
  
          // СТАТИЧЕСКАЯ ПЕРЕМЕННАЯ ВЫЗЫВАЕТСЯ ПРЯМО ИЗ КЛАССА
          // БЕЗ СОЗДАНИЯ ЭКЗЕМПЛЯРА
          MathConstants.Pi // 3.14

  
  

  Статические переменные удобно использовать в других классах

  Листинг 6. Вызов статической переменной из другого класса

          "use strict";
  
          class MathConstants{
              static Pi = 3.14
          }
  
          class Square{
              circle(r){
                  return MathConstants.Pi * Math.pow(r,2)
              }
          }
  
          const square = new Square()
          square.circle(10) // 314

  
  

  Создание и вызов статических методов происходит аналогично. Статические поля и методы могут быть, как публичными, так и приватными. Полная информация по ним находится в документации:

  • Статические методы и свойства
  • ключевое слово static
  
  

  Также см учебный материал Статические свойства и методы

  
  
  Статические св-ва и методы привязаны не к экземпляру класса, а к самому классу, поэтому являются общими для всех его экземпляров

• 6. . Геттеры и сеттеры. Работа с геттерами и сеттерами происходит аналогично такой же работе в об-тах и ф-циях - конструкторе

  Листинг 7. Методы get и set в классах

         "use strict";
  
          class Pribor{
              _temperature = 0
  
              // МЕТОД СРАБАТЫВАЕТ ПРИ ВЫЗОВЕ ПОЛЯ temperature 
              get temperature(){
                  return this._temperature
              }
  
              // МЕТОД СРАБАТЫВАЕТ ПРИ ПРИСВОЕНИИ  
              // ЗНАЧЕНИЯ ПОЛЮ temperature 
              set temperature(value){
                  try {
                      if(value < 0) throw new Error('Температура не может быть отрицательной')
                      this._temperature = value                
                  } catch (error) {
                      console.log(error.message) 
                  }
  
              }
  
          }
  
  
          const pribor = new Pribor()
  
          // СРАБАТЫВАЕТ МЕТОД set
          pribor.temperature = -10 
  
          // СРАБАТЫВАЕТ МЕТОД get
          console.log(pribor.temperature)

• 7. . Наследование классов осуществляется с помощью ключевого слова extends

  Листинг 8. Простое наследование

          "use strict";
  
          class User{
              name = 'Den'
              getName(){
                  return this.name
              }
          }
  
  
          class Student extends User{}
  
          let student = new Student()
  
          // КЛАСС Student НАСЛЕДУЕТ ВСЕ ПУБЛИЧНЫЕ 
          // ПОЛЯ И МЕТОДЫ КЛАССА User
          student.getName() // Den

  
  

  Приватные методы и поля могут быть доступны только внутри класса, где они были объявлены. В данном случае, это класс User. В классе Student и его экземплярах они доступны не будут

  Листинг 9. Наследование приватных методов и полей невозможно

          "use strict";
  
          class User{
              #name = 'Den'
              #getName(){
                  return this.#name
              }
          }
  
  
          class Student extends User{}
  
          let student = new Student()
  
          // ДОСТУП К ПРИВАТНЫМ МЕТОДАМ И ПОЛЯМ
          // ВОЗМОЖЕН ТОЛЬКО ИЗ КЛАССА, ГДЕ ОНИ ОБЪЯВЛЕНЫ 
          student.#getName() // ошибка

  
  

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

  Листинг 10. Вызов родительского конструктора в дочернем классе

          "use strict";
  
          class User{
              constructor(name){
                  this.name = name
              }
          }
  
  
          class Student extends User{
              // ЕСЛИ В ДОЧЕРНЕМ КЛАССЕ ВЫЗЫВАЕТСЯ КОНСТРУКТОР  
              // ОН ПЕРЕЗАПИШЕТ РОДИТЕЛЬСКИЙ КОНСТРУКТОР
              // ЧТОБЫ ЭТОГО НЕ ПРОИЗОШЛО, ВНУТРИ КОНСТРУКТОРА
              // ДОЧЕРНЕГО КЛАССА, ВЫЗЫВАЕТСЯ РОДИТЕЛЬСКИЙ КОНСТРУКТОР
              // ЧЕРЕЗ КЛЮЧЕВОЕ СЛОВО super
              constructor(name, faculty){
                  super(name)
                  this.faculty = faculty
              }    
              
              getData(){
                  return `Имя: ${this.name}, Факультет: ${this.faculty}`
              }
          }
  
          let student = new Student('Денис', 'экономический')
          student.getData() // Имя: Денис, Факультет: экономический

• 8. . Что такое экземпляр класса и зачем он нужен? Экземпляр класса, это об-т, который имеет в себе всю внутреннюю логику класса, но инкапсулирован от других об-тов.

  К примеру, существует, об-т (класс), который формирует кастомный элемент select, который выводится на странице более одного раза. Покажем разницу

  Пример 1. На странице находится один селект

  Лог выбора пользователя:

  Листинг 11.1. Html разметка под плагин

          <div class="w-50 p-5 el-1">  
              <div class="mb-4">
                  <span>Лог выбора пользователя: </span>
                  <span class="select-log"></span>
              </div> 
              <div class="select-slot"></div>                       
          </div>  

  Листинг 11.2 Плагин кастомного элемента select

          let CustomSelectObject = {
              log: [],
              element: null,
              init(data){
                  this.element = document.querySelector(data.selector)
                  let selectSlot = this.element.querySelector('.select-slot')              
                  selectSlot.innerHTML = null
                  selectSlot.appendChild(this.select(data.list))
              },
              select(list){
                  let select = document.createElement('select')
                  select.className = "form-select"
                  select.addEventListener('change',(e) => {
                      this.addToLog(e.currentTarget.value)
                  })
                  select.innerHTML = list.map(item => {
                              return `<option value="${item}">${item}</option>`
                          }).join('')
                  return select
              },
              addToLog(data){
                  this.log.push(data)
                  this.element.querySelector('.select-log').innerHTML = this.log.join(', ')
              }
          }
  
  
  
          CustomSelectObject.init({
              selector: '.el-1',
              list: ['Германия', 'Украина', 'Швеция'],
          })

  
  

  ---

  
  

  Пример 2. На страницу необходимо добавить ещё один селект с другими данными

  Лог выбора пользователя:

  Лог выбора пользователя:

  Листинг 12.1. Html разметка под второй селект

          <div class="w-50 p-5 el-2">  
              <div class="mb-4">
                  <span>Лог выбора пользователя: </span>
                  <span class="select-log"></span>
              </div> 
              <div class="select-slot"></div>                       
          </div>  

  Листинг 12.2 Добавляем об-т с данными для второго селекта

          CustomSelectObject.init({
              selector: '.el-2',
              list: ['Берлин', 'Киев', 'Стокгольм'],
          })

  
  
  Ошибка Так, как простые об-ты образуют всего 1 экземпляр, то данные второго об-та перезаписывают данные первого. Поэтому выбор, как в селекте 1, так и в селекте 2, будет добавляться в один общий массив CustomSelectObject.log
  
  

  Для решения этой проблемы существуют 2 варианта:

  • Вариант 1 Усложнить логину плагина, а именно: создать дополнительное поле children (к примеру), куда сохранять об-т данных каждого вновь добавленного селекта, а самому селекту добавлять атрибут data-ref с уникальным номер, по которому будет установлена связь с соответсвующим ему элементом массива
  • Вариант 2 Использовать ф-цию конструктор (классы) и под каждый новый селект создавать свой экземпляр класса
  
  

  ---

  
  

  Пример 3. Использование классов с созданием своего экземпляра под каждый новый селект

  Лог выбора пользователя:

  Лог выбора пользователя:

  Листинг 13. Плагин кастомного элемента select

          "use strict";
          
          class CustomSelectClass{
              #log = []
              #element = null
              init(data){
                  this.#element = document.querySelector(data.selector)
                  let selectSlot = this.#element.querySelector('.select-slot')              
                  selectSlot.innerHTML = null
                  selectSlot.appendChild(this.#select(data.list))
              }
              #select(list){
                  let select = document.createElement('select')
                  select.className = "form-select"
                  select.addEventListener('change',(e) => {
                      this.#addToLog(e.currentTarget.value)
                  })
                  select.innerHTML = list.map(item => {
                              return `<option value="${item}">${item}</option>`
                          }).join('')
                  return select
              }
              #addToLog(data){
                  this.#log.push(data)
                  this.#element.querySelector('.select-log').innerHTML = this.#log.join(', ')
              }
          }
  
          // ПЕРВЫЙ ЭКЗЕМПЛЯР КЛАССА CustomSelectClass
          // ОБРАБАТЫВАЕТ ЛОГИКУ ПЕРВОГО СЕЛЕКТА
          let select1 = new CustomSelectClass()
          select1.init({
              selector: '.el-1',
              list: ['Германия', 'Украина', 'Швеция'],
          })
  
          // ВТОРОЙ ЭКЗЕМПЛЯР КЛАССА CustomSelectClass
          // ОБРАБАТЫВАЕТ ЛОГИКУ ВТОРОГО СЕЛЕКТА
          let select2 = new CustomSelectClass()
          select2.init({
              selector: '.el-2',
              list: ['Берлин', 'Киев', 'Стокгольм'],
          })

  
  
  Ошибка устранена. Логика обработки каждого селекта осуществляется соответствующим экземпляром класса. Поэтому данные выбора каждого селекта разделены и добавляются исключительно в свой массив