JavaScript ES6: Классы и создание объектов

Создание объектов без классов

Для начала рассмотрим создание обычного объекта:

const animal = {
  name: 'animal',
  age: 5,
  tail: true
};

console.log(animal);

Результат – объект с заданными свойствами. Его прототип указывает на глобальный объект Object.

Создание объектов с помощью классов

ES6 предоставляет синтаксис классов для удобного создания объектов. Рассмотрим тот же пример, используя класс:

class Animal {
  constructor(options) {
    this.name = options.name;
    this.age = options.age;
    this.tail = options.tail;
  }
}

const animal = new Animal({ name: 'animal', age: 5, tail: true });
console.log(animal);

Результат аналогичен предыдущему, но браузер (например, Chrome) укажет, что объект является экземпляром класса Animal. Прототип объекта теперь указывает на прототип класса Animal, а затем на глобальный объект Object.

Методы в классах

В классе можно определять методы:

class Animal {
  constructor(options) {
    this.name = options.name;
    this.age = options.age;
    this.tail = options.tail;
  }
  voice() {
    console.log('I am an animal');
  }
}

const animal = new Animal({ name: 'animal', age: 5, tail: true });
animal.voice(); // Выведет 'I am an animal'

Метод voice доступен через экземпляр класса.

Статические методы и свойства

Классы поддерживают статические методы и свойства (с помощью ключевого слова static):

class Animal {
  static type = 'animal';
  // ...
}

console.log(Animal.type); // Выведет 'animal'
console.log(animal.type); // Ошибка

Статические элементы доступны только через сам класс, а не через его экземпляры.

Наследование

Ключевое слово extends позволяет реализовать наследование:

class Cat extends Animal {
  constructor(options) {
    super(options); // Вызов родительского конструктора обязателен
    this.color = options.color;
  }
}

const cat = new Cat({ name: 'cat', age: 7, tail: true, color: 'black' });
console.log(cat);
cat.voice(); // Выведет 'I am an animal'

Класс Cat наследует свойства и методы от Animal, добавляя свои собственные. Вызов super() в конструкторе дочернего класса необходим для вызова конструктора родительского класса.

Переопределение методов

В дочернем классе можно переопределить методы родительского класса:

class Cat extends Animal {
  voice() {
    console.log('I am a cat');
  }
  // ...
}

Теперь вызов cat.voice() выведет ‘I am a cat’. Для вызова родительского метода используется super.voice().

Геттеры и сеттеры

Геттеры и сеттеры реализуются с помощью ключевых слов get и set:

class Animal {
  get ageInfo() {
    return this.age * 7;
  }
  set ageInfo(newAge) {
    this.age = newAge;
  }
  // ...
}

Геттер ageInfo возвращает вычисленное значение, а сеттер ageInfo изменяет значение свойства age.

Практический пример: Компоненты

Рассмотрим пример создания компонентов с использованием классов:

class Component {
  constructor(selector) {
    this.$el = document.querySelector(selector);
  }
  hide() {
    this.$el.style.display = 'none';
  }
  show() {
    this.$el.style.display = 'block';
  }
}

class Box extends Component {
  constructor(options) {
    super(options.selector);
    this.$el.style.width = options.size + 'px';
    this.$el.style.backgroundColor = options.color;
  }
}

class Circle extends Box {
  constructor(options) {
    super(options);
    this.$el.style.borderRadius = '50%';
  }
}

// ... создание и использование экземпляров классов Box и Circle ...

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

ES6 классы предоставляют удобный и мощный механизм для работы с объектами в JavaScript, поддерживая наследование, переопределение методов, геттеры и сеттеры, что упрощает разработку сложных приложений.

Что будем искать? Например,программа