Классы в JavaScript — объявление, конструктор, наследование, экземпляр, геттеры и сеттеры

✏️ Изучаем базовый синтаксис классов в JavaScript: объявление, работа со свойствами и методами. Знакомимся с понятием "экземпляр класса". Учимся работать со специальным методом — constructor. Узнаем, что такое геттеры и сеттеры. Поговорим о приватных свойствах и методах, о символе "_" в начале имени сущностей в классах и объектах. Учимся делать свойства и методы действительно приватными через префикс "#". Изучаем ключевое слово static. Разбираемся, как наследовать классы друг от друга.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:22​ | Классы
▶ 00:56​ | Синтаксис class
▶ 01:35​ | Экземпляры класса
▶ 01:59​ | Конструктор класса — метод constructor
▶ 04:24​ | Свойства классов
▶ 05:34​ | Методы класса
▶ 06:43​ | Геттеры и сеттеры
▶ 10:13​ | Приватные свойства и методы, символ подчеркивания
▶ 12:39​ | Приватные свойства и методы, префикс #
▶ 13:58​ | Статические методы и свойства, ключевое слово static
▶ 15:19​ | Наследование классов
▶ 17:56​ | Переопределение метода в наследуемом классе
▶ 18:58​ | Ключевое слово super
▶ 19:53​ | Переопределение конструктора в наследуемом классе
▶ 21:12 | Пример использования классов, использование класса без экземпляра класса
▶ 23:03​ | Заключение

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #js #javascript

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[loxxyn]

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

[emptyyyyydkfoe]

Как по мне, самое понятное объяснение ооп в js, спасибо огромное

[ВикторияХоронжая]

Александр, спасибо Вам большое за материалы, отличное видео, очень хорошо объясняете!

[smotritelyoutube]

Лайк, стало реально понятнее, теперь бы еще попрактиковаться в этих классах

[АлександрСальников-сж]

Коммент в поддержку, спасибо за урок!

[Triplanar]

Александр, спасибо за ценную информацию, которую даете в последнее время стал смотреть только ваши уроки по интересующим темам, хотел бы очень увидеть урок по bootstrap от вас

[ВладиславБеспалый-дж]

17:45 - "А что если разработчик спит не как обычный человек" Заставляет задуматься и улыбнуться🤣👍👍👍

[lawsonllka]

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

[miwanjaGR]

на 2:40 все таки сдался и сказал "конструктор")))

[alexandraweather]

такой вот вопрос: есть задача сделать список карточек с десертами, из 30 штук, вся информация для них лежит в json. Каждая карточка имеет кнопку "добавить в корзину", нажатие на которую открывает качели больше-меньше. Есть ли смысл использовать классы для этого, как я планировала?
я думала фетчить данные, перебирать их в цикле, создавая для каждого экземпляр класса с соответствующими методами. Только вот не знаю правильная ли это идея. А еще я не очень понимаю как прослушивание событий на них вешать - отдельно или внутри класса как часть метода создания.

Спасибо большое за вашу работу!

[avatar]

На видео ( 11:46 ) у тебя свёрнуты фрагменты кода сеттера и геттера: city, в одну строчку. Есть ли такая настройки и для html/css/js в vs code? Всё никак не могу найти её или это расширением каким делается?

[BjarkiJohanne]

А как лучше использовать геттеры и сеттеры в JavaScript классах?) я когда искал курсы по IT, рассматривал разные компании, но выбрал Skypro, потому что они помогли мне освоить веб-дизайн))

[ProgVipe]

вроде и понятно, но одним\двумя роликами на ютубе не отделаешься..)

[Dea-cuvq]

Много говоришь и не показываешь, то есть как лекция какая-то 😊

[Yghtu]

какое все-таки отвратительное объяснение

[verance]

15:05
Практическим методом выяснил, что в статических методах можно обращаться через ключевое слово this но только к статическим методам и свойствам:

class Student {
static country = 'Россия'

constructor(name, age) {
this.name = name
this.age = age
}

static logCountryInner() {
console.log(`Страна: ${this.country}`)
}

static logCountry() {
this.logCountryInner()
}
}

Student.logCountry()

У меня такой код вывел в консоль "Страна: Россия" без ошибок