#8 Javascript классы
В том уроке мы с вами разберем, как писать классы в ecmascript 6.
Давайте я сначала очень коротко повторю зачем нужны классы. Очень часто нам нужно описывать какие-то сущности, которые обладают какими то данными и могут использовать какие-то методы, которые определяют их поведение. Для этого мы описываем класс и каждый раз при его инициализации получаем новый екземпляр класса. При этом у нас обязательно вызывается конструктор класса
В javascript не существует классов и в ес5 мы использовали функции и прототипы, чтобы описывать классы. В ес6 не придумали ничего нового. Просто добавили синтаксический сахар для описания все тех же прототипов.
Как же выглядит класс описаный с помощью классов ес6?
class SimpleDate {
constructor (year, month, day) {
this.year = year;
this.month = month;
this.day = day;
}
}
const today = new SimpleDate(2017, 1, 28)
console.log(today)
с помощью слова class мы описали новый класс. Также мы добавили метод constructor, который принимает year, month, day и записывает их в this. Мы создали переменную today, которая является екземпляром класса SimpleDate.
Давайте добавим метод toString, который будет возвращать дату в человеческом формате
class SimpleDate {
constructor (year, month, day) {
this.year = year;
this.month = month;
this.day = day;
}
toString () {
return `${this.day}/${this.month}/${this.year}`;
}
}
const today = new SimpleDate(2017, 1, 28)
console.log(today.toString())
Теперь у екземпляра класса появился метод toString, вызывая который мы получаем красивый вывод даты.
Также мы можем использовать наследование в классах с помощью слова extend. Давайте создадим класс OtherDate, который будет наследоваться от SimpleDate.
class OtherDate extends SimpleDate {
}
Для того, чтобы выполнить конструктор парент класса мы используем метод super и передаем в него аргументы. Super используется для того, чтобы обращатся к родительскому классу.
class OtherDate extends SimpleDate {
constructor(year, month, day) {
super(year, month, day)
}
}
const tomorrow = new OtherDate(2017, 1, 29)
console.log(tomorrow.toString())
Как вы видите, мы вызвали конструктор парента и также у нас есть доступ к всем методам из парент класса. Именно поэтому метод toString у нас сработал
Давайте теперь пеопределим метод toString с другим выводом
class OtherDate extends SimpleDate {
constructor(year, month, day) {
super(year, month, day)
}
toString () {
return `${this.day}.${this.month}.${this.year}`;
}
}
Не нужно думать, что классы в ес6 это какая-то магия. Если мы посмотрим, что такое класс SimpleDate, то увидим, что это просто функция
typeof SimpleDate
То есть классы создают обычные функции с прототипным наследованием. Но вы не можете вызвать класс напрямую как функцию
SimpleDate()
У нас вывалится ошибка
TypeError: Classes can’t be function-called
потому-что классы нельзя вызывать напрямую.
Описав метод toString мы описывали метод прототипа
Также классам можно добавлять кроме прототипных методов, статические методы. Они будут является методами самого класса, а не методами prototype.
Если мы напишем в классе OtherDate метод hello
static hello() {
console.log('hello OtherDate');
}
То мы можем вызвать его с помощью OtherDate.hello(). В прототипах он доступен не будет.
И на последок пища для размышлений о классах. В Javascript коммьюнити классы считаются весьма спорным функционалом javascript. И применять их нужно с оглядкой. Например многие люди предпочитают писать модуль с набором функций, чем класс. Их легче поддерживать, експортировать и переиспользовать, не приходится использовать this и не нужно постоянно помнить а какой у меня контекст. Также нет проблем с кучей классов, которые наследуются друг от друга и сложно отдебажить какой метод откуда доступен. Поэтому лучше два раза подумайте прежде чем их использовать.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.