Урок 6. JavaScript. Объекты с Object.create. Что такое getters, setters
HTML-код
- Опубликовано: 19 июн 2019
- Получить профессию Frontend разработчика -
bit.ly/3uUCgWD
Подробнее узнать об обучении в Result School -
bit.ly/39Z20qb
Бесплатный курс HTML & CSS - bit.ly/3wAomt9
Сделать 5 проектов на JavaScript - bit.ly/43ebXYl
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Урок 6. JavaScript. Объекты с Object.create. JS getters, setters
В ролике я расскажу про гибкую настройку объектов в JavaScript.
Вы узнаете про PropertyDescriptors, getters, setters и про цикл for in
Так же поговорим про метод hasOwnProperty
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
Я так понимаю, что через несколько уроков у меня будут уже все данные на Владилена. В этом ролике вот год рождения получил, а там и до паспортных данных не далеко )
Большое спасибо за уроки!
Очень понравилось видео! Но два важных уточнения :
1) 13:28 Чтобы итерировать по собственным свойстам объекта, отсеивая свойства прототипа(-ов), не обязательно проверять внутри цикла, является ли свойство собственным, а можно воспользоваться встроенным методом Object.keys(), который возвращает итерируемый объект (а именно - массив) из собственных перичесляемых свойств объекта. Например:
for(let i of Object.keys(person)) {
console.log(i, person[i]);
}
2) 7:15 В случае если значения дескриптора writable равняется false, а configurable - true, значение ключа возможно не только удалять, но также и переназначать - правда, с помощью оператора "=" это действительно сделать невозможно, но зато возможно с помощью метода: Object.defineProperty(). Например: Object.defineProperty(person, 'name', {value: 'Maxim'}); или Object.defineProperty(person, 'name', {value: 'Maxim', writable: true, configurable: false}); // (результат этих двух строчек кода будет один и тот же, так как если значения дескрипторов не переназначать, сохраняются их прежние значения, а не дефолтные).
ЛУЧШИЙ ЛЕКТОР ПО ПРОГРАММИРОВАНИЮ В ИНТЕРНЕТЕ!!! СПАСИБО!!!!!
Лучший? заходи ко мне!)
😂😂😂😂😂
Все понятно и доходчиво.
Учусь во основном на твоих уроках!
Нет воды, все по теме.
Спасибо тебе за труд!
🙏
Пытался прочесть в рифму, увы, тщетно )
@@borik9125 хокку жи
Чувак, очень круто, спасибо, быстро, понятно, очень ценно, поскольку не основы, а глубина! Спасибо!
Очень полезные видео, действительно не каждый препод на ютубе говорит про эти темы, спасибо большое за твои старание!
Timecodes:
0:52 - Object.create()
3:14 - for...in
4:32 - Property Descriptors
8:10 - getters, setters
Самые лучшие лекции по JS. Спасибо!
Отличное объяснение!
Спасибо Вам за труд!
Очень сложные темы доступно раскрыты, глубоко и в то же время максимально сжато. Спасибо большое. Смотрю по одной теме в день. Повторяю. Это обязательно поможет на собеседовании. Да и на проектах будет меньше конфуза.
Владилен, шикарно, спасибо огромное)
такой пул информация в кратчайшее время, не мог не прокомментировать)
Очень полезный контент. Огромное Вам спасибо!
It is very understandable and useful content. Thank you very much!
Спасибо за полезную информацию!👍👍
Спасибо, очень полезный контент!!
охеренные уроки, спасибо! В связке с документацией и learn.javascript особенно круто заходит
Спасибо! Как всегда, супер!)
Отличный урок, спасибо
Спасибо за хорошие уроки)
Спасибо Вам огромнейшее!!!
спасибо за науку и пусть тебе твое учительство принесло больше пользы ))
спасибо большое Владилен Минин
Спасибо тебе за труд!
спасибо за классный урок!
Очень полезный материал. Уже придумал много кейсов, где можно использовать это в проектах.
Очень все доступно и понятно)
Класс!!! Мощный инструмент! Обычные классы с приватами и пабликами курят в сторонке ))
Спасибо, хорошее объяснение. Оказывается, геттеры и сеттеры это не так страшно)
да еще и полезно!
БУМ. Совершенно для меня новая информация, как будто апнул левел. Никогда даже представить не мог, что свойствами объекта можно манипулировать и что у свойств есть свои свойства :D
Очень понравилось видео!
Отличное видео👍
Четкое пояснение
Всем все понятно и доходчиво в комментариях ),а я один походу
все уроки по 4 раза пересматриваю и практикуюсь, что бы уловить суть?
Владилен спасибо за уроки и курсы на юдеми :)
Не ты один такой) Мне вот тоже приходится по паре раз пересматривать, читать, гуглить другие видео смотреть!
я тоже нифига не вкуриваю с первого раза. для себя решил что буду просто хавать всю инфу подряд (и обязательно записывать все, что действительно важно, а очень важные моменты держу всегда под рукой). а потом на практите все подтяну. я так хтмл и цсс учил, прочитал 3 книги, вроде все понял, а перешел к практике и впал в ступор. в итоге пока сам не написал несколько сайтов - не разобрался, но база, которую получил из книг в виде общей теории - очень сильно помогла. надеюсь так же изучить js. вообще трудно что-либо изучать, когда не понимаешь, где это использовать на практике. например я понятия не имею, как мне на практике пригодится object create, если я могу использовать обычное создание объектов через object = {}, и оно сможет решать мои потенциальные задачи, но перейдя к практике, уверен, найду применению этого урока.
p.s.: хотел поделиться методом своего обучения. если кто дочитал до конца - поделитесь плз как учитесь вы.
Полезный урок!
Все понятно, двигаемся дальше?)
Владилен Минин
,
Пожалуйста, делайте по больше обучающего контента, это очень важно для нас не останавливайтесь ведь вы делаете благое дело, для тех кому очень важно!!!! Программирование и данное направление, спасибо вам большое!
Владилен, спасибо вам за уроки. Хотел бы узнать, как часто в боевых проектах используется get и set и в каких приблизительно случаях. Спасибо
MysteriousXcode Sterio и так почти каждый день ролики, это тяжело)
E1EMENT лично я не очень часто этим пользовался, но зависит от проекта
Русскоязычные уроки js ограничиваются в своем большинстве основами, более глубокий материал, какой подаёте вы - редкость и на вес золота, успехов вам в карьере и моя благодарность за старания для нас !)
Намного понятнее стало!
Очень полезно!
Все стало понятно
Полезно!
Thank you!!!! it is very useful!!!
Привет Владилен у нас в Компании учат по твоим Видео))) Хороший уровень видео!!!
Спасибо тебе!
Спасибо! ❤😊
Супер канал
Super! 👍🏻
Спасибо!
Хорошее видео
супер, летим в космос =)
тебя димыч подослал?))
Ахахахах) просто безумие)) возможностей после урока миллиард, да это же почти модификаторы доступа)) теперь после урока про прототипы можно запросто свои интерфейсы пилять)) хотя конечно с нынешними фреймворками дело не совсем нужное) спасибо за лекцию))
Лучше использовать Object.create или функции конструкторы? Пока не уловил преимущества и недостатки каждого из способов.
Что используется чаще на практике?
Четко
Спасибо
спасибо
Про ImmutableJs посмотреть бы
super video
А у нас лектора несут какую то дичь из 80-ых)).Красава братан, лукас от душы)
Klasssss !!!
Не знал кстати, что можно так тонко настраивать объекты при их создании, думал так можно делать только через Object.defineProperties :-) спасибки
будешь рассматривать в дальнейшем Object.defineProperties, Object.defineProperty и остальные интересные операции с объектами?
Эти методы уже не буду, потому что я дал достаточно знаний, чтобы прогуглить эти методы и понять как они работают)
Очень жду Proxy и классы
красава
спасибо большое за ваш труд, есть замечание
не всё в js объект: строки, числа и прочие примитивы не объекты, когда вы обращаетесь к свойству/методу примитива интерпретатор js создает временный объект обертку для соответствующего примитива, в которой хранятся методы и свойства
высказывание "всё в ${имя ЯП} объект" это скорее про пайтон
Жду Proxy :D
А можно ли налету программно менять значение свойств, ну скажем writable: true на writable: false (и всех других тоже) или надо переопределять весь объект заново?
жду от вас уроки про vue-class-component, vue-property-decorator
Да, вероятно они будут
Владилен, подскажи, в каких случаях в работе нам удобно использовать именно такую инициализацию объекта, и использовать геттеры и сеттеры?
отвечу за него, скорее всего где нужна тонкая настройка свойств и методов, перебираемость, изменяемость, удаляемость
В ООП / инкапсуляция
super
Спасибо за доступное и понятное объяснение. Единственное что я так и не могу представить, где можно данный способ использовать. Подскажите конкретный пример плз))
Применения объекта применяется всюду. В основном в них хранят данные и используют. Чтобы было понятнее, посмотри для чего используют объекты на ютубе. На практике
@@dmitryulanov9395 Уверен, Миша спрашивал, в каких случаях не просто используют объекты, а именно объекты созданные при помощи Object.create
Немного не понял смысла сеттера, если его использовать то значение поля не изменится, а прописать writable: true сеттеру нельзя
Как Боженька все разжевал.
не особо понял но очень интересно 👍
Ппц. В 1993 я школу закончил. В институт поступил. Теперь сижу, подтягиваю JavaScript...
И я) 1976 г.р.
Ха) Я вообще 1973 г.р.)) И тоже учу JS)
я из 2005 и учу js
@@vana__f7570 я родился в 2006)
@@kaltsdaniil8378 Я родился в 2006;)
Отличное объяснение! Не понятен только 1 момент из всего: как нам через сеттер сделать то, для чего, собственно, он служит: задать значение переменной? Если там объявить this.age = value - он завернется в loop
Вроде как напрямую нельзя, но можно менять значения у которых writable: true и от которых образуется значение для age с помощью get, в данном случае поставить для поля birthYear writable:true и менять его в set у поля age
set(value) {
this.birthYear = new Date().getFullYear() - value;
}
@@Furamy ну, наверное как-то таак, да....других вариантов вроде не видно)
Очень хорошее объяснение, но не для новичков.
Спасибо за полезеную и понятно изложеную информацию. Но большая просьба ты в многих видео говоришь что практика и только практика закрепит хорошое понимание языка так вот просьба давай хоть какое-то задание пусть даже обсурдное
Переписал код из видео?)
как правильно используют эти два параметра в функции object.create({},{})
Пока что мне пришло в голову только то, что во втором параметре мы пишем логику, вычисления, проверки, а в первом описываем например вывод шаблонов (кусков html с динамически изменяемой информацией)
но я не уверен в своих догадках
👍👍
сделай уроки по ImmutableJs
А почему мы метод calculateAge положили в прототип а не в сам объект? какой в этом смысл глобальный?
Для продвижения ролика)))
Откуда вы берете эти знания? Смотрел на mdn по object.create, но там про дополнительные поля writable и прочие нечего не написано, есть только пример, но что они делают не написано
Привет Владилен, очень круто исложено!!! а откуда брать інфу про єти дискриптори?
JavaScript работает на стандарте ECMAScript. Ответ на ваш вопрос находтися тут tc39.es/ecma262/#sec-object-type
А в get() - мы не принимаем параметр? не совсем понятно как на практике использовать его. Можно какой то пример?
Не принимаем. Например валидация или трансформация
Пример в уроке
Крута
Ваше объяснение темы сеттеров и геттеров третье по счёту и все объясняют только часть. Сколько ещё видосов надо посмотреть, чтобы полностью изучить эту тему?
Друзья, советую купить курсы Владилена на Udemy.
судьба object create после появления классов class Object, где внутри можно поместить и свойства и методы, учитывая отсутствие таких модификаторов в классе, как privet, protected - необходимость set, get весьма сомнительная.
Шпаргалка
14:00 юзать метод объекта hasOwnProperty(), когда используется цикл for (let ... in ...)
так и не понял зачем в age get() если можно просто переменную завести с таким значением или функцию, да и set такая же шляпа, можно же в объекте отдельный метод какой-то сделать который будет что-либо считать или проверять, что я не так понял?)
Данный синтаксис : объявление getter и setter внутри дескриптора свойства не работает (геттеры и сеттеры просят указать название) . Объясните что не так
Что за модуль который скобки автоматически переносит?
Спасибо за урок! Не знал даже не догадывался о таком создании объектов в JS.. А где в реальной практике это может быть полезно? Это и есть полная реализация инкапсулированных свойств объекта
Реализация реактивности в фреймворках например
Vue раньше на этом целиком был построен
@@VladilenMinin а реакт нет?
@@-it-kidys Про реакт не помню, но вроде у них другой механизм
@@VladilenMinin Во Vue и сейчас вся реактивность на Object.defineProperty() :) Или ты имеешь ввиду, что там раньше было именно через Object.create()? Вот про это я не вкурсе.
В 3-ем должна быть реализация реактивности уже на Proxy.
Так и не понял в чём разница между get и set
комментарий для продвижения)
слушайте, я тут подумал, а может быть комбинирований об*ект?
Вот что я имею ввиду:
name: {
value: 'Dmytro',
enumerable: true,
writable:true,
configurable: true
},
birthYear: {
value: 2004,
enumerable: true
},
age: {
get() {
return new Date().getFullYear() - this.birthYear
},
set(value) {
document.body.style.background = '#f0f0f0'
console.log('Set age', value)
}
},
work:'Programer'
как-то так я просто в конце описания об*екта написал work:'Programer' как мы писали раньше
Почему в set() нужно обращаться к document а не к window?
комментарий из нескольких слов для пуша видоса
Круто с примерами, но не понятно зачем нужны get и set? какой смысл, если всё это можно обычными методами сделать. Не понял задумки магов JS.
для продвижения канала
Почему после того, как ты внутри for..in написал hasOwnProperty не вывелись свойства age и birthDate?
Ты же их не в первом объекте создавал
Потому что по умолчанию enumerable = false
Можешь показать создание сайта на реакте? простого, но с админкой
На канале курс по мерн