Урок 2. JavaScript. Что такое контекст this. Как работает call, bind, apply

Эксклюзивный контент в Telegram: t.me/NextgenSo...
Telegram: t.me/js_by_vla...
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notio...
JavaScript. Что такое контекст this. Как работает call, bind, apply
В видео вы узнаете, что такое контекст в JavaScript, как он работает, как его передавать и что с ним можно делать.
В уроке вы узнаете про методы call, bind, apply - разницу между ними
В конце вы увидите практическое применение prototype в связке с контекстом и ключевым словом this
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...

[@VladilenMinin]

Ну что господа, стало ли более понятно с контекстом? Будем двигаться дальше?

[@hellicobacterpillory6677]

Единственное, что возник вопрос про call и apply Если у них разница только лишь в способе передачи аргументов, то зачем тогда в js два идентичных по сути метода? Или может все же есть ситуации, когда более удобно будет использовать тот или иной способ?

[@VladilenMinin]

@@hellicobacterpillory6677 Когда мы не знаем количество параметров, которые нужно передать в функцию, то единственный способ это использовать apply Когда знаем - call Запрос понял, сделаю пример

[@vertalet76crew]

Пожалуй лучшее объяснение что я видел на ютубе, жду промисы

[@ural-site]

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

[@-it-kidys]

@@ural-site Насколько знаю в стрелочных функциях контекст жестко привязан к объекту в рамках которого она была инициализирована. По аналогии, как метод bind жестко закрепляет за собой контекст (и даже аргументы). Вроде прав? Поправьте, если не так

[@wickedtorpedo75]

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

[@grantorino3465]

как ты определил качество уроков?

[@ВоваШпилевой-в5ж]

@@grantorino3465 он просто кайфанул так сказать

[@tropovgabarin5001]

Как просмотр порно

[@АБерс]

Отдельное Спасибо хочу сказать Владилену за то, что в начале видео он говорит, что тема простая для понимания. А то заходишь в панике пытаясь понять, и тут на тебе, "простая тема". Это помогает.!

[@Артур-н5с]

02:57 оно вызывает то, что стоит слева от точки, где мы вызываем данную функцию 03:20 Ключевое слово this всегда динамичное, оно указывает на тот объект в контексте которого оно было вызвано 04:50 функция bind - в качестве значения этой функции му можем передать тот контекст который будет привязан у вызываемой функции 05:37 сам по this себе указывает на глобальный объект window 09:00 метод bind на самом деле не вызывает функцию, а возвращает новую функцию которая уже привязала к себе новый контекст 09:50 метод group у объекта console 12:51 С помощью метода bind, помимо того что первым параметром мы указываем контекст который должен быть привязан к новой функции, другими параметрами мы можем передавать следующие параметры которые нужны функции 13:47 Метод call. Отличие от метода bind, что он метод call сразу же вызывает эту функцию, а метод bind в свою очередь возвращает нам новую функцию, и её мы можем вызвать тогда, когда нам угодно 14:50 Метод apply. В отличие от методов bind и call, где можно бесконечное число параметров, в метод apply мы всегда передаем два параметра. У метода apply второй параметр всегда массив, и этот массив состоит из аргументов которые попадут в эту функцию. Метод apply сразу же вызывает эту функцию. 15:45 Практика с использованием прототипов и контекста (this)

[@_9382]

Кто ты воин !!!?? Доброжелатель )))

[@rudinandrey]

реально спасибо большое, сколько на JS пишу, всегда боялся этого this, особенно bind и apply :-) вот прям рассказал так, что все очень и очень понятно, прям разжевал и в рот положил. Респектос!

[@VladilenMinin]

Благодарю за отзыв)

[@ДанилДмитриев-я5м]

как успехи

[@ПавелМорозов-я4т]

Вот неужели никто раньше не мог так понятно объяснить?) шикардос!)

[@ВладимирЛевадный-ц1и]

Наконец по человечески всё объяснили, а я голову ломал, когда учил. А мог просто посмотреть. Автор молодец

[@artkit8bit]

Наконец три этих метода и их отличие, объяснили доступным языком и, без "воды". Огромное спасибо, сейчас нужно подтянуть знания по JS и Ваш труд в этом очень помогает!

[@iKhripunov86]

Лучшее объяснение bind, call,, apply, которое я видел. Спасибо! Для this не затронута тема стрелочных функций, но в целом все и так думают знают, что стрелочные функции не имеют собственного контекста выполнения. На практике это означает, что они наследуют this от родительской функции.

[@nekom112]

Владилен, спасибо тебе огромнейшее за материал. Очень помог! До этого видоса дня два разбирался с this и методами, не мог устаканить в голове. Респект за твой труд! Верю, что все эти не простые времена пройдут быстро!!!

[@AOne1999]

Просто взрыа мозга. Автор твои видео это просто пушка, другого названия не придумать наконец то я все это понял. Разложено по полочкам с превосходными примерами.

[@charliebrown5554]

2022 - видео до сих пор актуально. Спасибо, Владилен, за подробный разбор!)

[@АлексейПостников-ы4е]

Лучшее объяснение bind, call и apply на всем рунете

[@mike_tallon]

Отличный канал по JS. Однозначно лайк, хорошее объяснение материала!

[@АлександрЗенин-ю2ж]

Наконец-то что-то адекватное появилось на этой площадке.

[@n3squi]

Александр Зенин плюсую

[@VSsoviet]

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

[@ЕвгенийПанкратов-г5ь]

Глупые вы, намеренно создаёте уязвимость.

[@ЯнаАлександровна-э7к]

Это великолепно! Смотришь и радуешься, что такие замечательные вещи узнаешь и понимаешь. Всё логично, а главное сразу видишь, зачем нужны эти "премудрости"))) Спасибо!

[@malex-maleth]

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

[@Sergio-ij7pw]

У вас просто талант объяснять сложные вещи простым языком. Снимаю шляпу) Я наконец-то понял зачем еще нужен bind, когда есть call.

[@ПашаХодор-ш9о]

Спасибо за достаточно понятное объяснение, такого контента мало, в основном одни основы js

[@batradzbazzaev]

Именно такое объяснение нужно, чтобы понять как все работает. Спасибо большое. Долго разбирался с this, теперь все понятно. Оказалось это совсем просто

[@seregaktyh]

Очень круто, на ютубе 99% видео о том, как создать переменную и вызвать функцию, скопированную из другого обучающего видео, а такие темы практически не затрагиваются. Тебе прям огромное спасибо)

[@VladilenMinin]

В этом и была идея. На канале не будет основ. Только крутые продвинутые вещи)

[@holyage3128]

Спасибо за наглядное объяснения. Благодарен за то, что такой прекрасный контент еще и в бесплатном доступе)

[@АллаКарелина-н9ц]

Ваш контент просто 10 из 10. Действительно помогаете расширять видение кода и возможности использования js

[@seriusis]

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

[@VladilenMinin]

Благодарю за отзыв )

[@stanfarshtei1291]

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

[@korderorey2452]

Я новичок в программировании и долго не мог понять о каких контекстах и объектах вообще идет речь, поэтому для меня this было чем-то очень непонятным, но насколько же было гениально сказать про то, что this возвращает ту левую штуку после точки. Всё сразу встало на свои места и мне удалось разобраться с контекстами. Большое спасибо.

[@Oughtem]

Чувак, это самое ясное и понятное из всего, что я слышал о понятии «контекст». Когда учил ооп в пхп мозг взрывался от этого слова. Сенкью вери мач. Спустя полгода практики на место становится теория. Лайк, подписка, респект!

[@Vlad-em1bx]

Лучших уроков по javascript чем у Вас Владилен я не встречал! Так держать!

[@КириллЧетвертков]

Пожалуй, самое доступное объяснение понятия контекста

[@dibmediya6666]

твоё любимое слово "на самом деле" Good Luck Broo

[@sulmom78]

Вау. У меня просто нет слов. Лучшее объяснение контекста. Огромное спасибо, Владилен!

[@СергейКулаков-ю6д]

учиться у senior'а мне как начинающего углублённо знать js и то, что у него под капотом, с грамотной подачей и доходчиво (хоть и придётся снова и снова возвращаться) прям супер

[@giomikadze3318]

чувак !!! ты монстр просто !! ты настолько тактичный ... спасибо !!!❤

[@vladk3111]

в обычных уроках на более простом уровне учат про контекст this, что он позволяет просто обратиться к названию объекта при написании методов внутри объекта. В твоём же уроке более понятно, что у this намного бОльшие возможности. Так же однозначный лайк за пример с прототипами. После этого стало намноjjго понятнее, для чего нужны прототипы и как конкретно ими пользоваться...

[@vladk3111]

@@ojgenn а для чего тогда нужны прототипы? ну на примере данного видео, когда Владилен открывал прототипы Массива, там было штук 10 встроенных методов) нах они нужны?) Ну или любой ваш пример будет полезен для всех пользователей)

[@vladk3111]

@@ojgenn ну не знаю. на мой взгляд это оооочень удобно. А для чего ещё в JS существует прототипное наследование??? Вот вам пример, видео ещё одного ментора. kzbin.info/www/bejne/ZqfWZ4qhg96tm8U Посмотрите с 5:52. Он до этого рассказывает про прототипы, а потом с 5:52 говорит, для чего их удобно использовать

[@vladk3111]

@@ojgenn Не не, про return пустой массив вопросов нет :) Я про то, что, исключительно как мне кажется, хоть я и вообще без опыта работы в JS, пока только обучаюсь, но используя исключительно интуицию, бла бла бла, КАРОЧ, как мне кажется юзать прототипы как ресурс для добавления туда некоего метода - удобно. Не важно, функции/объекты/массивы. Это позволяет однотипный метод не добавлять в каждый объект. Потом этот метод можно юзать на все сотни объектов. При необходимости. Речь про это, а не про return [] или {} :) может, я конечно, и не прав. Не буду спорить. Опять же говорю, что мне кажется, что это удобно.

[@vladk3111]

​@@ojgenn Какой дурак будет добавлять через прототипы новый метод для глобального объекта с уже занесённым в справочник JS названием replace???... Вот вам ещё ссылка на учебник learn.javascript.ru/dom-attributes-and-properties, тут приведен пример, когда создаётся новый метод, добавляется через прототип к глобальному объекту и можно юзать потом его везде :) В общем, не буду с вами спорить, может вы и правы, я не про в JS, а только ученик, но я уже 4-й раз натыкаюсь в разных источниках на то, что прототипы для того и существуют, помимо прочего, чтоб через них добавлять какие-то методы С НОВЫМ НАЗВАНИЕМ.

[@vladk3111]

@@ojgenn Я могу что-то не правильно говорить, пока ещё учусь :) но посыл мой вы поняли.

[@anatoliyburdasov4035]

С первого раза понял!Другие так не могут обьяснить!Владилен я тебе благодарен!)))

[@ІлляЛарюшин]

иногда думаю как хорошо, что знаю язык на котором ты говоришь и делишся такой классной инфой

[@МаринаГуд-к3г]

Спасибо Вам огромное! Смотрю, впитываю, записываю. Учусь у Вас!

[@БогданЛевицький-ю8щ]

Не просто показал конекст this)) а научил менять вселенную) вселенную в моем мозге)

[@yaroslavzef7267]

Не просто показал, он его к ... привязал!

[@monsterbich8299]

Владилен какая же ты машина, спасибо тебе за этот курс, была б моя воля я бы тебе отдался

[@AntonKotorovych]

Очень легко и доступно)). Думал что сложная тема но зашла просто с первого раза)

[@vitaliyk958]

Круть, прям залип. Не ожидал, что такие курсы есть в свободном доступе

[@DIEZ919191]

ДААААА!!! НАКОНЕЦ-ТО НОРМАЛЬНОЕ ОБЪЯСНЕНИЕ!!!!!!!

[@VladilenMinin]

Добро пожаловать:)

[@Naddys0n]

Как я рад что нашел ваш канал, ваши видео эффективнее любых текстовых туториалов

[@romko-romario]

Очень полезное, информативное и доступно изложенное видео, с отличными примерами, респект автору! До его просмотра я так и не мог понять тонкости "this", а теперь всё стало ясно.

[@sofkozl]

Это не курс, а клад!! Спасибо большое ❤️

[@ЯнаАлександровна-э7к]

Пересматриваю плейлист по второму кругу. Хочется поставить по второму лайку!) Спасибо огромное!

[@justfisher2920]

Честно говоря, судя по лайкам, и коментам, на твоем канале находятся "Выжевшие" ,те кто не выгорел и дошел до хорошего уровня понимания js, а так же те кому реально интересно и он болдеет от процесса разработки и создания. Мощнейшие видосы, достоиные овердох*я лайков и подписки, классно преподносишь, а главное доступно - понятно! Респект тебе👍💪

[@Руслан-д8в2ы]

очень круто, наконец-то въехал в эту тему. Благодарность

[@petrvictorovich]

Это прекрасссно! Впервые столкнувшись с роликами Владилена, сразу понал: "Вот тот человек, который мне щщас всё и объяснит!". =) А с этим набором продвинутых видосов у меня скоро не останется вопросов по JS Я начинаю чувствовать, что понимаю Javascript!

[@АлександрСа-в]

Идеальное объяснение темы. В том числе и по хронометражу ролика.

[@Александр-ь5н8у]

Жаль, что не могу поставить два лайка :)) Пример в конце видео, после теории, плюс свой код, после просмотра видео, очень быстро уничтожил теоретический хаос в голове разложив всё по полочкам. В твоих видео удаётся узнавать новое, они очень помогают понять работу JS.

[@NextgenSocialReptile]

Значит, цель уроков достигнута) Благодарю за отзыв)

[@АннаШвецова-о9н]

Тот случай, когда прочитала гигантскую статью, но разницу между bind и call/apply поняла только благодаря вашему паруминутному пояснению)))) Спасибо! Думаю, за продвинутым js приду к вам)))) А пока надо хорошенько поджунить.

[@MT-qm1ll]

Просто супер понятно, каждый видос заслуживает высших похвал

[@apa6368]

Чувак ты лучший. Всегда систематизированная подача информации, класс

[@ТимурТокумов-и1к]

Круто! С прототипами вообще ШОК контент для меня получился))) Очень удобно. Благодарю!!!

[@B_G_V]

Оставлю здесь для себя памятку, чтобы не пересматривать видос :) *This* - это ссылка на некий объект. Для _this_ есть три базовых сценария применения. 1. В *обычной функции* _this_ определяется в момент ВЫЗОВА функции. ▪ зависит от контекста вызова, т.е. от того внутри какого объекта она вызывается, на тот объект и будет ссылаться слово _this_ ▪ можно изменить через _bind/call/apply_ 2. В *стрелочной функции* _this_ определяется в момент СОЗДАНИЯ функции. ▪берёт _this_ из лексического окружения, в момент создания. ▪нельзя изменить контекст, в том числе методами _bind/call/apply_ 3. В *функции-конструкторе* _this_ ссылается на объект, который будет создан. ▪оператор _new_ в момент вызова функции-конструктора, неявно создает пустой объект, который присваивается _this_ ▪далее идет наполнение этого объекта с помощью _this_ нужными нам свойствами и методами. ▪после чего функция-конструктор неявно возвращает нужный нам объект. Методами _bind/call/apply_ можно изменить контекст вызова функции. В каждый из методов можно передать нужный нам объект, который будет поставляться вместо _this_ в теле функции. Метод _bind_ возвращает функцию с измененным контекстом, методы _call_ и _apply_ изменяют контекст и сразу вызывают функцию.

[@nailabdullin7096]

Ты просто Мега Человек😎!!! Спасибо, этот пробел в знаниях мне вечно был не понятен местами... спасибо за то что ты делаешь! Желаю десятки миллионов благодарных подписчиков твоему каналу!!!

[@Game-oz6gg]

Владилен, огромное спасибо за уроки! Не хватает только разве что домашних заданий с задачками. Для полного усвоения материала

[@petrvictorovich]

Я теперь понимаю все конструкции языка. Далее можно смотреть и понимать код с Гитзаба А далее - пора будет начинать делать свои проектики. Задания - не нужны.

[@vladmatsala9753]

Спасибо отдельно за порции. Их можно переварить за один присест.

[@ilgul9177]

Большущая БЛАГОДАРНОСТЬ за такой подробный урок и настолько понятную подачу материала, который сложно где-то раскопать в русскоязычном сегменте KZbin.

[@undefined-n5v]

В замечательной книге "You Don't know JavaScript" автор отлично рассказывает про работу this. Он вводит понятие "Call site" (перевода нет, но думаю можно сказать "Место вызова"), короче this ссылается на тот объект, который вызвал данную функцию. Кому интересно, почитайте. Там целая книга только про this и прототипы (маленькая, не бойтесь). А ролик великолепный, все понятно, все по полочкам, все с примерами.

[@gregorytorshin2574]

Практический пример афигенный! Спасибо, четко и понятно рассказываешь и показываешь

[@diletantess]

Лучшее объяснения чем здесь не найти

[@jmksm]

Спасибо, Владилен) Наконец-то понял как работает this)

[@FrazyCrog]

Отличный ролик! Спасибо, Владилен. Практический пример в конце реально очень ценен

[@kmz_3992]

Спасибо за уроки,ты большой молодец, столько часов крутого контента Начал смотреть в сторону смены проф ориентации, программирование может быть интересным)

[@astronaut8016]

Кстати довольно удобно объяснено, вместо 4ех правил, которые я учил, чему будет равно this в той или иной ситуации тут все проще, контекст будет равен тому, что слева от точки

[@m.movsar]

Никогда не думал, что пойму this. Спасибо!

[@StetskoV]

Владлен, огромное спасибо за труд! Вы великолепно обьясняете!

[@NirupamDji]

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

[@balexfox]

Чот я запоздал. благодарю за Урок Владилен

[@alicemay4037]

Огромное спасибо! Давно не могла разобраться с этими методами

[@neonbrickchannel2136]

Отличный урок. Супер! Скажу ещё про одну вещь, если мы добавляем к прототипу массива новый метод, его начинает видеть for... in при перечислении (for... of нет, но знаю, что многим больше нравится for... in). Исправить это не сложно, достаточно использовать Object.defineProperty, указав имя нашего метода и класс Array, а в параметрах указать enumerable: false. Это же работает и с в других похожих ситуациях.

[@kirsanych5911]

Отличное объяснение. Спасибо

[@kirillkhvorikov9470]

Спасибо, Владилен, за твои видео!

[@Victoria-ly2ij]

Шикарное объяснение!! Лучшее что видела) однозначно подписка и огромный лайк. Спасибо!

[@VladilenMinin]

Благодарю, я старался)

[@alla_mardar]

Очень хорошее объяснение, высшая похвала и огромное спасибо!

[@stefanlinskii]

Платформа супер,все работает как надо)

[@alexyaremenko7165]

супер, спасибо Вам большое) заполняю "пробелы" в знании JS_

[@MirasR37]

Наконец все прояснилось с контекстом, огромное спасибо, лайк и подписка)

[@RewCSharp]

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

[@alexz8018]

Спасибо за простое и доходчивое объяснение. Начал понимать что к чему!

[@AnatolyGradovoy]

а я больше приблизился к мысли, что я - пень

[@bohdandemian152]

Супер доступно та пізнавально🔥 Дякую!

[@badenglishcooljs8233]

Сколько я бился со скриптом,но только после твоих видео начал сам писать код Большое тебе спасибо!

[@linuxoid69]

Владилен, это просто бомба, ты объясняешь так как будто ты сам JS создал. Это лайк однозначно. Сразу видно что ты в этом просто "варишся" ни одной ошибки не сделал. Это означает что ты полностью осознаешь и понимаешь что ты делаешь. Супер.

[@kostasancez2358]

Круто, спасибо) Очень понятно все разжевал и положил в мозг, спасибо) Расскажи пожалуйста про классы еще, тоже интересная тема. Спасибо

[@hasst9261]

Спасибо за видео, все очень круто, интересно и приятно смотреть ваши видео. Все понятно, Вы очень хорошо объясняете. Удачи вам!

[@OleksandrRedka-e2c]

Отличный видос где все полностью понятно все// Благодарю автора

[@chessclub92]

Владелин спасибо тебе очень круто объясняешь !

[@katjafed]

СПАСИБО за такую простую подачу материала, мне очень помогло! А то я завязла немного в данной теме, видимо мозг еще не до конца перестроился)

[@kostiantynkarzhanov9216]

Дуже дякую. Тему пояненно дуже гарно та зрозуміло 💛

[@liliyawater2559]

Просто восхитительные уроки, во всяком случае первые два)) Только начала смотреть плейлист)) Надеюсь, что я дальше буду смотреть с таким же удовольствием. Класс!!! Спасибо большое

[@МишаАстахов-ю2д]

Бомба 💣! такого крутого обьяснения я ещё не слышал. спасибо! . Лайк. Наконец то я понял этот ненавистный this

[@racman9964]

С первого раза все стало понятно! Спасибо огромное

[@ЕленаКазакова-о1э4и]

Большое человеческое спасибо! Наконец-то все стало ясно.

[@a_razer]

самое офигенное объяснение что я видел!

[@ПетроПотрошенко]

Комментарий из восьми слов для поддержки этого видео.

[@Sandra__2a0]

Hi, I have some exceptional news that will put a smile on your face!

[@softbrigada]

Владилен, лучший 👍

[@корзина-ь5щ]

11:35 job is undefined... аж грустно стало немного

[@lostsouls3151]

Посмотри в const person у тебя в logInfo должно быть ${job}, а не ${this.job}. Аналогично с phone. Такая же беда была. После замены все отображается

[@stanislavkravtsov5404]

@@lostsouls3151 чел ты...

[@lostsouls3151]

@@stanislavkravtsov5404 ???

[@stanislavkravtsov5404]

@@lostsouls3151 ну, она зарофлила, мол работа - не найдена(job is undefined)а ты подумал, что у неё код с "job" не работает

[@lostsouls3151]

@@stanislavkravtsov5404 бля.... Только дошло😅 а я на полном серьёзе подумал с кодом проблема 😂😂😂

[@Гундос_Фан]

Спасибо за качественное объяснение, лайк подписка!