JavaScript - от this до прототипов | Юрий Федоренко

Если нужно что-то понять про Front-end специалиста с двух вопросов, надо попросить его рассказать две вещи:
1 - Про this в Javascript
2 - Про прототипы в Javascript
Это темы, которые невозможно обойти на качественном собеседовании по Javascript.
Справочник по Front-end - itwiki.dev/front-end
Канал Юрия в Телеграме: goo.gl/UDDPjd
И дополнительный бонус на тему js: статья Дмитрия Сошникова goo.gl/MRn3AH
00:00 - Вступление
0:25 - Про this в Javascript
0:58 - Динамичность this
2:10 - Чему и когда будет равен this
3:59 - Прототипное наследование
5:50 - Зачем нужны прототипы
6:59 - Функции как объект
11:33 - Вызов функции с помощью оператора new
12:47 - Послесловие
Компьютерная Школа Hillel
Сайт: ithillel.ua
Facebook: / hillel.it.school
Instagram: / hillel_itschool

[@enigma9445]

Спасибо друг, лучшее explanation 👏

[@HillelITSchool]

Раді, що стали в нагоді 💙

[@alexandertsvetkov6120]

Вот бы всем так объснять! Спасибо, все стало на свои места!!!

[@pandaskeptic2937]

Отличное видео! 👍 👍 👍 10:18 вместо равно минус должен стоять, а то код ошибку выдаст.

[@vasya8441]

согласен, долго думал чего не выходит, там же вычитается, они не проверили код и сделали видео

[@puzzle2012]

Блин, не мог понять как этот код должен работать. Написал тестовую страницу, получил ошибку, понял, что ошибка в коде из видео. И только потом заглянул в комментарии )

[@user-we9hx5vf1j]

Круто, спасибо!

[@user-km9br1oe8r]

Спасибо большое, очень рад что нашел ваш канал

[@christinalozovaya5860]

суперски объясняешь, спасибо!

[@fruitypie]

Супер, спасибо за видео) Сделайте видео о функциях высшего порядка в связке с call,bind,apply

[@zatoprosto103]

Очень хорошо. Спасибо.

[@radist126]

Классное видео. Спасибо. Начал понимать!!

[@user-hx1qi7sw1q]

Однозначно Лайк!!

[@leitohardy9679]

Чел реально отлично преподает JS!

[@demetrio_dede]

Спасибо.Очень доходчиво)

[@dmytrohelbak]

Супер объяснение, супер материал, супер спасибо!!!

[@user-qn7ti7tx4i]

Спасибо, объяснения супер!

[@jonecramer3870]

Очень доходчиво, спасибо)

[@nicothin]

Отличное видео. Но как-же много перебивок. Одна даже в середине предложения :(

[@yurafedorenko1218]

у некоторых "опытных" спикеров иногда не получается целое предложение записать одним дублем))

[@user-kl4yk8tm2b]

Уже, наверное, раз пятый пересматриваю видео. С каждым разом все более осознанно. Отличное видео, просто класс!!

[@alexkot1265]

Столь лаконичное и информативное видео сегодня на вес золота. Хочется посмотреть еще что-нибудь. Так же было бы здорово систематизировать знания с телеграмм-канала, он хорош.

[@object_undefined]

Отличное обьяснение!

[@codedreams3209]

Спасибо дядя, очень классно получается

[@user-qg5fi2eq6k]

Самое простое объяснение классов. Спасибо =)

[@micoberss5579]

Spasibo vam

[@alexiki3523]

Спасибо. Потешил!

[@user-ec4mr9yp3r]

Отличное видео!!!!!

[@dmytrodemydenko3534]

Спасибо. Наконец то я понял что такое __proto__ && prototype :)

[@maratgumerov2840]

а я вот запутался)

[@annpm1978]

Круто!! Молодец!!👍👍👍

[@makarofff11]

Спасибо!

[@user-108andalu]

Наверное, лучшее на всем пространстве видео на данную тему. Докопались с какой-то опиской в коде. Простейший же код, че млин голову ломать. Сначала сами попробуйте подобного рода создать что-нибудь... Гениальный видос. Юрий, очень нужны ваши видео на прочие темы JS, вы великолепны

[@valexxjr]

Зыс 😁 Спасибо за информативный ролик)

[@frednoby8531]

Можете снять урок по геттерам и сеттерам в JS? Вот ни один источник доходчиво и просто не объясняет суть этого.

[@user-zg3vt6zh6y]

бесит вечно мигающая яркая заставка) а видео норм) примеров бы больше

[@joylz7045]

Я не одинок!

[@angrycatstudio2816]

Ты крут.

[@romansvidunovich3282]

Класс! Я почти два час потратил пытаясь это всё объяснить. Спасибо!

[@user-oc6hw8xd3n]

Отличная подача! Все стало понятно, спасибо!

[@SafetyLast-_-]

Юра, когда ты расскажешь о том кто такой "Area Lead" ? :) P.S. Подкаст интересный! Продолжайте в том же духе 👍

[@bvfromruvitaliy]

Пересмотрел второй раз после двух недель изучения теории на эту тему. Теперь смутило, что ничего не сказали про скрытое свойство [[prototype]]. А ведь по сути это оно содержит ссылку на прототип обьекта, а __protto__ - это всего лишь геттер/сеттер для него.

[@raul_duken]

11.56 ссылка proto нового обьекта будет ссылаться на тот обьект что лежит в свойстве prototype в функции, А КАК же то что она должна ссылаться на function.prototype, как же call() и apply()?

[@bvfromruvitaliy]

Юрий, вы очень понятно объясняете! Хочется больше таких видео. Но на канале что-то не очень много их нашел. :( Может не там искал?

[@HillelITSchool]

Вот плейлист со всеми видео Юрия - kzbin.info/aero/PLuEo4W0EBxtWOf1CZQNmqzwRWG9xeTOZ6

[@scape4632]

Сними видос про ООП js, es6

[@alisergazy4564]

Классно, ваще четко, закрепил свои знания, спасибо большое, давайте дальше про ТРИ КИТА в JS на классасх и как раз там расскажите про стрелочные

[@hacksaw_raw]

Круто получилось. Продолжайте

[@PacoOfficial]

мне вот эта тема с прототипами в js прям нрав, как оно всё наследуется от прототипа и т.д

[@ihortsarenko3119]

Освіжив перед співбесідою :) Дякую!

[@boycovclub]

Самый понятное объяснение спасибо

[@N5O1]

Класс - это функция, а функция - это объект, у объекта есть прототипы. __proto__ - ссылка на список прототипов родителя. This - ссылка на метод или какое-то значение объекта, в котором вызывается функция. Так?

[@ssurrokk]

🔥

[@user-kp6dn5qt4l]

Это вы объяснили прототипы на ES5?

[@dimaelmoTV]

Годно прям

[@andreytsapko4213]

Полезно, сэнкс!

[@stanislavivko7329]

Только начал. И по-моему этот видос для тех кто и так в теме, так как нифига не проячнил. Про this я и сам знаю, так что все понял. Про proto нифига не знаю, но спасибо, теперь я знаю что есть какая-то непонятная штука которая неизвестно зачем нужна, но наверняка очень полезная, ага. И 10500 перебивок. Это блянупиздец. Буду рисовать крутые схемки со стрелочками и не покажу ни одного нормального примера, что б выглядеть умным, а потом запущу перебивку и поехали к следующей теме

[@juliusmalkov9620]

отличное видео, но где ещё?)

[@Ratelchief]

в конце цепочки - __proto__ -вернется null, а не undefined. видео полезное и наглядное.

[@yurafedorenko1218]

имеется ввиду, что если запрашиваемое свойство не найдено, то вернется undefined

[@alexdang2357]

nice

[@fedotnetot3876]

Борода, это лучшее толкование this и prototype, которое можно найти, молодец.

[@fedoskamcha3768]

САмое крутое объснение которое я видел\

[@orcsamuro9687]

Спасибо, у меня сложился пазл

[@andreyp2632]

класс, хорошее видео , делай больше про js для начинающих. И маленький совет, поменьше заставок с картинкой - мы вам перезвоним, сильно отвлекает.

[@Vitlsa]

2:30 - use strict делает this undefined - у меня получилось всё равно window, как я не старался...

[@RavenTheX]

Магия какая то, скорее всего где то у тебя ошибка в коде...

[@user-jj9wv5vk3x]

вот код, попробуй, u-d, без строгача объект window 'use strict' function g() { console.log(this); } g();

[@PacoOfficial]

прикона

[@rinatvaliullov3247]

Кажется по поводу __proto__, если в Object.prototype нет свойства, то возвращается null, а не undefined (5:33)

[@alisergazy4564]

Нет, неверно, ubdefined как раз таки и означает что там ничего нету, а null этого гарантировать не может, т.к null означает что это свойство уже явно создано, но пустое, а null т.к будет присвоен не примитив и самое важное, что он будет присвоен, так что null там далеко нету

[@fruitypie]

Object.prototype ссылается на null, а при поиске свойств в цепочке и их несуществовании в нем, возвращается undefined :)

[@rinatvaliullov3247]

то есть то, что в консоли в хром дев тулз выводится и есть то, на что ссылается Object.prototype

[@fruitypie]

Чтобы узнать, на что ссылается Object.prototype, нужно написать следующее: Object.prototype.__proto__

[@yurafedorenko1218]

так стоп, вот тут случается подмена понятия)) если нет свойства то возвращается undefined, а вот Object.prototype.__proto__ указывает на null, но это вообще не одно и то же

[@dmytro-skh]

Отличное видео, наконец то я понял разницу и зачем так дурацки создаются конструкторы

[@eugenenovikov671]

var obj = {arr:[1,2,3], f:function(){this.arr.forEach(function(el){ тут this равен undefined - почему? })}}

[@vlad-yelnikov]

Здесь this - объект, все как и должно быть. Если ты про то, что в консоли браузера показывает undefined, то это результат возврата функции, если она ничего не возвращает (как у тебя), то будет выводиться undefined в консоль. Это нормально и к this никак не относится. P.S. На будущее - лучше давай ссылку с нормально отформатированным кодом (с отступами и т.д.) на pastebin или что-то подобное - чтоб проще читалось. А в том виде, как ты сюда в комменты скинул - далеко не каждый будет смотреть и разбираться, что там у тебя не работает.

[@Mamikonars]

Тысячный лайк ;)

[@WapSter92]

Не хватает примеров для понимания, тоже самое можно в книжке прочитать == лекции в универе

[@slavkapiyavka]

5:32 - null, а не undefined

[@HillelITSchool]

Слушно, дякуємо!

[@violmy]

класно! го веб по жесті js)

[@ai4e277]

Ты крут, единственное реально нужно исправить глухую Г и слово када, заменить на когда. Удачи тебе 😉 очень классно рассказываешь

[@user-jq3sz4hg6k]

Зачем программистам доска?) нормально же вставляли код в первой части видео.

[@user-on4ce8fg8s]

ОБj.

[@larryunderwood615]

Зыс. Вындоу.

[@user-hp2cg6px8c]

зыс

[@petrvictorovich]

Нихера не понял, смотрим дальше.

[@xxxxPomaHxxxx]

На 1:46, функция копируется не по ссылке а по значению, если мы присвоили в свойство объекта функцию то есть он стал методом, то потом изменив исходную функцию мы сохраним в объекте изначальную.

[@phpner]

Вы мне перезвоните ?

[@progi99]

я в прототайп только играл, а так не понял о чем вообще речь была.

[@alexsmurf5425]

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

[@andreyevichmak7]

Это наверно только мне режит глаз, как вы пытатесь сделать вид, будто вы не читаете, а пытаетесь на ходу это рассказывать, поднимая глаза в верх или делая нелепые паузы. ничего личного ;)

[@XGODsunXd1000X]

глабальны абъект

[@it8995]

круто, ничего не понятно

[@nazarromanchuk6080]

"Мы Вам перезвоним" - фу, нереально бісить!

[@rightball1629]

Че за бред написан на 10:17

[@elijahgavrilov1686]

у вас каша особенно в начале

[@acckiygerman]

Гребаная заставка бесит. Невозможно смотреть.

[@xdarkfenixx]

дизлайк за частую заставку

[@vkgorodok]

Слишком мало примеров кода, зато много говорильни.

[@alexbel5599]

Хорошая подача. Но гекаешь так сильно и в каждом слове, что аж отвлекает... А я из Украины...

[@typokrat]

Все прекрасно.. НО!!! Перестань ХЭЭЭКАТЬ! Уши режет ... ! Хээ Хээ Хээ

[@user-rh6fc8ps7t]

не return now.getFullYear() = this.born а return now.getFullYear() - this.born;