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

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ม.ค. 2025

ความคิดเห็น • 49

  • @AleksanderLamkov
    @AleksanderLamkov  6 หลายเดือนก่อน +3

    📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
    💬 t.me/friendlyFrontendChat
    Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

  • @loxxyn2643
    @loxxyn2643 6 หลายเดือนก่อน +20

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน +15

      В следующем мастер-классе будет верстка с JS, где сначала напишем логику компонентов на функциях, а затем покажу, как удобно можно всё организовать через классы.

    • @karinanetupskaya1503
      @karinanetupskaya1503 5 หลายเดือนก่อน +3

      @@AleksanderLamkov да, я только подумала "вот бы на реальном примере увидеть что это" и вуаля показал пример с проекта. Спасибо за такой качественный контент!

  • @emptyyyyydkfoe
    @emptyyyyydkfoe 5 หลายเดือนก่อน +7

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

  • @AW00047
    @AW00047 หลายเดือนก่อน +2

    Спасибо маста Александр, все понятно объяснил про классы и констракта

  • @smotritelyoutube
    @smotritelyoutube 6 หลายเดือนก่อน +4

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน +2

      Обязательно применим на практике в следующем мастер-классе!)

  • @ВикторияХоронжая
    @ВикторияХоронжая 2 หลายเดือนก่อน +1

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

  • @ВладиславБеспалый-д2ж
    @ВладиславБеспалый-д2ж 5 หลายเดือนก่อน +1

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

  • @АлександрСальников-с2ж
    @АлександрСальников-с2ж 5 หลายเดือนก่อน +1

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

  • @Triplanar
    @Triplanar 6 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน +1

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

  • @svitboomer8840
    @svitboomer8840 6 หลายเดือนก่อน +2

    Ты как всегда на высоте!!

  • @alla6361
    @alla6361 4 หลายเดือนก่อน +1

    Спасибо, стало понятнее.

  • @biscvie
    @biscvie 6 หลายเดือนก่อน +1

    Спасибо!

  • @mouri_san
    @mouri_san 4 หลายเดือนก่อน +1

    Спасибо!

  • @miwanjaGR
    @miwanjaGR 6 หลายเดือนก่อน +3

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

  • @Xolerik707
    @Xolerik707 หลายเดือนก่อน

    все хорошо. Поставил лайк, подписался, но "Врайт код" меня убило

  • @DarynDyussembaev-qv2xn
    @DarynDyussembaev-qv2xn 4 หลายเดือนก่อน +1

    лучший

  • @ВиталийПомазан-й1т
    @ВиталийПомазан-й1т 5 หลายเดือนก่อน +1

    ты лучший!!!

  • @lawsonllka271
    @lawsonllka271 6 หลายเดือนก่อน +1

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

  • @avatar33311111111111
    @avatar33311111111111 6 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน

      Да, есть!
      File --> Preferences --> Keyboard Shortcuts
      Хоткеи для:
      Fold All
      Unfold All
      Выделяешь блок кода, жмешь сочетание клавиш и выделенная часть кода сворачивается / разворачивается. Работает для всех языков, в т. ч. для HTML, CSS и JS.

    • @avatar33311111111111
      @avatar33311111111111 6 หลายเดือนก่อน

      @@AleksanderLamkov не то поведение. Это стандартное сворачивание/развёртывание но для всех блоков кода в файле. Я хочу найти поведения при сворачивание/развёртывание, на подобие расширение: Better Folding, само расширение работает немного коряво и не для html.

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน

      Хм, о таком не знаю, извини. В WebStorm всё изкоробки. Посоветовал бы на него перейти, если есть такая возможность.

  • @alexandraweather4156
    @alexandraweather4156 6 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน

      Классы позволяют структурировать код, но при этом не обязательно создавать экземпляр класса под каждую карточку товара, можно сделать всё в одном классе.
      Что-то вроде:
      class ProductList {
      constructor() {
      this.fetchItems()
      this.renderItems()
      this.bindEvents()
      }
      }
      Затем просто инициализируем:
      new ProductList()
      По поводу "прослушивания событий" - в методе bindEvents навешиваем на document событие click, определяем цель клика и если кнопка "Добавить в корзину", то делегируем событие (объект event) отдельному методу класса, который уже и будет обрабатывать клик по конкретной карточке.
      Вообще, задачу эту можно решить множеством способов. Сделай так, как тебе кажется удобным. Главное, чтобы работало.

    • @alexandraweather4156
      @alexandraweather4156 6 หลายเดือนก่อน

      @@AleksanderLamkov большое спасибо!

  • @BjarkiJohanne
    @BjarkiJohanne 6 หลายเดือนก่อน +46

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน +3

      Я покажу в следующем мастер-классе, как можно их использовать 🙂

    • @AleksanderLamkov
      @AleksanderLamkov  6 หลายเดือนก่อน +10

      Забавно. На нескольких роликах моего канала похожие комментарии с упоминанием Skypro, залайканные по ~50 раз.
      Я понимаю, что это вы так рекламируете себя.
      Не мне судить о ваших способах пиара, но своих подписчиков предупрежу - анализируйте, пожалуйста, курс перед покупкой, смотрите программу обучения, изучайте условия, сравнивайте несколько предложений и не принимайте поспешных решений.

    • @schwarzbrecht7624
      @schwarzbrecht7624 2 หลายเดือนก่อน

      Прикольный пиар)) не замечал никогда такого.
      Что, пожалуй, действительно стоит покупать у них - курсы по маркетингу)))

    • @dsgnlive
      @dsgnlive หลายเดือนก่อน

      ​@@AleksanderLamkovне лучше просто удалять подобные комментарии? Скорее это боты.

    • @AleksanderLamkov
      @AleksanderLamkov  หลายเดือนก่อน

      Это единственный комментарий, который я решил оставить, ибо я уже его компрометирующе прокомментировал 🙃

  • @Zefurfy
    @Zefurfy 6 หลายเดือนก่อน

    Всегда думал, что в js классов нет.

    • @VicVlasenko
      @VicVlasenko 6 หลายเดือนก่อน +1

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

  • @ProgVipe
    @ProgVipe 4 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  4 หลายเดือนก่อน +1

      Да, тема прям непростая. В ближайшие недели на канале в рамках текущего курса будут уроки, где будем использовать классы для реализации конкретных UI-компонентов. Надеюсь, что это закроет ещё часть пробелов по этой теме :)

  • @De6a-cu7vq
    @De6a-cu7vq 3 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  3 หลายเดือนก่อน

      Например в какой момент? Можешь таймкодом написать, пожалуйста.

    • @De6a-cu7vq
      @De6a-cu7vq 3 หลายเดือนก่อน

      @@AleksanderLamkov в целом сама подача материала, не я ничего против не имею всё качественно звук, видео... Но как для меня быстро и не для совсем новичков. Как будто декларация или лекция в инстике:)

    • @AleksanderLamkov
      @AleksanderLamkov  3 หลายเดือนก่อน

      Я всегда сопровождаю свою речь кодом настолько часто, насколько это возможно. А если считаю, что по конкретному коду требуется ещё что-то рассказать, то я рассказываю.
      С лекцией сравнение мне не нравится, т. к. я не университетский лектор на зарплате, зачитывающий методичку двадцилетней давности. Я практикующий разработчик со свежим опытом, готовлюсь к каждой теме видео не один десяток часов, выдавливая и вылизывая сценарий так, чтобы в нём не осталось лишнего.
      Если считаешь, что всё равно моей работы над материалом недостаточно и можно как-то ещё ужать и круче подать материал - попробуй поучись на условном Яндекс Практикуме или на learn javascript ru. Удивлюсь, если тебя надолго хватит.

    • @AleksanderLamkov
      @AleksanderLamkov  3 หลายเดือนก่อน

      P. S. И в универе тебе так свежо про JS точно не расскажут. Если вообще про JS хоть что-то будет в программе обучения. Скорее нудятина про C и ассемблер. Поверь, я знаю, я там был и через всё это проходил.

  • @Yghtu555
    @Yghtu555 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  หลายเดือนก่อน

      Что именно не так? Прошу, дай более развернутую обратную связь.

  • @0ver4ance
    @0ver4ance 5 หลายเดือนก่อน

    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()
    У меня такой код вывел в консоль "Страна: Россия" без ошибок