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

⭐ 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 #фронтенд

[@pomazkovjs]

Мой интенсив по JS: 🔥pomazkovjs-hangman.ru/ Больше крутого контента: 🚀 Telegram - t.me/pomazkovjs 👀 Instagram - instagram.com/pomazkov.js

[@johnnyzhuravlev7334]

Отдельное видео по call, apply, bind будет очень полезным. Спасибо за работу и старания)

[@user-fg5cd3mv2z]

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

[@pomazkovjs]

Спасибо!)) 🔥

[@gregdmitriev2784]

Лесть, такое себе. Но да - автор молодец. Плюс ещё один блогер, который толково объясняет. Просто и по полочкам.

[@user-fg5cd3mv2z]

@@gregdmitriev2784 лесть не лесть, но мне реально его уроки помогают А смотрел я много разных авторов Если человек старается, то пусть видит обратную связь

[@artyommanko1575]

Арсений, спасибо огромное за обучающие видео! Всё максимально подробно, интересно и, что самое главное, понятно!

[@anastasiahramcova7200]

Спасибо огромное за твой труд!!! Объяснения очень понятные👏👏👏 Продолжай пожалуйста снимать.

[@valerjanochka]

Огроменное тебе спасибище за твой неимоверный труд и время, которое ты тратишь, чтобы снимать такие интересные и суперкачественные ролики. Безумно нравится твоя подача материала: без воды, всё чётко по полочкам и с примерами. Желаю тебе продолжать в том же духе и вдохновлять ребят, начинающих этот нелёгкий путь, идти к своей мечте и не сдаваться). Ещё было бы интересно посмотреть видео на такие темы, как Promise, цепочки промисов, асинхронное программирование, HTTP/HTTPS, RESTful API, Prototypes, Event Loop.

[@pomazkovjs]

Большое спасибо за такой приятный комментарий! Буду стараться 🔥

[@srjp4777]

суперские объяснения, смотрю уже третий видос и это один из лучших каналов по js

[@user-kp5og5so7f]

Твои видео всегда дают простое понимание сложных вещей. Спасибо.

[@user-xb1jf2ul4w]

Твои видео всегда дают простое понимание сложных вещей. Спасибо. Пили подробный видос про call, apply

[@vgshenshin]

Круто, я всё понял 👍 неплохой пример с setTimeout и event loop, мне понравился🔥

[@davit21.]

Вы очень ясно и понятно объясняйте спасибо за хороший контент❣

[@user-rs9qj7zj5g]

Ура, я ждала это видео! Спасибо!

[@user-bn6fl5yp2d]

Офигенное видео) спасибо😍 было бы интересно послушать про классы

[@Aleksa013]

Очень здорово объясняешь! Спасибо тебе!!

[@user-ey2wx2fu7h]

просто красавчик, оч крутые видео, топ контент) не останавливайся

[@alianmanpi35]

Спасибо большое за Ваши видео, они очень помогают глубже понимать материал.

[@casha00048]

Прекрасно Понятно и без воды Спасибо)

[@IgorBerezhnoy-md3ir]

Спасибо за урок! Ждём ещё больше твоих крутых видео!🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@user-dq3rc1xu7b]

Крутое объяснение! Спасибо.

[@kotrvnwork6665]

Видео супер! Понятно все! По полочкам!

[@ynesennye_milom]

Спасибо большое, это лучшее видео про this💐

[@user-lj5sf7hs5f]

Красава!!! Давай жги дальше. Жду новых видосов

[@user-tk7qv9rv2c]

Спасибо, действительно понятно!

[@fan.kotenokkote5198]

Спасибо за видео 😊

[@many_men]

как всегда топчик! подробно про каждый случай что не остается вопросов. К примеру видео про лет конст и вар очень сильно мне помогло

[@matthewbellamy4008]

Спасибо большое, очень полезное и самое лучшее объяснение этой темы что я нашел

[@thepro5635]

Спасибо за видео, было интересно смотреть и слушать !

[@spiritanri]

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

[@AndsViolin]

Спасибо за твой канал. Благодаря тебе я снова начал программировать спустя 3 года

[@pomazkovjs]

Воу, огонь! Рад, что помог найти мотивацию и вдохновение)

[@to4ka_gr]

единственный человек который объяснил все четко и грамотно! спасибо огромное!

[@husik101]

Не бросай это дело, у тебя здорово получается

[@user-zj1nn8zj8f]

Спасибо, очень познавательное видео.

[@EvilGazz]

Видео однозначно полезное, и подача материала на 5+

[@user-iy9of1ew8c]

Это прям огонь 🔥 спасибо.

[@dg7663]

познавательно, спасибо тебе за контент)

[@sayces]

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

[@user-sc9tw6bg4g]

спасибо за доступный урок

[@MaxLebedenko-jy2cb]

очень качественный материал,спасибо!

[@aleksvalushko4635]

крутое объяснение! мне зашло)

[@user-hf4sm4zu7n]

Класс! Наконец-то тема this раскрыта полностью. Пожалуйста продолжайте. Мои пожелания на дальнейшее: promises, async/await, yeld

[@infate89]

Ты Гений! Спасибо тебе ОГРОМНОЕ! Огромная работа проделана. Я тебе благодарен, безгранично! Лучший!

[@xtray51]

Нереальное видео, именно благодаря таким как вы джуны готовятся к собеседованиям, вечный +реп

[@user-yp2tk4yn1b]

и не устраиваются. АХАХАХАХАХА. Рынок переполнен настолько, что устроиться на джуна вообще нереально

[@sezergm7066]

Одно из лучших видео на ютубе про 'this' в js

[@kamilatuleubayeva4147]

Обожаю ваше объяснение, но я не смотрела еще первую часть, так что побежала смотреть ее😂😅 спасибо Вам за видеооо😍🔥

[@pomazkovjs]

Спасибо! Приятного просмотра!)

[@alexcorsa6330]

Спасибо! Делай больше видео!!!!

[@ondreeey3004]

Благодаря конспекту по var/let/const с бусти, спустя 1,5 недели перекапывания интернета наконец-то понял в чем суть TDZ и когда она образуется! Немного не в тему, но все же, огромное спасибо! Седи всех ютуб-лекторов, твой контент самый легкоусваиваемый

[@surensimonyan7106]

Спасибо за детальную информацию про this

[@Liunamme]

Только сегодня разбирался с this, а тут как раз это видео)) Я подписчик с замыкания))

[@pomazkovjs]

Идеальный тайминг 🔥

[@maksymshypytsia5217]

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

[@rostyslavkinash5232]

спасибо за урок

[@user-xu4ob9pg7e]

видео крутое, разбор четкий!

[@zakhartereshchenko7373]

Спасибо за видео, очень хорошо разьяснил

[@isevdfed]

ты лучший! спасибо огромнейшее!

[@yulikk3514]

Спасибо) Супер!

[@user-wt6be6gi8x]

Красота)

[@mew6085]

Полезно. Подписался

[@user-ml8hn5kg9e]

Крутое видео!!!

[@Maria-rg9tk]

т_т лучшее объяснение. спасибо, что структурируешь мою кашу в голове

[@user-lm9ee1gn5p]

Огромное вам спасибо

[@MsDimons123]

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

[@JoKERIFreeStyleI]

Круто, уже работаю как мидл, и все как-то call,bind,apply со скрежетом проходили мимо меня, после твоего видоса прям прояснилось в голове зачем все-таки они нужны)

[@morenossspunches7852]

Прекраааасное видео

[@anastasiasandu555]

спасибо за контент =)

[@user-yr6lv4vc7v]

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

[@Denis-yw6jl]

Наконец-то кто-то начал делать видосы по JS и можно посмотреть что-то свежее, а не трудные для восприятия видео 8-летней давности с довольно специфической подачей 👍

[@igorsenichev3779]

Спасибо 👍

[@prgJkeee]

Лайк авансом =), ну и конечно же коммент в поддержку канала! Арсений не забывай про видосы!!! Контент супер!!!

[@pomazkovjs]

Спасибо за поддержку, стараюсь! 💪🏼

[@prgJkeee]

@@pomazkovjs Кстати, интересно, а будет ли про Vue что-то? А то на KZbin про него очень мало всего (понятно, что из-за React'а, который более используем)

[@vitmih380]

Конечно же лайк

[@j0v4n1]

Молодчина

[@defDimych]

Автор, выражаю своё спасибо лайком, и подпиской. Ты мне очень помог разобраться с this!

[@shmelactimel6099]

Привет! Спасибо за то что делишься своими знаниями и классную подачу в видео, четко и понятно!) Думаю классно будет , если будет roadmap на ютубе, по твоему frontend roadmap там где ты выписал что нужно знать начинающему разработчику)

[@2insidefree]

Отличный контент

[@TrashTOXICwho]

Привет, крутые видео. Очень жду видео про асинхронности.

[@andrewshalomitsky2184]

круто!

[@madshox2816]

Спасибо

[@user-jw6dd7ce6u]

круто полезный контент

[@whoamizy]

Спасибо за видео!

[@alfeov8251]

Хотелось бы услышать про асинхронность в JS в твоем исполнении, очено хорошо объясняешь 🔥🤝

[@user-hp3up5dp7v]

Привет! Спасибо за крутые объяснения! Очень хотелось бы разобрать в таком духе промисы, async/await

[@lazys7151]

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

[@user-nf5yc7xz9b]

Так и автор пробегается по верхам , найдите канал as for js ,вот там по настоящему глубоко разбирают js

[@lazys7151]

@@user-nf5yc7xz9b Я уже там подписчик. Проблема того канала заключается в том, что автор уничтожает современный подход к изучению JS. Может быть это и полезно, но что это даёт? Каждый раз на собеседованиях спорить и пытаться объяснять принципиально новую позицию? Это слишком муторно и сложно всё донести идеально правильно. Тем более на этом канале человек дошел до синьорской должности со знаниями абстракций по типу замыканий, контекста и прочей лабуды. Эффективнее всего, как мне кажется, понять эти абстракции и ими апеллировать на собеседованиях. По крайней мере собеседования не будут такими стрессовыми и сложными.

[@survarium8841]

Спасибо!

[@crazymeizy3252]

Ты топ бро спасибо

[@user-iq3qf7py7o]

супер

[@g999ar]

Особенно круто, что ты разбираешь не попсовые темы

[@galaktik9714]

ждем подробное объяснение про call,bind и apply также хотелось бы увидеть объяснение про конструкторы и классы.

[@katenka_katrusya]

Спасибо за видео. Для меня это сейчас уже не так страшно, но всё ещё страшно)). Хотелось бы посмотреть подробнее и про call, bind, apply. Я первый раз использовала конструктор для создания студентов (домашняя работа, да))), плюс там методы разные, куда я добавляла функции расчёта возраста, на каком курсе студент, полное имя, очень удобно получилось. Код стал чище в разы, легче и понятнее писался код

[@user-cy9vr1lq9f]

спасибо

[@user-fh7dx7tz4p]

Добрый час, спасибо за видео, было бы интересно ролик про Primise и fetch

[@maxfens]

Спасибо за контент! Будет в ближайшем будущем видос про прототипы?

[@alex_dudukalo]

Отличный ролик, представляю сколько времени на него ушло :)

[@pomazkovjs]

Спасибо!) Времени ушло действительно много, но я уверен, что все не зря, и этот разбор многим поможет 🙌

[@foxnadir]

18:56 Не из-за того что .forEach вторым аргументом передает undefined в коллбек - внутри него this определяется как undefined. А все из-за того, что любая функция определенная в JavaScript по умолчанию является методом объекта (ВНИМАНИЕ!) window. И this тут ссылается именно к глобальному объекту window и ищет там свойство lastName. Вот оно там не определено и возвращает undefined. Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";

[@foxnadir]

22:10 а внутри setTimeout *this* не определятся все потому что setTimeout изначально является методом windows объекта (как и было сказано вначале). Он тоже ссылается в глобальный объект своим this'ом.

[@user-oe9wl1zq4o]

"Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";" - или в самой функции выводить просто this. Можно еще добавить вторым параметром undefined и увидеть что ничего не поменяется, a если добавить другой объект, то поменяется только для logFullNames1.

[@lex9497]

У тебя очень крутые видео, и очень понятные, можешь пожалуйста сделать видео про методы массивов, строк и объектов. Буду очень благодарен)

[@MyDagir]

полезное видео

[@Fanta.Bamboocha]

Комментарий для продвижения, так держать

[@andrewcanady3054]

Привет. Изучаю сейчас js. Я на пути к фронтенд разработчику ахахах) Из многих видосов на ютубе по теории программирования очень мало таких видосов, которые хорошо сконструированы. То есть мало видосов, в которых их авторы обьъясняют всё поэтапно. А у тебя всё хорошо сконстурировано в видео и понятно всё от начала и до конца. Спасибо за твою работу)

[@sadasd3826]

Хотелось бы уточнить за пример вложенной функции на 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]

Чуть-чуть неправильно, но в целом неплохо. Читай мой коммент снизу

[@sadasd3826]

@@foxnadir ,Во -первых,то ,что ты написал ни как не противоречит моему.Во-вторых,я все правильно написал,в том числе к глобальному обьекту относится и windows в среде браузера.Но нельзя говорить за это постоянно,так как в той же Node уже не будет никакого windows)

[@maxet2374]

спасибо за видос по замыканиям - я хоть через год в разработке норм понял. сделай плиз видос с примерами call bind apply

[@pomazkovjs]

Спасибо за коммент! Сделаю 💪🏻

[@goshan3170]

Спасибо, хочу к тебе на стажировку)))

[@yuriilee6077]

Круто! Объясни плз call и apply. Геттеры и Сеттеры тоже так же хотелось бы увидеть)

[@MaximImmersion]

Ждем видео про call и apply