24. js с нуля, ваще с нуля (this, контекст вызова)

it-incubator.e... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Дополнительные задания, о которых я говорю в видео, находятся вот здесь:
social-network...
Ищешь качественные курсы JS (frontend) в Минске? Приходи в мой IT-инкубатор: it-kamasutra.co...
Это не просто курсы по JavaScript, блабла теория, учебная практика и красивый сертификат об окончании курсов на выходе.
it-инкубатор - это боевая полугодовая подготовка из даже 0, в уверенного Junior-разработчика. 6 месяцев: теория + практика + стажировка н ареальных проектах.
100% гарантированное трудоустройство. Пиши\звони - пообщаемся

[@krotix4505]

Я на стадии: Подпеваю вступление ролика

[@vladovcharov517]

я на стадии - ключ, подпеваю вступление ролика - значение

[@999hibuki]

@@vladovcharov517 голова поехала

[@Stipaska9]

Забавно, 9:40 если смотреть на скорости 1.5 то порой можно услышать конфликт-интересов и внутреннюю борьбу Димыча с самим собой :D словно им, кто-то управляет :D п.с - спасибо, что музыка на фоне пропала, я перестал сходить с ума)

[@Gazovchik]

Добрый день Да. Жаль, что музыка исчезала. Мне очень нравилась...... Но я как-то и НЕ заметил (наверное слишком сложный, для меня, материал пошёл.)

[@ТимурХрусталёв-ъ1е]

Замыкание и есть. Чтобы не прибегать к замыканиям можно использовать стрелочные функции, тогда this будет соответствовать тому лексическому окружению, в котором этот this был указан. Спасибо за труд!

[@КузьмаКузьмин-н7в]

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

[@AlexAlex-cm7ne]

Есть много хороших блогеров, которые красиво и с чувством юмора рассказывают и объясняют javascript ("Добро пожаловать на шоу талантов!"). Но по итогу ты ничерта не понимаешь где и как в жизни всё это можно применить. И тут на арену выходит Димыч и укладывает всех на лопатки одним взглядом. Браво! Так держать!

[@Gazovchik]

Добрый день По поводу - одним взглядом - сложно согласиться - больше чем уверен - Это Труд и Вложения. И всё, что с этим связано.

[@lililight-e5f]

замыкание я поняла только здесь. функция that локальная, но она помнит все свои свойства и методы, которые были объявлены ей во внешней функции.that во внешней функции была объявлена, что она ручка объекта slider1. и теперь внутри локальной функции that говорит что это Я, и является по сути this-ом

[@AndreMazure]

this. это ССССССЫЛКА на ближайший объект (родительское название в котором этот this. лежит). Как бы мне помогла эта фраза в видео!

[@Gazovchik]

Добрый день Да. НЕ всегда, к сожалению, всё и сразу........

[@AlexGabber]

На момент записывания видоса на дворе стоит апрель 2017 года, в коде var и обычные декларативные функции, а ведь уже 2 года как все эти прелести имеются. Все ждал когда бага решится стрелками, так и не дождался. Вероятно смысл было не грузить учеников новым синтаксисом :)

[@ЕкатеринаКоваль-ъ1г]

Тема непроста для новичка. С наскоку не поймёшь, нужен уже какой-никакой опыт. Благо, теперь есть стрелочные функции, которые упрощают жизнь :)

[@compot8279]

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

[@Gazovchik]

Добрый день Интересно, а как дела у вас сейчас?......

[@compot8279]

@@Gazovchik Добрый день, я вам пишу из офиса, работаю Web разработчиком. Вам советую выучить, React или любой другой фреймворк. После начать делать TODO List c БД, так вы выучите работу с бекендом, Сейчас я знаю Ноду, Нест, Экспресс. Учите бек тоже, он не страшный, наоборот лёгкий, Удачи вам)

[@Gazovchik]

@@compot8279 Спасибо!

[@lum1196]

Спасибо, сама уже нашла (надо) это в следующем видео, где ошибка выскакивала именно из-за этого. У меня не выскакивала, ведь я написала везде 😁

[@marynakosiv3750]

лучшее объяснение когда либо!!!спасибо

[@РустамИбрагимов-ш8ь]

Смотрю твои видосы как телесериал, и думаю, а что же дальше будет. Хмм.... интересно

[@АлексГ-п3ж]

Спасибо! Очень интересно, доступно, полезно!!!

[@ДмитрийСергеевич-д8т]

Несколько раз пересмотрел видео, и каждый раз улыбает фраза "я должен буду вас убить, если расскажу вам об этом"😄

[@balloonjacket2177]

Спасибо огромное за уроки!

[@texasviking7732]

Дмитрий грызу JS но некая путаница существует в понимании: методики говорят что var уже устарел и надо использовать let + есть стрелочные функции которые так просты в понимании но пишутся по другому как обычно привык и они не используют this call bind apply super и это полная ж каша в голове такая что не знаешь как все это переварить

[@linuxlifepage]

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

[@ilyamuryn9260]

Thanks!

[@SerhiiAponchyk]

3 раз смотрю про этот this и так все запутано что ппц не могу вкурить

[@ITKAMASUTRA]

Тёма ТЯЖЕЛАЯ!

[@SerhiiAponchyk]

@@ITKAMASUTRA куда еще заглянуть что бы ее понять проще?

[@erikmamleev2490]

"Ну...не могу я этого вам обьяснить...Ай, похер"

[@АлексейТишаков]

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

[@compot8279]

в мозгу произошло замыкание

[@Gazovchik]

Ну ..... Неплохо вроде бы За два вечера, вчера позавчера, посмотрел, поконспектировал..... Сегодня с утра попробовал сделать сам..... Не сразу правда (в некоторых мелочах ошибся и - пока эти ошибки нашёл,,,,,) - Но Всё сделал.

[@Gazovchik]

Всем успехов в обучении (кто будет смотреть После меня /знаю есть такие/ ) Мира и добра

[@Youngspiritband]

Привет из 2022)) Крутой урок)

[@dmitry_beresten]

Дякую!

[@yuliatolstova]

лушие уроки по жс

[@Quentinrei]

Лайк поставлен, значит 5я домашка по нативке выполнена

[@ПутьКПобедам-х4ш]

Обожаю эту музыку

[@dmitriyv5740]

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

[@lum1196]

Здравствуйте! Скажите пожалуйста, почему в файле slider.js (на видео - 1:10 минута) в 30 строке не нужен this (this.showPrevBtn.disabled = true)? Спасибо!

[@Gazovchik]

Добрый день А у меня - Ещё Как Нужен иначе и ошибка появляется и работает не корректно......

[@Артём-д6н6н]

прошлый урок посмотри он специально не поставил

[@alexeykorovatsky3053]

Димыч, спасибо за урок! А как по канону назвать переменную that? Есть какие-то договоренности у разработчиков?

[@tanya8355]

Можно представить себе два случая. Первый вариант когда мы обращаемся непосредственно к человеку и говорим (this man) cкажи 'say' а второй когда у нас есть человек, который будет посредником .Я говорю посреднику передай тому человеку (that man) пусть скажет ' ? ', но при этом посредник не знает, что конкретно должен сказать человек. Посредник передает просьбу, а человек уже сам знает, что говорить. Я вот себе так в голове разложила, правильно или не совсем?

[@vadimt9862]

that.onShowNextBtnClick(); здесь вы выше указали что передается параметр e, а ниже не поставили е, но если убрать параметр то он и без него работает, почему так? ТО есть можно и в скобках писать параметр e и можно не писать, и так и так работает. И так же в функции function(e)

[@Master-lh2xt]

Ох и намудрили разрабы с this в JS. Тааакие костыли! Капец. В Java все просто с this. Чувствуется, что изначально разрабы JavaScript скомуниздили очень многое из Java, но не смогли довести до ума некоторые вещи

[@victorplugarev1938]

Можно без дополнительной функции сделать привязку this c помощью bind. У меня получилось так this.showPrevBtn.addEventListener('click', this.onShowPrevBtn.bind(slider)); this.showNextBtn.addEventListener('click', this.onShowNextBtn.bind(slider));

[@GrandAlexandr]

Вот оно свершилось, первая тема, которую я не понял вообще 😆 буду стараться вникнуть, спасибо за контент)

[@Alexrudz]

Дмитрий,ждал здесь про bind

[@ИльяИваник-ф8ф]

kzbin.info/www/bejne/imLZe2uFma-kZtE - а можно this снаружи передать в listener? типа : this.showPrevBtn.addEventListener('click', function(e, this) { .... } ); и дальше его прокинуть в onShowPrevBtnClick(e, this) а обязательно делать "обертывание" that в function? можно просто написать: this.showPrevBtn.addEventListener('click', that.onShowPrevBtnClick) ?

[@velcomnabuzdov3059]

Ребята Дима говорит про домашние задания а где ссылка на их?

[@mc_missato_katsuragi]

Кто нибудь сможет подсказать зачем нужна обёртка у that.onPrevButtonClick и почему без обёртки код работать не будет?

[@nazariihrysuk103]

Ну я не могу понять какой смисл параметра 'e' в єтом случае

[@artempavlenko5147]

sos. не пойму зачем нужно указывать параметр (е) . start: function () { var that = this; //subscribe to events this.showPrevBtn.addEventListener("click", function(e) { that.onShowPrevBtnClick(e) }); this.showNextBtn.addEventListener("click", function(e) { that.onShowNextBtnClick(e) });

[@Gazovchik]

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

[@rubenshteyn]

Может кто-нибудь подсказать почему когда в методе "onShowNextBtnClick: function (e)" стоит ":", то появляется такая ошибка "Uncaught SyntaxError: Unexpected token ':'"

[@user-uu2id7re7g]

так и не понял, если мне на данный момент из этого курса все понятно, мне нужно еще что то читать по джаваскрипту? чтобы на стартовую вакансию попасть достаточно будет пройти (и полностью понять) этот курс и реакт-путь-самурая? Или нужно будет параллельно еще 100500 книг изучать?

[@ИванШвалев-к8р]

Какие новости за месяц? Я думаю нужно идти дальше по списку требований в вакансиях, паралельно ходить на собесы

[@user-uu2id7re7g]

@@ИванШвалев-к8р да пока никаких, самурая на 14 уроке прекратил, ушёл в изучение верстки и learn javascript ru. Верстка поганая тормозит весь процесс, очень тяжело идет. Наверное забью на неё, вернусь завтра к самураю

[@ИванШвалев-к8р]

@@user-uu2id7re7g norm

[@lomb1056]

@@user-uu2id7re7g А сейчас как успехи?

[@user-uu2id7re7g]

@@lomb1056 все плохо. Я раздолбай, сделал пару тестовых, мне отказали, я забил, надоело учить. В вакансиях, где указано в требованиях "без опыта работы, знание основ html,css,js" - это вранье, не понимаю зачем они так пишут. После отклика на такую вакансию тебе дают тестовое, где на деле им нужна уверенная pixel perfect адаптивная верстка по бэму.

[@ОлександрОпенько-ь6м]

а если создать переменную that в объекте слайдер а не в методе, так будет более правильно ?

[@Gazovchik]

Добрый день так НЕ работает (у меня по крайней мере)

[@СофияЩур-ъ3р]

код с = не работает, пришлось сделать так var slider1 = { imagesUrls: [], currentImageIndex : 0, showPrevBtn : document.getElementById ('show-prev'), showNextBtn : document.getElementById ('show-next'), slideImage : document.getElementById ('slide-img'),

[@YS-nh6bw]

спс

[@Hayabusa17]

23:20 консоль показывает с точки зрении функций, правильно???

[@aprinciple9559]

Как-то всё сильно поверхностно, на некоторые моменты "похер" - цитата из видео)) Нельзя так. Зачем event добавлять приемнику вызова события, новичок будет думать, что слайдер без этого работать не будет, а он будет, да и вообще именно такие тонкости и нужно глубоко раскрывать/объяснять, так как именно эти "тонкости" JS вызывают вопросы, и новички ищут ответы на них, вряд ли, посмотрев это видео, он поймёт. React путь самурая такой же? Нужно сначала читать про react, а потом только смотреть видео?)

[@ITKAMASUTRA]

спасибо за мнение! Я со многим согласен. Это мой первый цикл видео, при этом у меня ещё не было опыта офлайного образования и я шёл по сценарию, который "как мне казалось" будет хорош и научит людей! Очень сложно рассказать обо всём, о нюансах в том числе, чтобы это было понятно новичкам и чтобы это их не спугнуло! В планах снять новый цикл JS с нуля)) Но потом... Позже!) "React путь самурая" я детально продумываю, наализирую офлайновый путь моих бойцов (который его уже 4 месяца проходят на практике) Видео поэтому рождаются более осознанные и о наболевшем)) Читать про Реакт перед просмотром не нужно 100%! Но читать параллельно с моим курсом документацию\книгу\ресурсы 100% нужно! Целостную картину по одному источнику никогда не собрать!

[@aprinciple9559]

@@ITKAMASUTRA Да, просто новичок убежит, когда не будет понимать, он вряд ли тут поймет, каналу это будет в минус. Например, видео с офлайн про замыкания - kzbin.info/www/bejne/jpu4aWmai5tni6c Вот это топчик, потому крутили-вертели ту переменную/объявление везде, тонкости разобрали, круто, мне реально понравилось. Видео про основы много, 50 курсов наснимали уже по JS, а вот почему-то замыкания/прототипы многие, да почти все опускают, потому что, наверное, и сами её толком не понимают, так как именно это вызывает проблемы у JS - бойцов. Я, например, нашел этот канал, когда гуглил прототипы. Вы сами вбейте прототипы JS в ютюбе, вы удивитесь как мало материала/инфы по этому вопросу. Вот тут можно и выиграть вам. Выкладывайте даже хотя бы офлайн записи этих тем, как с записью про замыкания. Хоть и 2 часа видео, но при скорости x2 нормально катит) Успехов каналу

[@ITKAMASUTRA]

@@aprinciple9559 спасибо за идеи и пинок!!! Да, действительно , есть темы насущные такие, которые осветить нужно 100%!!!! Замыкание - номер 1 тема!!! Расскажу о нём обязательно в ближайшем будущем!

[@ИванШвалев-к8р]

@@ITKAMASUTRA я по js так и делаю. Смотрю курс и читаю книгу. Трехмесячный план на стадии перехода с html+css на js

[@icatsby900]

Сложновато заходит... Завидую офлайн студентам(((

[@ruslandidun358]

сначала не понял, а потом кааак... все равно не понял(( я тупой дуболом?

[@Gazovchik]

Добрый день а Сейчас?

[@НискемкромеСовести]

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

[@andreiBylkin]

ахаххахаа

[@andreiBylkin]

я тоже постоянно на счет white theme негодую ))

[@englishanimated5637]

светлая тема меньше сажает зрение

[@НискемкромеСовести]

@@englishanimated5637 серьезно?

[@compot8279]

интересно айти камасутра сделает ли меня программером :)

[@crissquest3258]

нЭт :)

[@compot8279]

@@crissquest3258 сделал

[@ТаратутаМарта]

хм...а как же call, apply, bind?

[@ITKAMASUTRA]

Сложные темы для новичков! Расскажу и о них!

[@andranikhambardzumyan6264]

+

[@РоманМатвеенко-м8ч]

Нуууу. Если не лезть глубоко в дебри, то вроде понятно... Пока что... Наверное...

[@Gazovchik]

Добрый день А сейчас?

[@anastasiiasorina2809]

Я не понимаю((((

[@АлександрМарков-ч4в]

максимально не понятно(

[@eugenegambler713]

Надо лучше готовиться к урокам

[@outs1der]

Ты бабки заплатил за эти уроки?

[@Gazovchik]

@@outs1der всем привет уместный вопрос Легче всего говорить, что делать Другим.......

[@bring_you_up]

ни слова про call(), bind(), apply()

[@Ярослав-й6и4щ]

сними видос как не забывать ставить ; : '' , . бывает по минут 15 ищу где не поставил,а раньше затягивало и на 40-60 минут

[@evgenipisarev3288]

Них не понятно, рисунки ваще в тупняк вгоняют

[@FilmicFil]

Чувак ты просто ужасно объясняешь

[@ITKAMASUTRA]

На вкус и цвет... чувак))) ищи своего автора ✊

[@МаливанчукСергей]

"Ну...не могу я этого вам обьяснить...Ай, похер" найс отношение

[@Vladislav_Bendus]

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

[@TheBestSurvival]

О Боже JS на VS, Лучше бы уже в notepad++

[@ITKAMASUTRA]

У каждого свои предпочтения) и это здорово!

[@aprinciple9559]

А чем VS плох? Лол На нем расширений/плагинов, который сделает из него полноценный IDE, тому же webstorm он будет уступать только в скорости поиска по проекту.

[@konstantinsurnin855]

@@ITKAMASUTRA как тебе Brackets?