Полный разбор THIS в JavaScript за 26 минут | this в стрелочных функциях, call bind apply, Window

  Переглядів 23,851

Pomazkov JS

Pomazkov JS

День тому

⭐ BOOSTY - задача с собеса по THIS, конспекты-шпаргалки и другие материалы:
boosty.to/pomazkovjs
⭐ Поддержать донатом: boosty.to/pomazkovjs/single-p...
Этот ролик - полный гайд по this в JS.
Из него вы узнаете про:
- this в глобальной области видимости (объекты Window и Global)
- this в обычных функциях
- this в функциях-конструкторах
- особенности this в стрелочных функциях
- this в forEach и setTimeout
и многое другое - с объяснением и примерами.
Приятного просмотра!
Обновлённый роудмэп:
miro.com/app/board/uXjVOv90G2k=/
Плейлист "JS простым языком":
• ЗАМЫКАНИЯ В JS за 15 м...
* СОЦ. СЕТИ:
👀 Instagram - / pomazkov.js
🚀 Telegram - t.me/pomazkovjs
Тайм-коды:
00:00 Интро
01:09 Что такое this в js
01:41 this в глобальном контексте
02:14 Что такое объект Window в js
04:09 this в функциях js
04:28 this в обычных функциях
05:58 Что такое Global в js
06:31 this и use strict
07:07 this в методе объекта
09:28 call, apply: вызов с привязкой контекста
11:28 Отличие call и apply
12:03 Что такое bind в js
13:04 this в функциях-конструкторах
16:09 this в стрелочных функциях
17:53 Пример: this и forEach
20:42 Пример: this в setTimeout
24:11 Почему стрелочные функции нельзя использовать с new
25:02 Задача с собеседования по this и конспекты
25:47 БОНУС
#javascript #курс #this #фронтенд

КОМЕНТАРІ: 186
@pomazkovjs
@pomazkovjs 5 місяців тому
Мой интенсив по JS: 🔥pomazkovjs-hangman.ru/ Больше крутого контента: 🚀 Telegram - t.me/pomazkovjs 👀 Instagram - instagram.com/pomazkov.js
@johnnyzhuravlev7334
@johnnyzhuravlev7334 2 місяці тому
Отдельное видео по call, apply, bind будет очень полезным. Спасибо за работу и старания)
@user-fg5cd3mv2z
@user-fg5cd3mv2z 5 місяців тому
Легенда вернулась! Твой урок по замыканиям лучший в ютубе)
@pomazkovjs
@pomazkovjs 5 місяців тому
Спасибо!)) 🔥
@gregdmitriev2784
@gregdmitriev2784 4 місяці тому
Лесть, такое себе. Но да - автор молодец. Плюс ещё один блогер, который толково объясняет. Просто и по полочкам.
@user-fg5cd3mv2z
@user-fg5cd3mv2z 4 місяці тому
@@gregdmitriev2784 лесть не лесть, но мне реально его уроки помогают А смотрел я много разных авторов Если человек старается, то пусть видит обратную связь
@valerjanochka
@valerjanochka Місяць тому
Огроменное тебе спасибище за твой неимоверный труд и время, которое ты тратишь, чтобы снимать такие интересные и суперкачественные ролики. Безумно нравится твоя подача материала: без воды, всё чётко по полочкам и с примерами. Желаю тебе продолжать в том же духе и вдохновлять ребят, начинающих этот нелёгкий путь, идти к своей мечте и не сдаваться). Ещё было бы интересно посмотреть видео на такие темы, как Promise, цепочки промисов, асинхронное программирование, HTTP/HTTPS, RESTful API, Prototypes, Event Loop.
@pomazkovjs
@pomazkovjs Місяць тому
Большое спасибо за такой приятный комментарий! Буду стараться 🔥
@artyommanko1575
@artyommanko1575 5 місяців тому
Арсений, спасибо огромное за обучающие видео! Всё максимально подробно, интересно и, что самое главное, понятно!
@anastasiahramcova7200
@anastasiahramcova7200 4 місяці тому
Спасибо огромное за твой труд!!! Объяснения очень понятные👏👏👏 Продолжай пожалуйста снимать.
@srjp4777
@srjp4777 4 місяці тому
суперские объяснения, смотрю уже третий видос и это один из лучших каналов по js
@user-xb1jf2ul4w
@user-xb1jf2ul4w 2 місяці тому
Твои видео всегда дают простое понимание сложных вещей. Спасибо. Пили подробный видос про call, apply
@user-kp5og5so7f
@user-kp5og5so7f 5 місяців тому
Твои видео всегда дают простое понимание сложных вещей. Спасибо.
@vgshenshin
@vgshenshin 4 місяці тому
Круто, я всё понял 👍 неплохой пример с setTimeout и event loop, мне понравился🔥
@alianmanpi35
@alianmanpi35 18 днів тому
Спасибо большое за Ваши видео, они очень помогают глубже понимать материал.
@davit21.
@davit21. 5 місяців тому
Вы очень ясно и понятно объясняйте спасибо за хороший контент❣
@user-rs9qj7zj5g
@user-rs9qj7zj5g 4 місяці тому
Ура, я ждала это видео! Спасибо!
@sayces
@sayces Місяць тому
много нового для себя узнал. спс, арсений. а то читаю учебник, потом ничего не понимаю, а тут как то нагляднее и живее, потому и понятнее)
@matthewbellamy4008
@matthewbellamy4008 2 місяці тому
Спасибо большое, очень полезное и самое лучшее объяснение этой темы что я нашел
@many_men
@many_men 4 місяці тому
как всегда топчик! подробно про каждый случай что не остается вопросов. К примеру видео про лет конст и вар очень сильно мне помогло
@AndsViolin
@AndsViolin 5 місяців тому
Спасибо за твой канал. Благодаря тебе я снова начал программировать спустя 3 года
@pomazkovjs
@pomazkovjs 5 місяців тому
Воу, огонь! Рад, что помог найти мотивацию и вдохновение)
@IgorBerezhnoy-md3ir
@IgorBerezhnoy-md3ir 2 місяці тому
Спасибо за урок! Ждём ещё больше твоих крутых видео!🔥🔥🔥🔥🔥🔥🔥🔥🔥
@user-bn6fl5yp2d
@user-bn6fl5yp2d 4 місяці тому
Офигенное видео) спасибо😍 было бы интересно послушать про классы
@user-yr6lv4vc7v
@user-yr6lv4vc7v Місяць тому
Желаю тебе никогда не терять мотивацию. Твори добро и будь счастлив. Даже если тебе не сказали "спасибо", все-равно они остались благодарными. Спасибо за аккуратную и добросовестную работу.
@ondreeey3004
@ondreeey3004 4 місяці тому
Благодаря конспекту по var/let/const с бусти, спустя 1,5 недели перекапывания интернета наконец-то понял в чем суть TDZ и когда она образуется! Немного не в тему, но все же, огромное спасибо! Седи всех ютуб-лекторов, твой контент самый легкоусваиваемый
@casha00048
@casha00048 4 місяці тому
Прекрасно Понятно и без воды Спасибо)
@ynesennye_milom
@ynesennye_milom Місяць тому
Спасибо большое, это лучшее видео про this💐
@kotrvnwork6665
@kotrvnwork6665 4 місяці тому
Видео супер! Понятно все! По полочкам!
@user-hf4sm4zu7n
@user-hf4sm4zu7n 2 місяці тому
Класс! Наконец-то тема this раскрыта полностью. Пожалуйста продолжайте. Мои пожелания на дальнейшее: promises, async/await, yeld
@user-lj5sf7hs5f
@user-lj5sf7hs5f 3 місяці тому
Красава!!! Давай жги дальше. Жду новых видосов
@JoKERIFreeStyleI
@JoKERIFreeStyleI 2 місяці тому
Круто, уже работаю как мидл, и все как-то call,bind,apply со скрежетом проходили мимо меня, после твоего видоса прям прояснилось в голове зачем все-таки они нужны)
@Aleksa013
@Aleksa013 28 днів тому
Очень здорово объясняешь! Спасибо тебе!!
@kamilatuleubayeva4147
@kamilatuleubayeva4147 5 місяців тому
Обожаю ваше объяснение, но я не смотрела еще первую часть, так что побежала смотреть ее😂😅 спасибо Вам за видеооо😍🔥
@pomazkovjs
@pomazkovjs 5 місяців тому
Спасибо! Приятного просмотра!)
@to4ka_gr
@to4ka_gr 23 дні тому
единственный человек который объяснил все четко и грамотно! спасибо огромное!
@thepro5635
@thepro5635 3 місяці тому
Спасибо за видео, было интересно смотреть и слушать !
@husik101
@husik101 2 місяці тому
Не бросай это дело, у тебя здорово получается
@fan.kotenokkote5198
@fan.kotenokkote5198 5 місяців тому
Спасибо за видео 😊
@surensimonyan7106
@surensimonyan7106 5 місяців тому
Спасибо за детальную информацию про this
@user-ey2wx2fu7h
@user-ey2wx2fu7h 13 днів тому
просто красавчик, оч крутые видео, топ контент) не останавливайся
@user-iy9of1ew8c
@user-iy9of1ew8c 5 місяців тому
Это прям огонь 🔥 спасибо.
@xtray51
@xtray51 5 місяців тому
Нереальное видео, именно благодаря таким как вы джуны готовятся к собеседованиям, вечный +реп
@user-yp2tk4yn1b
@user-yp2tk4yn1b 3 місяці тому
и не устраиваются. АХАХАХАХАХА. Рынок переполнен настолько, что устроиться на джуна вообще нереально
@sezergm7066
@sezergm7066 15 днів тому
Одно из лучших видео на ютубе про 'this' в js
@MaxLebedenko-jy2cb
@MaxLebedenko-jy2cb Місяць тому
очень качественный материал,спасибо!
@user-dq3rc1xu7b
@user-dq3rc1xu7b 23 дні тому
Крутое объяснение! Спасибо.
@infate89
@infate89 5 місяців тому
Ты Гений! Спасибо тебе ОГРОМНОЕ! Огромная работа проделана. Я тебе благодарен, безгранично! Лучший!
@Liunamme
@Liunamme 5 місяців тому
Только сегодня разбирался с this, а тут как раз это видео)) Я подписчик с замыкания))
@pomazkovjs
@pomazkovjs 5 місяців тому
Идеальный тайминг 🔥
@user-sc9tw6bg4g
@user-sc9tw6bg4g 2 місяці тому
спасибо за доступный урок
@user-tk7qv9rv2c
@user-tk7qv9rv2c 27 днів тому
Спасибо, действительно понятно!
@user-zj1nn8zj8f
@user-zj1nn8zj8f 5 місяців тому
Спасибо, очень познавательное видео.
@EvilGazz
@EvilGazz 5 місяців тому
Видео однозначно полезное, и подача материала на 5+
@maksymshypytsia5217
@maksymshypytsia5217 2 місяці тому
Спасибо очень хороший разбор.
@aleksvalushko4635
@aleksvalushko4635 3 місяці тому
крутое объяснение! мне зашло)
@zakhartereshchenko7373
@zakhartereshchenko7373 5 місяців тому
Спасибо за видео, очень хорошо разьяснил
@Denis-yw6jl
@Denis-yw6jl 4 місяці тому
Наконец-то кто-то начал делать видосы по JS и можно посмотреть что-то свежее, а не трудные для восприятия видео 8-летней давности с довольно специфической подачей 👍
@Maria-rg9tk
@Maria-rg9tk 4 місяці тому
т_т лучшее объяснение. спасибо, что структурируешь мою кашу в голове
@maxfens
@maxfens 5 місяців тому
Спасибо за контент! Будет в ближайшем будущем видос про прототипы?
@alexcorsa6330
@alexcorsa6330 5 місяців тому
Спасибо! Делай больше видео!!!!
@prgJkeee
@prgJkeee 5 місяців тому
Лайк авансом =), ну и конечно же коммент в поддержку канала! Арсений не забывай про видосы!!! Контент супер!!!
@pomazkovjs
@pomazkovjs 5 місяців тому
Спасибо за поддержку, стараюсь! 💪🏼
@prgJkeee
@prgJkeee 5 місяців тому
@@pomazkovjs Кстати, интересно, а будет ли про Vue что-то? А то на UKposts про него очень мало всего (понятно, что из-за React'а, который более используем)
@user-lm9ee1gn5p
@user-lm9ee1gn5p 4 місяці тому
Огромное вам спасибо
@spiritanri
@spiritanri 4 місяці тому
Круто! Спасибо
@defDimych
@defDimych 2 місяці тому
Автор, выражаю своё спасибо лайком, и подпиской. Ты мне очень помог разобраться с this!
@dg7663
@dg7663 27 днів тому
познавательно, спасибо тебе за контент)
@isevdfed
@isevdfed 10 днів тому
ты лучший! спасибо огромнейшее!
@lazys7151
@lazys7151 5 місяців тому
Спасибо, что помогаешь разобраться в языке. На эту тему не так много детальных роликов, все люди лишь пробегаются по верхам, как будто темы легкие и не важные. Буду ждать следующих роликов
@user-nf5yc7xz9b
@user-nf5yc7xz9b 5 місяців тому
Так и автор пробегается по верхам , найдите канал as for js ,вот там по настоящему глубоко разбирают js
@lazys7151
@lazys7151 5 місяців тому
@@user-nf5yc7xz9b Я уже там подписчик. Проблема того канала заключается в том, что автор уничтожает современный подход к изучению JS. Может быть это и полезно, но что это даёт? Каждый раз на собеседованиях спорить и пытаться объяснять принципиально новую позицию? Это слишком муторно и сложно всё донести идеально правильно. Тем более на этом канале человек дошел до синьорской должности со знаниями абстракций по типу замыканий, контекста и прочей лабуды. Эффективнее всего, как мне кажется, понять эти абстракции и ими апеллировать на собеседованиях. По крайней мере собеседования не будут такими стрессовыми и сложными.
@shmelactimel6099
@shmelactimel6099 4 місяці тому
Привет! Спасибо за то что делишься своими знаниями и классную подачу в видео, четко и понятно!) Думаю классно будет , если будет roadmap на ютубе, по твоему frontend roadmap там где ты выписал что нужно знать начинающему разработчику)
@rostyslavkinash5232
@rostyslavkinash5232 4 місяці тому
спасибо за урок
@MsDimons123
@MsDimons123 13 годин тому
Круто, спасибо!
@igorsenichev3779
@igorsenichev3779 5 місяців тому
Спасибо 👍
@yulikk3514
@yulikk3514 Місяць тому
Спасибо) Супер!
@user-xu4ob9pg7e
@user-xu4ob9pg7e 4 місяці тому
видео крутое, разбор четкий!
@alfeov8251
@alfeov8251 3 місяці тому
Хотелось бы услышать про асинхронность в JS в твоем исполнении, очено хорошо объясняешь 🔥🤝
@whoamizy
@whoamizy 4 місяці тому
Спасибо за видео!
@anastasiasandu555
@anastasiasandu555 Місяць тому
спасибо за контент =)
@user-hp3up5dp7v
@user-hp3up5dp7v 3 місяці тому
Привет! Спасибо за крутые объяснения! Очень хотелось бы разобрать в таком духе промисы, async/await
@vitmih380
@vitmih380 5 місяців тому
Конечно же лайк
@mew6085
@mew6085 5 місяців тому
Полезно. Подписался
@user-wt6be6gi8x
@user-wt6be6gi8x 2 місяці тому
Красота)
@user-ml8hn5kg9e
@user-ml8hn5kg9e 2 місяці тому
Крутое видео!!!
@katenka_katrusya
@katenka_katrusya 4 місяці тому
Спасибо за видео. Для меня это сейчас уже не так страшно, но всё ещё страшно)). Хотелось бы посмотреть подробнее и про call, bind, apply. Я первый раз использовала конструктор для создания студентов (домашняя работа, да))), плюс там методы разные, куда я добавляла функции расчёта возраста, на каком курсе студент, полное имя, очень удобно получилось. Код стал чище в разы, легче и понятнее писался код
@g999ar
@g999ar 4 місяці тому
Особенно круто, что ты разбираешь не попсовые темы
@j0v4n1
@j0v4n1 5 місяців тому
Молодчина
@morenossspunches7852
@morenossspunches7852 5 місяців тому
Прекраааасное видео
@2insidefree
@2insidefree 2 місяці тому
Отличный контент
@TrashTOXICwho
@TrashTOXICwho 3 місяці тому
Привет, крутые видео. Очень жду видео про асинхронности.
@madshox2816
@madshox2816 3 місяці тому
Спасибо
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Отличный ролик, представляю сколько времени на него ушло :)
@pomazkovjs
@pomazkovjs 5 місяців тому
Спасибо!) Времени ушло действительно много, но я уверен, что все не зря, и этот разбор многим поможет 🙌
@user-fh7dx7tz4p
@user-fh7dx7tz4p 3 місяці тому
Добрый час, спасибо за видео, было бы интересно ролик про Primise и fetch
@user-jw6dd7ce6u
@user-jw6dd7ce6u 4 місяці тому
круто полезный контент
@andrewcanady3054
@andrewcanady3054 Місяць тому
Привет. Изучаю сейчас js. Я на пути к фронтенд разработчику ахахах) Из многих видосов на ютубе по теории программирования очень мало таких видосов, которые хорошо сконструированы. То есть мало видосов, в которых их авторы обьъясняют всё поэтапно. А у тебя всё хорошо сконстурировано в видео и понятно всё от начала и до конца. Спасибо за твою работу)
@andrewshalomitsky2184
@andrewshalomitsky2184 5 місяців тому
круто!
@lex9497
@lex9497 4 місяці тому
У тебя очень крутые видео, и очень понятные, можешь пожалуйста сделать видео про методы массивов, строк и объектов. Буду очень благодарен)
@galaktik9714
@galaktik9714 4 місяці тому
ждем подробное объяснение про call,bind и apply также хотелось бы увидеть объяснение про конструкторы и классы.
@foxnadir
@foxnadir Місяць тому
18:56 Не из-за того что .forEach вторым аргументом передает undefined в коллбек - внутри него this определяется как undefined. А все из-за того, что любая функция определенная в JavaScript по умолчанию является методом объекта (ВНИМАНИЕ!) window. И this тут ссылается именно к глобальному объекту window и ищет там свойство lastName. Вот оно там не определено и возвращает undefined. Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";
@foxnadir
@foxnadir Місяць тому
22:10 а внутри setTimeout *this* не определятся все потому что setTimeout изначально является методом windows объекта (как и было сказано вначале). Он тоже ссылается в глобальный объект своим this'ом.
@user-oe9wl1zq4o
@user-oe9wl1zq4o 29 днів тому
"Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";" - или в самой функции выводить просто this. Можно еще добавить вторым параметром undefined и увидеть что ничего не поменяется, a если добавить другой объект, то поменяется только для logFullNames1.
@sadasd3826
@sadasd3826 3 місяці тому
Хотелось бы уточнить за пример вложенной функции на 5:38 ,myFunction не берет контекст из myFunction1,так как это противоречит тому,что контекст определяется в зависимости от вызова функции. Если вызывается просто функция без каких-либо доп методов ,new или dot нотации то по умолчанию this будет глобальным обьектом в нестрогом режиме.Вот например,что об пишется : Вложенные функции не наследуют значение this от внешних функций. Значение this в вложенной функции определяется контекстом, в котором она вызывается. Если вложенная функция вызывается как метод, то ее значение this будет объектом, на котором она вызывается. Если вложенная функция (т.е. не стрелочная функция) вызывается как функция, то ее значением this будет или глобальный объект (в нестрогом режиме), или undefined (в строгом режиме). Пример 1 : let o = { // Объект о m: function() { //метод m обьекта let self = this; // Сохранить значение this в переменной this === о // => true: this является объектом о f() ; //Теперь вызвать вспомогательную функцию f () function f () { //Вложенная функция f this === о // =>false: this является глобальным объектом или undefined self === о // true: self является внешним значением this } } }; o.m(); //Вызвать метод m на объекте о А если бы myFunction брала бы контекст из myFunction1,то у нас вышло бы что f брала бы контекст из анонимной функции присвоенной идентификатору m,и тогда бы эта функция ссылалась бы на сам обьект o ,а не на глобальный обьект
@foxnadir
@foxnadir Місяць тому
Чуть-чуть неправильно, но в целом неплохо. Читай мой коммент снизу
@sadasd3826
@sadasd3826 Місяць тому
@@foxnadir ,Во -первых,то ,что ты написал ни как не противоречит моему.Во-вторых,я все правильно написал,в том числе к глобальному обьекту относится и windows в среде браузера.Но нельзя говорить за это постоянно,так как в той же Node уже не будет никакого windows)
@Fanta.Bamboocha
@Fanta.Bamboocha Місяць тому
Комментарий для продвижения, так держать
@BaraBaranym
@BaraBaranym 5 місяців тому
Круть, еще бы про Event Loop, prototype, async 😔
@user-iq3qf7py7o
@user-iq3qf7py7o 4 місяці тому
супер
@coreyes139
@coreyes139 2 місяці тому
Про промисы хотелось бы разбор и про асинхронность
@maxet2374
@maxet2374 4 місяці тому
спасибо за видос по замыканиям - я хоть через год в разработке норм понял. сделай плиз видос с примерами call bind apply
@pomazkovjs
@pomazkovjs 4 місяці тому
Спасибо за коммент! Сделаю 💪🏻
@crazymeizy3252
@crazymeizy3252 Місяць тому
Ты топ бро спасибо
@user-cy9vr1lq9f
@user-cy9vr1lq9f 4 місяці тому
спасибо
@valerakozhura2544
@valerakozhura2544 5 місяців тому
При разборе this в стрелочной функции 19:15 что-то не сходится. Я вызвал просто "this" в форыче обычной функции в примере, и он определен - [obj Window], а не undefined. В примере возникает undefined из-за того, что у глоб объекта нету поля lastName( window.lastName = undefined)
@yuriilee6077
@yuriilee6077 4 місяці тому
Круто! Объясни плз call и apply. Геттеры и Сеттеры тоже так же хотелось бы увидеть)
@goshan3170
@goshan3170 3 місяці тому
Спасибо, хочу к тебе на стажировку)))
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 4,8 млн
🐩🐕
00:25
Янчик
Переглядів 2,4 млн
Что такое WebSockets (веб-сокеты)
2:59
Хочу вАйти
Переглядів 3,2 тис.
Стрелочные функции JavaScript. JavaScript function 2021
22:21
WebDev с нуля. Канал Алекса Лущенко
Переглядів 28 тис.
Старейшая нерешённая задача [Veritasium]
30:08
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 4,8 млн