Полный разбор THIS в JavaScript за 26 минут | this в стрелочных функциях, call bind apply, Window
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- ⭐ 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 #фронтенд
![var, let, const: ПОЛНЫЙ КУРС [2023] | Объявление переменных в JS](http://i.ytimg.com/vi/07FllcTRj84/mqdefault.jpg)
Мой интенсив по JS:
🔥pomazkovjs-hangman.ru/
Больше крутого контента:
🚀 Telegram - t.me/pomazkovjs
👀 Instagram - instagram.com/pomazkov.js
дизлайк за маленький шрифт. смотрю на телефоне, не фига не видно. в ведь большинство телефонов среди людей имеют разрешение 720p.
Отдельное видео по call, apply, bind будет очень полезным. Спасибо за работу и старания)
Легенда вернулась!
Твой урок по замыканиям лучший в ютубе)
Спасибо!)) 🔥
Лесть, такое себе. Но да - автор молодец. Плюс ещё один блогер, который толково объясняет. Просто и по полочкам.
@@gregdmitriev2784 лесть не лесть, но мне реально его уроки помогают
А смотрел я много разных авторов
Если человек старается, то пусть видит обратную связь
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
Огроменное тебе спасибище за твой неимоверный труд и время, которое ты тратишь, чтобы снимать такие интересные и суперкачественные ролики. Безумно нравится твоя подача материала: без воды, всё чётко по полочкам и с примерами. Желаю тебе продолжать в том же духе и вдохновлять ребят, начинающих этот нелёгкий путь, идти к своей мечте и не сдаваться).
Ещё было бы интересно посмотреть видео на такие темы, как Promise, цепочки промисов, асинхронное программирование, HTTP/HTTPS, RESTful API, Prototypes, Event Loop.
Большое спасибо за такой приятный комментарий! Буду стараться 🔥
Спасибо, действительно понятно!
спасибо за доступный урок
Спасибо за видео 😊
Это прям огонь 🔥 спасибо.
очень качественный материал,спасибо!
Спасибо, очень познавательное видео.
Спасибо очень хороший разбор.
Круто, спасибо!
Отличное видео!👍
Спасибо) Супер!
Круто! Спасибо
Огромное вам спасибо
Крутое видео!!!
Спасибо!
Спасибо за видео, очень хорошо разьяснил
Спасибо! Делай больше видео!!!!
Полезно. Подписался
спасибо за контент =)
Лайк авансом =), ну и конечно же коммент в поддержку канала! Арсений не забывай про видосы!!! Контент супер!!!
Спасибо за поддержку, стараюсь! 💪🏼
@@pomazkovjs Кстати, интересно, а будет ли про Vue что-то? А то на TH-cam про него очень мало всего (понятно, что из-за React'а, который более используем)
спасибо за урок
Годный контент!
видео крутое, разбор четкий!
видео полезно!
Красота)
Отличный контент
Автор, выражаю своё спасибо лайком, и подпиской. Ты мне очень помог разобраться с this!
Конечно же лайк
Спасибо 👍
Привет, крутые видео. Очень жду видео про асинхронности.
Хорошее видео мне помогло
Твои видео всегда дают простое понимание сложных вещей. Спасибо.
Пили подробный видос про call, apply
Привет!
Спасибо за то что делишься своими знаниями и классную подачу в видео, четко и понятно!)
Думаю классно будет , если будет roadmap на ютубе, по твоему frontend roadmap там где ты выписал что нужно знать начинающему разработчику)
Спасибо за видео!
Привет! Спасибо за крутые объяснения! Очень хотелось бы разобрать в таком духе промисы, async/await
Особенно круто, что ты разбираешь не попсовые темы
Хотелось бы услышать про асинхронность в JS в твоем исполнении, очено хорошо объясняешь 🔥🤝
Спасибо, что помогаешь разобраться в языке. На эту тему не так много детальных роликов, все люди лишь пробегаются по верхам, как будто темы легкие и не важные. Буду ждать следующих роликов
Так и автор пробегается по верхам , найдите канал as for js ,вот там по настоящему глубоко разбирают js
@@user-nf5yc7xz9b Я уже там подписчик. Проблема того канала заключается в том, что автор уничтожает современный подход к изучению JS. Может быть это и полезно, но что это даёт? Каждый раз на собеседованиях спорить и пытаться объяснять принципиально новую позицию? Это слишком муторно и сложно всё донести идеально правильно. Тем более на этом канале человек дошел до синьорской должности со знаниями абстракций по типу замыканий, контекста и прочей лабуды. Эффективнее всего, как мне кажется, понять эти абстракции и ими апеллировать на собеседованиях. По крайней мере собеседования не будут такими стрессовыми и сложными.
круто полезный контент
Спасибо за контент! Будет в ближайшем будущем видос про прототипы?
Спасибо
Спасибо огромное за твой труд!!! Объяснения очень понятные👏👏👏 Продолжай пожалуйста снимать.
Комментарий для продвижения, так держать
круто!
Отличный ролик, представляю сколько времени на него ушло :)
Спасибо!) Времени ушло действительно много, но я уверен, что все не зря, и этот разбор многим поможет 🙌
Спасибо за видео. Для меня это сейчас уже не так страшно, но всё ещё страшно)). Хотелось бы посмотреть подробнее и про call, bind, apply.
Я первый раз использовала конструктор для создания студентов (домашняя работа, да))), плюс там методы разные, куда я добавляла функции расчёта возраста, на каком курсе студент, полное имя, очень удобно получилось. Код стал чище в разы, легче и понятнее писался код
Ура, я ждала это видео! Спасибо!
спасибо
Ты топ бро спасибо
Арсений, спасибо огромное за обучающие видео! Всё максимально подробно, интересно и, что самое главное, понятно!
Молодчина
Видео показалось мне полезным. Поэтому я, как наставлял Автор, прожал Like и пишу об этом в комментариях..
Прекраааасное видео
Добрый час, спасибо за видео, было бы интересно ролик про Primise и fetch
18:56 Не из-за того что .forEach вторым аргументом передает undefined в коллбек - внутри него this определяется как undefined. А все из-за того, что любая функция определенная в JavaScript по умолчанию является методом объекта (ВНИМАНИЕ!) window. И this тут ссылается именно к глобальному объекту window и ищет там свойство lastName. Вот оно там не определено и возвращает undefined. Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";
22:10 а внутри setTimeout *this* не определятся все потому что setTimeout изначально является методом windows объекта (как и было сказано вначале). Он тоже ссылается в глобальный объект своим this'ом.
"Это легко проверить написав в глобальной области this.lastName = "Виндоуское Иванов";" - или в самой функции выводить просто this. Можно еще добавить вторым параметром undefined и увидеть что ничего не поменяется, a если добавить другой объект, то поменяется только для logFullNames1.
Спасибо за твой канал. Благодаря тебе я снова начал программировать спустя 3 года
Воу, огонь! Рад, что помог найти мотивацию и вдохновение)
ждем подробное объяснение про call,bind и apply также хотелось бы увидеть объяснение про конструкторы и классы.
Поддержка!
Ждем видео про call и apply
супер
Отдельное видео по call, apply, bind пожалуйста.
У тебя очень крутые видео, и очень понятные, можешь пожалуйста сделать видео про методы массивов, строк и объектов. Буду очень благодарен)
Круть, еще бы про Event Loop, prototype, async 😔
суперские объяснения, смотрю уже третий видос и это один из лучших каналов по js
Про промисы хотелось бы разбор и про асинхронность
Привет. Изучаю сейчас js. Я на пути к фронтенд разработчику ахахах) Из многих видосов на ютубе по теории программирования очень мало таких видосов, которые хорошо сконструированы. То есть мало видосов, в которых их авторы обьъясняют всё поэтапно. А у тебя всё хорошо сконстурировано в видео и понятно всё от начала и до конца. Спасибо за твою работу)
Нереальное видео, именно благодаря таким как вы джуны готовятся к собеседованиям, вечный +реп
и не устраиваются. АХАХАХАХАХА. Рынок переполнен настолько, что устроиться на джуна вообще нереально
полезное видео
Только сегодня разбирался с this, а тут как раз это видео)) Я подписчик с замыкания))
Идеальный тайминг 🔥
Ждем видео про промисы и прототипы
спасибо за видос по замыканиям - я хоть через год в разработке норм понял. сделай плиз видос с примерами call bind apply
Спасибо за коммент! Сделаю 💪🏻
Спасибо большое, это лучшее видео про this💐
Видео супер! Понятно все! По полочкам!
Круто! Объясни плз call и apply. Геттеры и Сеттеры тоже так же хотелось бы увидеть)
Круто, я всё понял 👍 неплохой пример с setTimeout и event loop, мне понравился🔥
Твои видео всегда дают простое понимание сложных вещей. Спасибо.
круто! когда разбор массивов?)
Спасибо, хочу к тебе на стажировку)))
Вы очень ясно и понятно объясняйте
спасибо за хороший контент❣
Прекрасно
Понятно и без воды
Спасибо)
Красава!!! Давай жги дальше. Жду новых видосов
Хотелось бы уточнить за пример вложенной функции на 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 ,Во -первых,то ,что ты написал ни как не противоречит моему.Во-вторых,я все правильно написал,в том числе к глобальному обьекту относится и windows в среде браузера.Но нельзя говорить за это постоянно,так как в той же Node уже не будет никакого windows)
Спасибо за урок! Ждём ещё больше твоих крутых видео!🔥🔥🔥🔥🔥🔥🔥🔥🔥
Очень здорово объясняешь! Спасибо тебе!!
просто красавчик, оч крутые видео, топ контент)
не останавливайся
Спасибо большое за Ваши видео, они очень помогают глубже понимать материал.
Обожаю ваше объяснение, но я не смотрела еще первую часть, так что побежала смотреть ее😂😅 спасибо Вам за видеооо😍🔥
Спасибо! Приятного просмотра!)
Спасибо. Давай про нестандартный js. Например давай про генераторы, или про использование символов на практике?
Видео однозначно полезное, и подача материала на 5+
Офигенное видео) спасибо😍 было бы интересно послушать про классы
Спасибо за видео, было интересно смотреть и слушать !
Крутое объяснение! Спасибо.
как всегда топчик! подробно про каждый случай что не остается вопросов. К примеру видео про лет конст и вар очень сильно мне помогло
Жду видео про Рекурсию
Одно из лучших видео на ютубе про 'this' в js
Давай про промисы js)