Создание объектов без классов
Для начала рассмотрим создание обычного объекта:
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, поддерживая наследование, переопределение методов, геттеры и сеттеры, что упрощает разработку сложных приложений.