Изучим методы функций call, apply, bind в JavaScript
Вставка
- Опубліковано 3 сер 2024
- Разберём работу этих методов, различные способы применения на реальных задачах из практики. А также посмотрим особенности метода bind.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский UA-cam: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
Ссылка на голосовалку по видео: forms.gle/ahhftfZQNN6QVEVc9
Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈
00:00 введение.
01:26 метод call
05:49 метод apply
06:46 одалживание метода
16:10 apply и call во вспомогательных методах (curry, throttle, debounce и т.д.)
24:10 метод bind
29:20 примеры использования bind
Видео, которые упоминала:
1. 20 методов массивов в JavaScript, которые вы должны знать - • 20 методов массивов в ...
2. Создаём drag & touch галерею на чистом JS (часть 1) - • Создаём drag & touch г...
3. Создаём drag & touch галерею на чистом JS (часть 2) - • Создаём drag & touch г...
4. Разберём каррирование: • Разберём каррирование ...
5. Пишем вместе throttle и debounce: • Пишем вместе throttle ...
Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (HTML, CSS, JS) и опыт в 10+ лет.
Лена привет! Сегодня перед собесом в Я смотрел твое видео по каррированию, это мне сильно помогло в решении задачки на декораторы! Спасибо!
Я рада. Спасибо за комментарий.❤
Я считаю, что не нужно никого сравнивать. Каждый автор подает материал через призму своего опыта. Кому-то будет понятно одно объяснение, а кому-то другое.
Удачи, коллега, в развитии канала. Растем пока что примерно одинаково =)
Спасибо за поддержку! Согласна, сравнения ни к чему, ни один человек не будет дубликатом другого. И в этом огромное преимущество каждого из нас. 😊
На вашем канале космические обложки к видео! Желаю вам тоже роста и развития ❤️
@@webelart Спасибо и вам! =)
Спасибо огромное за разъяснение, все наглядно и понятно )
Какая удача, спасибо за объяснение.
Обожаю твои объяснения, очень круто и полезно! Спасибо))
Благодарю за полный и интересный разбор методов! Очень полезный материал) Подписался😉
Спасибо, Лена! Столько всего интересного, хочется узнавать больше и пробовать все это после твоих видео!
Сразу ставлю лайк и коммент, авансом, ибо надеюсь, что будет полезно.
Пишу на реакт пару лет на функциях, по этому контекст понимаю по верхам, ибо в реакт такого крайне мало.
Плюс еще пару раз на собесах ловили на этом, по этому надо подтянуть 😅😀.
Надеюсь было полезно.
Блин, очень классно объясняете, чего раньше не подписался
Очередной толковый видос. Спасибо. Было зашибись еще посм видео про Promise - практическое применение, а то я как начинающий не представляю и не видел где его кроме работы с fetch можно использовать
NODE JS - там ВЕЗДЕ, так как нода асинхронна
Классно, очень понравилось!
наконец-то до мня начинает доходить суть концепций этих фукций, что ими можно менять то, что я вляется this'ом в вызываемой фунции ))
никогда раньше сам этими функциями не пользовался, т.к. не до конца понимал их концепцию, теперь буду пробовать, осталось только найти подходящий момент, где это использование будет действительно оправдано, а не за уши притянуто )
заимствование методов - отличный приём! подумаю где применить
когда видел раньше карирование думал, что это замыкания ))) если это как-то связано, то нужно это как-то разделять, где замыкания, а где карирование
есть что-то про замыкания? в Вашем исполнении
bind произносится как баайнд, послушайте в гуугл-переводчике )
Это прекрасно! 😍
Виктор, спасибо! 😍
Что то интуитивно примерно понял о заимствовании методов и сохранении контекста. Но все в тумане. Придется читать что то еще и возвращаться позже к этому видео. Но спасибо!
Спасибо за видео! Отличное! Очень нравится Ваш стиль подачи, Ваши пояснения. Конечно, у каждого своё, но мне прямо зашли Ваши видео! Круто! Спасибо большое! Начала заниматься программированием с прошлого года, но только недавно мне показал поисковик Ваш канал. А так бы раньше начала просмотр. У Вас крутой канал, но не сразу поисковик его предлагает в качестве обучения программированию. Но те кто ищут найдут рано или поздно, главное продолжайте, пожалуйста!🙌
Спасибо за комментарии и тёплые слова! Я рада, что контент заходит! 😌
класс
Здравствуйте ! Хотелось бы увидеть в ваших видео разбор про Замыкание ^_^
Спасибо за видео! Здорово, что примеры нетривиальные и привязаны к реальному опыту. Попутно думаешь и разбираешься, а не просто переписываешь код :)
25:44 Можно было использовать что-то подобное:
function sum(a, b, c) {
console.log(this);
return `${this.desc}: ${a + b + c}`;
}
const sumInfo = {
desc: 'Your result',
};
/*
Возвращаем функцию с заданным контекстом с помощью bind()
и присваиваем sum новое значение с полученной функцией
*/
sum = sum.bind(sumInfo);
console.log( sum(1,2,3,4) );
Правильно ведь понимаю?
Лайк..!
Спасибо! 😊
Лена! Молодец! Не надо Владилена, у него слабые уроки. Все ок, просто мне кажется что тебе надо помечать что видео не для новичков например :) Потому что видно что у тебя большой опыт практики и реальных задач, и затрагивается очень много попутных понятий, в частности самый большой камень преткновения в этой теме для новичков будет контекст (this), так как все эти функции привязывающие контекст невозможно объяснять не понимая что такое this. А это довольно сложная тема, она сразу не залетает, она улечься должна от пары недель до пары-тройки месяцев точно. Например, понять почему в колбэке для события click теряется контекст для новичка мне кажется вообще нереально, а ты это не разбираешь, просто говоришь что он теряется и все. Понятно, что разбирать все, это ты прямой эфир можешь запускать, кофеек наливать на недельку и не выключать камеру просто, но все же нужна какая-то последовательность(если ты ставишь цель кого-то чему-то научить, а не просто поделиться какими-то фишками). Я, кстати, для себя остановился в итоге вот на этой статье dmitripavlutin.com/gentle-explanation-of-this-in-javascript/ от Дмитрия Павлютина. Она хорошо разбирает как мне кажется все кейсы и подводные камни передачи контекста, это наиболее полное руководство что я нашел после месяцев мытарств :) В общем, спасибо в любом случае, много интересного. И теперь вопрос: почему ты говоришь что мы не можем стрелочной функцией ChangeSlide сделать? Что нам мешает? Зачем нам Babel для этого? Спасибо!
СПАСИБО! Прямо глоток свежего воздуха, рада поддержке! 😍 Про this, согласна не самая простая тема. Спасибо за дополнения и рекомендации! Про стрелочную функцию в колбеках событий, проверила chrome, safari - работают. Когда в начале года писала эти колбеки ещё не поддерживалось и не работали в том же хроме. Я так понимаю сейчас уже июньский стандарт 2021 www.ecma-international.org/publications-and-standards/standards/ecma-262/. Надо значит проверить. А вы давно уже можете их легко использовать без babel?
@@webelart Ну я JS изучаю уже чуть больше года, и честно говоря с самого первого дня как-то засела в голову мысль из многочисленных уроков и tutorial (по документации стандарта ECMA, как ты понимаешь, новички не учат, иначе процент освоивших язык стремилось бы к нулю ;) что стрелочные функции контекст свой не содержат, и вроде везде где смотрел был всегда на выбор либо bind либо стрелка...🤷♂️
@@dirtyhandz по документации и я не учу js 😂 Мне сложно усваивать информацию напичканную фактами на каждой строке, я люблю предистории, живой язык. Про стрелочные функции, да всё верно они берут контекст из внешнего окружения. Здесь немного другое, стрелочная функция в классе, раньше такое не поддерживалось. Но поддерживалось с помощью Babel. Короче надо поуточнять, когда это решили добавить.
@@webelart То есть ты имеешь ввиду что раньше метод у класса в виде стрелочной функции не работал?... Немного погуглил, не могу найти, может не так ищу?... 🤔
Говорить что у Владилена - слабые уроки, ну это наверно глуповато, нет? На его уроках в том числе новички на работы устраивались, и знания получали какие-то, поэтому его контент оправдан. Если говорить про девушку из данного ролика, то просмотрев несколько роликов, я понимаю что она объясняет не для новичков, ибо у нее зачастую сразу летят примеры из жизни, или около того. Чтобы ролики стали короче и информативнее, это нужно убрать 90% лишних разговоров, начинать сразу с азов, и потом добавлять примеры из жизни, и делать это все согласно какому-то плану.
Спасибо! очень нравятся видосики ) , а с this будет ? ) очень нужно )
Спасибо! Про this пока не знаю, здесь нужно хорошо по всему пройтись и составить материал. Т.к. это одно из базовых понятий и во многих вещах используется и просачивается. Услышала, что это нужно. ❤️
Сейчас будет немного вредный комментарий, но все же вставлю свои пять копеек) Пол года назад решил разобраться с методами функций, перечитал пару статеек - ничего не понял. Посмотрел достаточно много видосов с ютуба и в том числе на платной образовательной платформе - тот же результат. Наткнулся на видео Владилена - все понял) Ну не возможно лучше объяснить эту тему новичку нежели как сделал это он. Хорошо, я все понял, сделал себе выписки и в итоге что? Да ничего) за пол года нигде этот метод не пригодился, хотя практики было много. Разве что при создании хука для редакса и то скомуниздил код и там возвращалась bind функция... до конца что тут происходит я так и не смог понять, так как забыл без практики метод bind (помню что контекст вызова, пример с событием клик, this довольно хорошо понимаю). Отложил этот вопрос и вот перед собеседованием решил освежить память. Решил посмотреть у вас, и как бы все понятно, но примеры чуток не удачные. Смотрел на 2х и вот на шаге где имплементируется класс прям пришлось остановить, перемотать чуток назад... поймал себя на мысли, что кажись я не правильное представление имею, возможно забыл или что-то не правильно понял. Ожидал без особых напрягов просто освежить память, а в итоге потерялся и возникли вопросы вроде: "не понял, как? А вот же как. А зачем? А понятно зачем. А на практике где это будет полезно?". Сделал вывод, в идеале нужно 1. понять что такое this, отработать его на классах - действительно та еще задача. По видео и статьям все понятно, легко... а когда дело доходит до практики, не получается применить. В общем тут действительно надо помучиться; 2. посмотреть объяснение от Владлена; 3. дополнить понимание с помощи вашего видео. Оно правда интересное и занимательное, но не простое для понимания. Вы молодец) Но возможно у вас как-то появится желание раскрыть эту тему на каком-то гипотетически реальном боевом проекте.
Я часть с "одадживанием метода" вообще не понял :p Мне надо в это вникать если я адепт typescript и учу автотесты ?
В какой компании работаете?
Открыл для себя ваш канал, сегодня, стилистически подача класс, но объяснение немножко затянуто, от этого можно запутаться, многие блогеры по типу Владилена и др. Пересказывают темы с сайта learn.js начинают с определений это 20% видео и переходят сразу к примерам 80% видео, т.к. Мозг проще запоминает информацию из примеров. По этому их видео проще для понимания обычного обывателя. На вас приятно смотреть, в данном видеоролике, суть темы вы раскрываете слишком длинно, хотя тут всего 3 метода, хотелось бы увидеть на вашем канале, более короткие видео, в которых компонуются примеры и от этого проще раскрывается суть темы. :)
Спасибо за обратную связь, про подачу поняла, буду работать! ❤️
У меня есть вопрос с примерами. Видео в целом построено на примерах, т.е. теории практически нет. Какие именно нужны примеры?
@@webelart, заранее извиняюсь если оскорбил вас сравнением, лично я знаю эти методы, мне было интересно посмотреть на подачу и ваше объяснение с примерами, как по мне, тема не такая сложная и по моему скромному мнению, видео затянуто а новичков пугают длинные видео, они хотят коротко и быстро с лёгкими примерами, т.к. Обычно гуглят видео те кто не смог понять тему из учебника. Возможно я ошибаюсь и это у вас такой стиль объяснения. :)
@@ricojohn8249 Тема call, apply, bind уже полагает, что человек её ищущий не совсем новичок. В текущем видео я раскрыла всё, что считала нужным и важным. И с чем у меня в своё время были проблемы в понимании: заимствование методов, передача колбеков в событийных функциях и в хелперах.
Тема возможно не сложная, но есть много нюансов, которые используются в современном фронтенде.
меня больше всего интересует как подсчитать количество твоих зубов в цикле, откуда стартовать и где заканчивать?
Хаха, у меня их 32. Даже все зубы мудрости выразил и сохранились 😁
А теперь можете успокоить эмоцию и разобрать методы call apply и bind 😘
Прости Елена, но посмотрев видео 24 минуты, понял что мне трудно понять что к чему. Пошел посмотрел видео от Владилена Минина о этих методах и сразу разобрался. У тебя классные ролики, но это объяснение лично для меня сложное.
Спасибо за отклик! 24 минута, где я начала рассказывать про curry 🤔, в целом это уже не самая простая обёртка. Наверно надо как-то порционно.
Можете ещё пояснить с какой минуты пошла потеря? Если расскажете, что у Владилена лучше разобрано или в целом впечатление, буду очень благодарна!
@@webelartНадо еще понимать, для человека с каким уровнем знаний это видео. Владилен рассказывает так, чтобы было понятно даже новичку. Если он использует какую-то вещь, типо контекст или обратные кавычки вкратце рассказывает и показывает что и для чего это. В вашем видео "поплыл" после метода reduce. Считаю если видео про call, apply, bind то другие методы использовать не нужно. Еще вы не уточнили, что call вызывает сразу функцию и принимает бесконечное кол-во параметров, метод apply вызывает сразу функцию, но принимает только контекст и массив. А bind не вызывает функцию, но возвращает новую, которую можно сохранить в переменную. Про bind я слышал это, а вот про колл и эплай нет или пропустил. И в конце видео услышал слово Traspaller но вы не объяснили что это.
@@nepcz Эээ, всмысле не сказала, что call вызывает функцию и аргументы: минута 2:46, я про это рассказала! И я про это упомянула несколько раз. Про apply несколько раз повторила, что тоже самое что и call, только аргументы передаются в массиве.
Про bind присвоила переменной, 24 минута, про это всё рассказала. Что он не вызывает функцию, вы кстати как раз и не досмотрели.
Также я очень хотела показать все возможности этих методов. У Владилена вы узнали, что через эти методы можно вызывать методы массивов? Или как в классах подменять контекст или как в хелперах использовать и почему контекст важен? Не уверена, что такие штуки покрывают вообще, а это тоже важно и я это выделила.
Далее если покрывать каждое слово, то это сложно всё-таки. Видео выйдет на 10 часов, пока я объясню каждую кавычку. Понятие новичка тоже очень размытое, ведь новичок по факту и не знает, что такое переменная, как работает присвоение, что такое const, let и прочее. Что такое цикл и в конечном итоге, что такое функция вообще.
Обратную связь я ценю, но не нужно с ней нападать! У меня классные видео и это видео тоже классное. Каждый человек может покрыть по разному немного тему, тем самым открыв какие-то новые вещи. Это не плохо, это ХОРОШО!
@@webelart прошу прощения если мой ответ выглядит так, как будто я говорю что у Владилена хорошее видео а у вас плохое. Я просто пытался показать разницу, почему там я понял, а здесь нет.
@@nepcz ❤️ Спасибо, что извинились! Действительно так показалось. Не люблю, когда меня сравнивают с кем-то и приводят в пример. Как в детстве тебе родитель говорит, смотри, а у той девочки ноги лучше, чем у тебя. А вот ты НЕ такая. Учитывая, какой космос могу на том же JS творить. Просто по человечески не приятно получается.
В общем и у меня ноги хорошие и у Владилена. А на своих я ещё и марафоны бегала и не только по JavaScript. 😉 Поэтому с конструктивной критикой, не через претензию, помягче. Я всё-таки очень стараюсь над каждым видео и учитывая, что ничего с ютуба не получаю, то только это уже должно заслуживать уважение.
Ваши комментарии услышала, подумаю как сделать подоступнее такого рода видео. 😘
один фиг так и не понял, для чего appy, call, bind