prototype и __proto__ / JavaScript для собеседований 01
ฝัง
- เผยแพร่เมื่อ 18 มี.ค. 2020
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Prototype и __proto__, пора разобраться ;)
Друзья, мир JavaScript-а огромен. И есть его огромная часть, которую я бы назвал так: JavaScript для собеседований.
Это тот JavaScript, который не нужен тебе каждый день, но который как бы нужно знать. Зачем? Ну как бы нужно)) Да, объективно, когда ты senior-разработчик, ты сталкиваешься с более навороченными задачами и оптимизациями , и тебе важно знать, как JavaScript работает внутри, чтобы решить свои задачи правильно.
Джуну этого знать не нужно. Одна из таких тем, это #prototype и #proto
Ну в современном синтаксисе вы не используете явно prototype, а там где он используется неявно.. вам в принципе не важно, как там эта цепочка прототипов работает.
Но всё же...
Встречаем, #JS для Interview часть 1: prototype vs _proto_
Поддержать проект монеткой: social-network.samuraijs.com
Платное обучение в онлайн или оффлайн инкубаторе:
it-incubator.eu
it-kamasutra.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_samurai
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
Хорошо разжевал, давай также обязательно про контекст (this) видео! Кто за контекст, поставьте лайк под комментом, чтобы автор увидел!
Да кто такой этот твой контекст?
@@timi4393 я почитал доку и впал в глубокую апатию изза контекста this..... ну не совсем.... чуть не впал.... раньше впадал, сейчас я научился держать мой ум и сознание под контролем и не отчаиваться.... ну по крайней мере начинаю это делать
@@user-gl8qs7qj4k ну как успехи натренировал ум?
@@user-gl8qs7qj4k this объект перед точкой. это всё
@@andTutin а тут чему будет равно?)
[3, 5, 8].forEach(function() {
console.log(this);
});
а тут?)
let x = this;
а тут?)
Click to Remove Me!
Тема не то, чтобы сложная, но довольно запутанная, и это лучшее объяснение из всех, которые я встречал
На столько детально и как для самых тупых))) Я такое люблю хахаха))
Поддерживаю
Пересматриваю это видео уже в 5 раз, так как оно просто идеально подходит для того что бы освежить память
1 раз когда только учил js
2 раз когда понабодилось в учебном проекте
3 раз когда готовился к первым собесам
4 раз когда боролся за право получить место в интенсиве
И вот сегодня, я уже стажер крупной компании и у меня на носу технические прогоны, а я все еще через года смотрю на этого молодого димыча и все так же черпаю с его канала знания. Спасибо тебе, золотой)))
2024, урок топовый, такого объяснения ни где не находил! По ответам 9/10, поторопился чутка:)
В конце ответил 10 из 10 )) Хотя вначале даже не пытался ответить т.к. знал, что реально не понимаю тему :) Спасибо!
Молодчик!!!
С разных курсов платных направляют на твоё видео! Ты лучший, сначала прошёл у тебя 100 выпусков пути самурая и, по праву считая себя самураем, пошёл шлифовать знания в академию. И там тоже ТЫ! Самые доступные, понятные, добрые ролики. Димыч, ты просто лучший
До видео: 10/10 наугад, ничего не понятно, интуитивно, голова трещит
После видео: 10/10 все понятно, жизнь прекрасна!)))
Формат супер! Очень помогло твое видео структурировать все по полочкам)) Даже схему себе нарисовал какие объекты от каких объектов "рождаются"
Уже 2021 а это все равно лучший видео урок в истории !
уже 22 и все еще лучший урок в истории
@@augustcaesar2589 уже 22 + 2 месяца и это лучшее видео в истории
@@demialsomber6646 уже 22+9 месяцев и это лучшее видео в истории)
@@andreyhrypich2721 уже 23 + 8 дней и это лучшее видео в истории)
Вечно зеленный урок
Отлично помню эту тему) Просто потому, что на двух собеседованиях о них спрашивали и оба раза тупо промычал. Помню, как потом перерыл не один десяток материала) А вообще тема важнейшая ребят. Это фундаментальные основы, которые ведут к пониманию языка. Димыч, как обычно, все четко!
Вейсал Таштанов спасибо что написал, я думал это чисто для галочки на совбесах.
К пониманию костыльности языка
Тоже удивило, что тема заявляется "для собеседований".
Это же, фактически, один из основополагающих механизмов работы js.
Его надо понимать.
Обалдеть! Отличная подача! По 5 раз повторять одно и то же как малышу оказывается очень эффективно. Все запоминается и становится понятно :)
а это вообще законно так все разжевывать как детям и так понятно объяснять все что аж вопросов не осталось? я думал он еще меня покормит и спать уложит)) однозначно лайк
Как я восхищаюсь, насколько искренне ты хочешь помочь разобрать и понять материал, и стать лучше, боже, ты крутой!
очень редко пишу комментарии, но тут не могу сдержать в себе благодарности за такое шикарное объяснение. Спасибо огромное!
У Димыча нету стрингов 😆
Подача просто чудесная, огромное спасибо🎉🎉🎉
Таких уроков нет ни у кого!
Простыми словами
У любого объекта есть свойство __proto__ это ссылка на свойство prototype конструктора с помощью которого был создан объект.
В свою очередь свойство prototype это объект, который содержит в себе свойства и методы. Свойство prototype есть только у функций, которые были созданы с помощью ключевого слова function или class (это функции, которые могут быть конструкторами).
У каждой функции свойство (объект) prototype свое и оно равно только той же функции (конструктору).
У объектов, созданных с помощью одного и того же конструктора, свойство __proto__ равны (то есть объекты имеющие один и тот же конструктор ссылаются на один и тот же prototype (объект))
В конечном итоге каждый объект имеет ссылку (__proto__) на объект prototype своего конструктора, от которого наследуются свойства и методы, а этот конструктор в свою очередь тоже имеет ссылку (__proto__) на свой прототип и так по цепочке.
Спасибо! Буду очень рад увидеть твоё объяснение для Symbol, итераторов и генераторов.
Ваще красавчик! Для карантина самое то Димыча посмотреть )))
Очень полезный формат, кто если не Димыч так по свойски объяснит=))) огонь!
Правильные ответы:
До просмотра: 0
После просмотра: 10
Спасибо, Димыч!!!!!!!
Какой же ты молодчина, Димыч. Спасибо за твой труд!
До видео: 4/10 наугад, после видео 10/10 абсолютно осознанно. Спасибо!
Димыч,спасибо тебе огромное за твой труд! До просмотра видео вообще не понимал сути, в конце решил тест и получил 10 из 10, очень грамотно объясняешь,лайк)
Ребята, продолжайте заниматься тем, чем занимаетесь, вы лучшие ;-) у вас всегда доступно понятно, с первого раза всегда понимаю все
Это что-то, как же понятно вы объясняете!
Димыч!!!!!!!!
Это просто бомбический формат донесения до низкоуровневых умов высокоинтеллектуальной IT информации!!!!!!
Так что не бросай такие объяснялки они очень помогают с понятийным аппаратом!!
Спасибо!!!!
Отличная идея. Хороший видос, всё понятно. На задании в начале я такой просто: *гифка с Траволтой из Криминального чтива*. В конце 7 правильных ответов. Прорешаю домашку и ещё раз пересмотрю видео.
Раньше были какие-то знания по прототипам, но теперь всё по полочкам раскладывается в голове. Спасибо, Димыч. Летим дальше!))
Это самое офигенное объяснение прототипов которое я когда либо видел! Хочу больше подобных видео!
Джунам как раз это знать надо. На собезах прототипы - это любимые вопросы работадателей.
Дима, большое тебе спасибо за твой труд и желание сделать Мир IT более понятным для начинающих разработчиков. Прочитала в learn JS эту тему - думала, что поняла о чем там говорится, но когда начала смотреть видео и встретила тест вначале, сомнений не осталось, что суть описанного в учебнике прошла мимо))) В конце видео выполнила тест на 100%! Ты большой молодец!
В который раз повторяю, что у Димыча ТАЛАНТ, ТАЛАНТИЩЕ к объяснению сложных тем четко, структурировано и простым языком.
Лучший IT-блогер на всем видеохостинге. Спасибо и продолжай в том же духе!
Объяснение как всегда на высоте! Всё чётко и без воды! Лайк)
Круто, спасибо, Дима! Как всегда объяснения на высоте! Все понятно. Первый слайд с вопросами даже не стала пытаться ответить, так как понятия не имела ни o #__proto__ , ни о #prototype ! После урока 8 из 10 ответов верные, и ошибки свои тоже поняла. Спасибо, учитель!
Димыч! огромное спасибо. В начале видео сделал 6 ошибок, а в конце уже без ошибок. Формат шикарен.
Это просто офигенный формат! Когда не только объяснил, но еще и самостоятельно задачки порешать предоставил, а потом разобрал. Это максимально мощно
До видео: 4
После: 9
Очень круто! Спасибо. Ждём продолжение данного формата))
9 из 10 (правильных ответов), объясняешь великолепно Дима.
Димыч как всегда - супер мега интересно и понятно
JavaScript prototype __proto__
Урок просто бомба! Вот эта твоя фишка в самом начале: реши задачки, если думаешь, что тебе оно не надо)) - затянуло с первых секунд! Ну и, конечно же, в конце урока решил все задачи! Короче, все шикарно!
обычно мне не очень нравятся ваш формат, но вот это видео действительно оОочень хорошее и поучительное получилось, блин честно сказать я даже не ожидал ) спасибо
еще для тех кто изучает может быть полезным как работает new конструктор, чтобы понять нюансы
1.он создает новый объект
2. он записывает в __proto__ этого объекта ссылку на родитель.prototype
3. передает контекст this и записывает (то что мы указали в нашем классе)
4. возвращает наш новый объект
Спасибо, что не останавливаешься!
спасибо за обратную связь!!!!
у меня 8 правильных) кажется я поняла тему ☺️спасибо большое) очень классно объяснили)
Димыч красавчик лучший куратор))) максимально сверх доступно розьяснил, категорически благодарен тебе)))
Очень полезно и понятно, благодаря тебе каждый день могу смело говорить, что не топчусь на месте, а двигаюсь с все большим интересом вперед.
Вот у человека моторчик в одном месте, рассказывает офигенски =) просто берет, открывает голову и кладет инфу внутрь)
Расскажите про контекст, пожалуйста!
Вы очень круто объясняете сложные вещи простым языком)) Спасибо вам огроменное!)))))
0 до, 7 после
Такой формат определенно нужен! Он клевый и полезный! Большое спасибо автору за видео и старания!
Почти идеальное разъяснение темы.
В любом случае - лучшее, что я видел.
6:10
не будет __proto__ у объекта Object.create(null, { ... })
также __proto__ у Object.prototype будет равен null
Да, тоже усомнился что у Object есть свой prototype! Говорит же, что только у класса и у функции.
И еще третий комент: братан, очень бы пригодился видос по темам js, которые нужны джуну. А то генераторы, декораторы, фигаторы и думаешь: то ли сидеть разбираться с каждым, то ли пропустить и в процессе работы в компании нужное узнать.
Случайно попал на этот видос, и это лучшая подача которую я видел, твой канал просто находка. До этого вообще не знал что такое прототипы, но в конце усвоил все что ты говорил, ты лучший!
Такой формат не то что заходит, а прям залетает!Чувствуется что каждое каждое слово, пауза, вопрос подобраны верно и заставляют думать, концентрироваться на теме. Спасибо огромное, за такой грамотный подход! Теперь я осознал __Proto__ и prototype
Димон, как всегда красавчик! У меня сын с 10 лет идет по твоим урокам)
уго круто! Сорри, что в некоторых видео ругаюсь!! Оосбенно в спонсорских! Но стараюсь минимизировать ругань!)
@@ITKAMASUTRA Все впорядке. Он не комнатное растение. Говорит:"хочу у Димона учиться". Так что в конце мая Вам позвоним:) Сейчас знает:Фотошоп:уровень - диз,рис,анимация; HTML-CSS-верстает сайт уровня Dev.by, медиаЗапросы,через Position:relative/absolute,умеет вставлять карты,гугл-шрифты,ютуб ролики,создавать свой муз плеер на странице,гриды не знает;Bootstrap;Git-уровень залить/скачать,ветки не знает; Jquery(по рекомендуемой Вами книгой)+возможно успеем таск-лист,JS-ваши уроки "с нуля"+фетч страниц Онлайнера и отрисовка их через массив объектов, реальный кнопочный калькулятор,работа со временем,и постараемся успеть модальное окно.
Спасибо за ответ. Громаднейшее спасибо. Благодаря Вам растет крепкая поросль)
Рад стараться и рад за успехи вашего сына!!!✊🙏🚀
@@istoric7221 извините не хочу быть грубой , но дайте ребёнку жизнь и в конце концов побыть ребёнком, не ломайте ему жизнь. Вы хотите чтобы потом в юности в его памяти из детства были только гугл-шрифты, карты и тд? Не надо грузить его своими мечтами и желаниями. Извините ещё раз, я не хочу агресии от вас, а просто чтобы вы задумались над над другой стороной этой ситутации
@@alinahalushko3566 большое спасибо что посоветовали проф педагогу с 2 образованиями. Теперь я благодаря вам все понял в жизни.
Нужно срочно про контекст this такое же видео. Уверен, что не все мидлы с ним на ты общаются)
Да, тема сложная!
Ну с мидлами это ты загнул)
Отличный формат! Спасибо!
По тестам: до 8, после 10!(на 2й задаче чет засомневался и в 9й исходно думал Object)
console.log(shogun.__proto__.__proto__ === Object.prototype)
console.log(shogun.__proto__.construrtor.__proto__ === Function.prototype)
console.log(shogun.__proto__.__proto__.__proto__ === null)
Хороший формат! Досконально и по делу.
Спасибо большое за такую ценную информацию! Я несколько контентов посмотрел, и только после этого видоса понял разницу между ними! Всё ясно и всё по полочкам! Всех благ и здоровья вам! Буду ждать новых таких же видосов!👏👏👏
Здесь чуть позже я оставлю ссылку на разбор домашки:
vk.com/itkamasutra
instagram.com/itkamasutra
telegram.me/itkamasutra
Обязательно напишите в комментах, плиз, как вам такой формат и... обязательно оставьте результаты теста до объснения и после!!! 🚀✌
Тезисно о чём видео:
1. у любого объекта есть св-во __proto__
2. любой объект создаётся с помощь класса: new SomeClass()
3. __proto__ объекта указывает на прототип класса, с помощью которого, объект был создан:
obj.__proto__ = ClassName.prototype
Слушай, а почему __proto__ в стандарте отсутствует???
Как mdn утверждает.
Задротская поправка: прото - ссылка на объект, а прототип - объект. Прото - ссылка.
Я бы сказал, что и прототип - ссылка на объект!!!! )
@@ITKAMASUTRA Я подвис на пару минут в этот момент. Возможно... потому что видимо есть класс на низком уровне и это наследование от основного инстанса объекта условно низкогоуровня. Короче, делай почаще видео, я хотел бы вернуться в программирование обратно и ты реально круто объясняешь тему. Спасибо что ты есть ))
Спасибо! Просто человеческое спасибо, Димыч! Приятно смотреть такие видосы.
Это гениальный урок, много видео смотрел и статей прочёл, но чтобы уже после 15 минут у меня наконец-то сложился весь пазлл в голове - не помню. И практика гениальная и подача идеальная - никакой воды. Не помню уже чтобы я когда-то был настолько восхищён подачей материала. За такие уроки хочется даже донатом спасибо сказать.
Как пройду собес - подпишусь) Потому что такая деятельность должна поддерживаться и служить эталоном. (По-крайней мере если остальные уроки такого же уровня)
@@MorfinBrood как успехи?
@@MorfinBrood а так да, вы правы! Урок шикарный !
Лучшее объяснение что я видел, спасибо большое за вашу работу👌
Спасибо за видео.
Очень помогло!
Есть не очевидные вещи, которые ты объяснил и вопросов не осталось.
Спасибо за видео! Объяснил так, что даже я понял)
И классно, что рассказываешь эмоционально, живо, заинтересовано.
Будет круто, если продолжишь записывать видео, как работает все в JS внутри
Офигенно, без остановок все просмотрел и на все правильно в конце ответил, хотя сначала вообще не знал о чем это)) отличный учитель, аж захотелось к вам, чтобы вы помогли мой талант в программировании, учить начал 2 месяца назад )
I have never seen such a brief explanation. It was really clear and strightforward explanation. Thank you.
Димыч, очень нравится твой контент. Спасибо огромное! Ща на ютубе появилось столько «преподов», у которых, что объект, что класс - все одно и тоже. В твоих уроках всегда прослеживается логика, и что очень важно используется правильная терминология! Продолжай снимать ❤
Ты божественно объясняешь!!!!!Спасибо, подготовка к собесу идет полным ходом
Димыч, это бомба))Спасибо за объяснение!
Полезное видео. Для меня было открытие что у примитивов есть __proto__
Но многие моменты не затронуты. Например, что такое [[prototype]] ?
__proto__ не всегда ссылается на прототип класса/функции, с помощью которого был создан экземпляр объекта, может ссылаться на любой объект.
__proto__ работает не только как геттер, но и как сеттер, т.е. можно одному объекту указать в __proto__ другой объект и тогда первый будет наследовать методы и свойства другого.
Димычь, спасибо за инфу. Теперь все стало на места. Давай больше таких видосов!!!
Давно не встречал такой видеоурок с таким хорошим объяснением. СПАСИБО
Блииинн, нееет! Почему только один видос в этом плейлисте :( Я был так рад что нашел что-то такое, а видос всего один! Мне так жаль что нет других подобных
Спасибо за видео. После просмотра 9 правильных ответов :) отличный формат, расставляешь по полочкам все, ждём контекст и далее.
24:05 послышалось
Спасибо, Димыч, ты лучший, даже самый туго доходящий поймёт такое объяснение.
Лучшее объяснение, которое я встречал) Спасибо!
Спасибо за видео! У тебя явно талант обьяснить сложные вещи простыми словами
Димыч, очень крутые уроки! Спасибо большое!)
Это лучшее объяснение prototype и __proto__ из всех что я встречал. И как всегда все простым и понятным языком. Димыч, человеческое тебе спасибо от всех начинающих пограмистов!!!
Умничка! Очень живо и позитивно! Жму руку! Респектую!!
Негде так клева не объясняют. СУПЕР
Лучшего объяснения по данной теме я еще не встречал! Спасибо!
Спасибо! круто! уже подзабыл эти вещи, до видео тест 5 из 10, после видео с очень толковыми примерами - 10 из 10! Спасибо, Димыч!
За полчаса видоса узнал больше, чем за целый день чтения в учебнике) Спасибо!
Блин, братан, спасибо огромное. Особенно за вот эти моменты тренировки. Это очень помогает. Готовлюсь к собесу, совершенно забыл всю эту хрень. Ты лучший
Дмитрий, спасибо. Очень доходчиво. Как раз готовлюсь к собесу и нашла это видео.
Занимаюсь более года Js'ом, но именно после этого урока осознал что такое прото и прототайп. Спасибо, подача что надо!
Клево , теперь понятнее стало, что такое класс и функция )
Понятный формат , молодец ! Продолжай делать такие видосы )
Отличная подача материала. Спасибо за него и будем ждать продолжения
Огонь. Прям вдолбил основательно в голову по полочкам 👍💪 Благодарю!
Спасибо, посмотрел просто для ознакомления, сейчас беру блокнот, ноутбук и заново!
Готовлюсь к собеседованию, прототипы смотрю по этому видео, все классно!
Этот ролик -- самое исчерпывающее руководство по __proto__ и prototype, которое я когда-либо находил. Спасибо за детальное объяснение) Теперь досконально понял эту тему :)
Как же ты здорово объясняешь!
До видео 5/10, после 10/10.
Классное объяснение, все ясно и понятно)
И крутой формат видео! Давай еще)
Хотела бы услышать про промисы и замыкание)
Димыч ты гениально объяснил. Браво!
Бро, офигенный урок, спасибо большое!
Было 8 правильных, стало 10 и полное понимание в голове, спасибо Димыч!!!!
Супер урок, все четко разложено, и дал возможность самим подумать, на практике применить полученную информацию.
настолько классно записаны видосы что на х2 всё чётко и понятно)
Как всегда на высшем уровне! Давай контекст! Спасибо!!