Замыкания в JavaScript | Юрий Федоренко

Замыкания - одна из самых мощных особенностей JavaScript, без них ни туда, ни сюда.
Это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание даёт вам доступ к Scope внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время её создания.
Про то что такое Замыкание в Джаваскрипте, рассказывает Senior Software Developer Юрий Федоренко.
Подписывайтесь на телеграм-канал t.me/callforward
Компьютерная Школа Hillel
site: ithillel.ua
fb: / hillel.it.school
in: / hillel_itschool
tw: / hillel_itschool
ln: / hillel_itschool
yt: / hillelitschool
#javascript #frontend #js #замыкания #прототипы

[@liveinenduro2647]

так объяснял что сам понял - тру стори

[@anastasiazaytseva6922]

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

[@wayfarerofuntroddenpaths7571]

Спасибо Юра за твои хоть и не большие, но все таки понятные изложения. Ждем-с новые твои выпуски по JS.

[@vladyslavanakonechna7693]

Это гениальное объяснение замыканий! И правда легонько и не навячиво. Спасибо!

[@user-gz3hk1pv1p]

уже дня 3 пытаюсь разобраться в этой теме, что зачем и как, а тут посмотрел данное видео, и за 15 мин понял что оно такое)) спасибо автору!) лайк однозначно!)

[@DmitriyVereschagin]

Классический случай.

[@MrCter]

Юра, продолжайте, умоляю ))

[@Bunny_Love]

Мне пришлось несколько раз внимательно прослушать - но в итоге я все поняла! Огромное спасибо!

[@Dozortsev]

Юра, ты крут! Спасибо за видео

[@dmitrijponkin]

Круто! Спасибо за Ваш труд))

[@user-zd2zm7zv9d]

Спасибо Родной!!!! Ты лучший:))))

[@Sefian]

Спасибо, все гораздо проще чем мне казалось. Главное что помогли поменять, так это способы применения.

[@HillelITSchool]

Раді, що були корисні 💙

[@coltesun457]

Спасибо! Очень доступно объяснил)

[@user-vk6wk8bs5m]

Очень хорошее видео! Благодарю)

[@user-uv5qy3lq3i]

Просто супер, спасибо большое)

[@dalaysalchak5073]

Толково объяснил. Спасибо!

[@akkelaforest779]

Спасибо, очень доступно обьяснили)

[@SergeSchekhovtsov]

Великолепное объяснение. Закрыл пробелы и всё понял с первого раза.

[@disposables72]

Подпишусь, может побольше будет таких мини-ликбезов. Перед сном самое то)))

[@user-nm5hc6jw9f]

Редко пишу комментарии, но за такое хорошее видео, грех не написать!) Спасибо вам.

[@aktotuttttt]

И заслуживает лайка бро. Как же круто рассказал. Поклон, низкий, бью челом

[@user-yv3gg4um2i]

Спасибо большое !! Есть просьба сделать серию уроков ES6-7

[@oleksiipetrenko3824]

Юра, где же видео про асинхронность?

[@user-kl4yk8tm2b]

Я уже раз 10 посмотрел видео про this и прототипы - обожаю его. И вот подъехал потенциальный новый фаворит.)

[@fonharry9086]

Это какое?

[@user-kl4yk8tm2b]

kzbin.info/www/bejne/ZqfWZ4qhg96tm8U&list=LLeXZ31bUXjUlXgMibPcrkCw&index=18

[@fonharry9086]

благодарю

[@AlexeyTo]

Очень просто и понятно объясняется, отличное видео!

[@user-et4vi6ei4z]

Рок

[@jenyaspace]

а теперь точно также но про промисы

[@40par]

Спасибо, только теперь разобрался

[@vitalikgorohkov1896]

На этом видео понял тему! спасибо за помощь

[@HillelITSchool]

Рады, что были полезны )

[@user-re7hx3sq2c]

Можно этот пример переписать в одну строку const Counter = (count = 0) => () => ++count, но тогда не так понятно конечно, без привычки.

[@yuriiserdiuk3918]

Дякую за відео , все сподобалось ))

[@serggey75]

вот только теперь я понял замыкания) спасибо)

[@HillelITSchool]

Раді, що стали в нагоді!

[@YaroslavEx]

дякую, реально допомогло!

[@HillelITSchool]

Раді, що були корисні!

[@user-tk7qv9rv2c]

Вроде и до этого понятно было, но как послушала, поняла, что только сейчас и поняла))))😁

[@XanjaevRodmam]

Бро. Спасибо Бро. Ты настроящий Бро, Бро

[@mariapokrasa2966]

Лайк не глядя 🤣 Лучший учитель 👍👍👍👍

[@artemshulga7316]

Спасибо. Прочел в книге Выразительный js о замыканиях но не понял, а здесь все очень понятно.

[@faizulla5838]

почитай снова, здесь он путает.... один палец с другим.

[@user-lx5vv3uu8u]

Спасибо!

[@grimkasad4183]

Фантастика, нарешті)

[@djoniKage]

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

[@whatifiwant]

2020((( а мы ещё ждём!)))

[@Hannah-ly6ff]

спасибо!!

[@dmitryparshin4204]

какой же милый лектор

[@user-lr8vd1cw9s]

Пример с счетчиком очень полезный

[@alexbliznec]

2019 на дворе, а видео про асинхронность так нет(((

[@CozyAvocados]

2020 и тоже нет(

[@St3rnhunt3r]

@@CozyAvocados и в 2021 не будет(

[@user-lx5vv3uu8u]

Уже 2 января 2021! Ишо нЭт! )))

[@PacoOfficial]

супер

[@vladvoloshenko5701]

спасибо)

[@aleksandrpolevyk9572]

Объясняешь просто супер. Музыку приложите в описание.

[@alenache1]

кстати, для замыкания не обязательно возвращать одну функцию из другой, можно положить ее в память любым способом, например, связать ее со слушателем событий

[@saidvalc2177]

мне не перезвонили

[@user-yl3vj9ms3c]

Лексическое окружение функции это не контекст того, где она объявлена. Согласно спецификации, лексическое окружение функции создается во время выполнения этой функции, а замыкание образовывается в момент создания объекта функции, при чём если создавать объект функции с помощью синтаксиса new Function, он будет ссылаться на глобальное лексическое окружение. Для создания изолированной переменной не обязательно возвращать функцию, это можно сделать так: var counter; function makeCounter() { var сount = 0; counter = function() { return ++сount; } } makeCounter(); counter(); //вернёт 1 counter(); //вернёт 2 или так: { let count = 0; function counter() { return ++count; } } counter(); //вернёт 1 counter(); //вернёт 2

[@yurafedorenko1218]

да, все так, там имелось ввиду внешнее лексическое окружение, вообще эти термины часто путают, я даже делал вот тут разбор - kzbin.info/www/bejne/fqS7fJyBg8mYiqs (ссылка с тайм-меткой) но это видео было бы сильно перегруженным если бы прямо в нем это разобрать(

[@user-yl3vj9ms3c]

@@yurafedorenko1218 Интересное видео, хотя говоря про способы вызова функций в контексте this, Вы не упомянули о стрелочных функциях, но это не столь существенно. Хотя выходит, что this зависит не только от способа вызова функции но и от ее типа. Относительно нынешнего видео, мне кажется, что прежде всего надо говорить о том, что в среде разработчиков JS существуют три определения термина "замыкание". Первое, самое верное, которое соответствует определению для всех языков программирования - замыкание это сочетание функции и её внешнего лексического окружения. Второе - это сочетание функции и свободных переменных, которые она использует. Третье - это сочетание функции и изолированных переменных, которые она использует, при чем функция может использовать изолированные переменные из нескольких лексических окружений. Иногда замыканием называют только одну из составляющих определения, то есть или саму функцию, или сами переменные или лексическое окружение.

[@user-yl3vj9ms3c]

Что касается первого определения, еще существует немного другая версия - замыкание это сочетание функции и её родительского лексического окружения, то есть того, в котором она была определена, но тут появляется проблема в случае синтаксиса new Function. К тому же коректнее говорить о лексическом окружении кода, в котором она была определена.

[@user-yl3vj9ms3c]

Теоретически второе определение тоже соответсвует определению замыкания для всех языков программирования. Можно сказать, что первое более абстрактное и основанное на спецификации, а второе более простое и основанное на практике, при чём они отличаются друг от друга, ведь свободные переменные могут находиться не только во внешнем лексическом окружении.

[@user-yl3vj9ms3c]

Я еще раз проверил разные определения этого термина, относительно других языков и в целом. Получается, что второе определение, то есть "сочетание функции и свободных переменных, которые она использует" и есть самым правильным. Возвращаясь к видео, то что Вы имели в виду это конечно хорошо знать, но Вы ведь сказали другое, значит ошиблись, то есть вводите людей в заблуждение. Надо бы это исправить, а то получается как-то нехорошо. Тут вот еще одно видео live.ithillel.ua/javascript-funkcii-oblasti-vidimosti-zamykanie от вашей школы с другой версией определения, насколько я понял основанной на том, что показывает браузер.

[@ssurrokk]

🔥

[@andreyzinovjev3920]

Бен Аффлек в JS))

[@yaroslavzef7267]

Юра, а как там дела с асинхронностью обстоят?

[@santiagozarpado1145]

замыкания - интересная и иногда полезная техника, но никак не необходимая без них и туда и сюда

[@divocean4085]

Я вот чего не понял только. Мы вызываем ту анонимную функцию, которая возвращает увеличенное значение переменной count, которое хранится в "родительской функции" Counter. Тут всё понятно, но! Допустим, мы отдельно вызовем родительскую функцию Counter, которая по идее должна обнулить переменную count (и она делает это, что показывается при дебаге), но дальнейшие вызовы анонимной функции через count() показывают, что переменная не обнулялась. Как так происходит? Новый вызов родительской Counter() создаёт новую область видимости с новой переменной, в то время как counter продолжает работать в старой со своей переменной, так получается? console.log(counter()); // 1 console.log(counter()); // 2 Counter(); console.log(counter()); // 3 console.log(counter()); // 4

[@yurafedorenko1218]

ее вызов ничего не обнуляет, ее вызов создает новую область видимости в вашем коде результат вызова Counter(); никуда не сохраняется и порожденный новый счетчик как бы теряется) я это объясняю на 4:52

[@user-zd6tt5by9z]

@@yurafedorenko1218 повторил код на 4:10 и возвращает не цифры, а тело родительской функции. Почему так?

[@yurafedorenko1218]

@@user-zd6tt5by9z ну он возращает функцию, а вот когда ее вызывать, то будут числа

[@user-zd6tt5by9z]

@@yurafedorenko1218 а как ее правильно вызвать?

[@yurafedorenko1218]

@@user-zd6tt5by9z ну типа: var firstCounter = Counter(); var secondCounter = Counter(); console.log( firstCounter() ); // 1 console.log( firstCounter() ); // 2 console.log( firstCounter() ); // 3 console.log( secondCounter() ); // 1 console.log( secondCounter() ); // 2 console.log( firstCounter() ); // 4

[@jorgen5462]

Юра, тему промисов бы поднять) Еще requestAnimationFrame.

[@alenache1]

я бы сказал так: "Замыкание - это снэпшот всех доступных fункции переменных в момент ее создания"

[@user-eu5jy2hc4u]

👍

[@user-ee1xf7qm5d]

господи, я не дабстеп слушать сюда зашел (звук на колонках), подубавьте басы

[@user-zk5ok6wn2l]

привет! выпусти урок по асинхронности пожалуйста! Ты же обещал!

[@yurafedorenko1218]

я не обещал когда оно будет, но в этом году точно)

[@unknown6535]

Можно сказать, что функция counter - это фабрика счётчиков, только порождает эта фабрика функции

[@miloman1995s]

Вот функция в функции сложнее даётся , че то видимо надо пересматривать

[@MegaPupizoid]

Что-то недогнал. Разные счетчики при вызове новой функции пытаются получить разные данные из одни и тех же переменных 🤔?

[@nursultanmuhambetov8427]

var же делает переменую глобальной?

[@slavkapiyavka]

да, но если переменная объявленная при помощи var лежит в функции (проще говоря, в блоке кода {}), то у этой переменной область видимости становится блочной, функциональной). а вообще используйте const :)

[@H1roHamada]

Можно ли сказать, что замыкание это функция внутри функции. Как я понял это один из вариантов ответа на вопрос: "Что такое замыкание?"

[@kostyafrompiter]

Я бы на собесе ответил так : замыкание - это вызов функции с помощью другой функции)))))

[@kirillpodolinniy309]

На дворе уже 20-й, а про асинхронность ни слова..)

[@bladerunnerz12]

Или так: const makeCounter = () => { let count = 0; const foo = () => count++; return foo; }; let counter = makeCounter(); let anothercounter = makeCounter(); console.log(counter()); // 0 console.log(counter()); // 1 console.log(counter()); // 2 console.log(anothercounter()); // 0

[@azuresnake6301]

Никто так и не написал, что у вас в комментариях ошибка. При первом вызове она выдаст 0, а не 1. Потому что в коде используется не ++counter, a counter++

[@victor-zz6xn]

короче говоря, в джава скрипт замыкание это как в питоне локальные перемённые.

[@jorgenUA]

посмотрел время видео - захотел диз влепить, но решил глянуть...нормально объяснил, лаконично. Функцию стрелкА, конечно не трогал, но все гглавные аспекты объяснены. Спасибо.

[@TinTaBraSS777]

что нельзя просто сказать что переменная а читаема функцией но не изменяема а переменная б читаема и изменяема функцией но не видима другими функциями и програмой !?

[@3bbiani]

Несколько часов пытаюсь понять эту тему, почему в теме о замыкании на общеизвестном сайте learn.javascript.ru в примере со счетчиками нигде не объясняется, почему счетчик в случае замыкания увеличивается. Решил посмотреть видео, чтобы услышать альтернативное видение. Как результат: в данном видео тупо рассказывают сокращенную версию статьи вышеуказанного сайта, код совпадает до мельчайших подробностей, прям выдран с сайта. При этом никто даже не пытается объяснить, почему увеличивается счетчик. Так не делается. Тема не раскрыта, дизлайк.

[@user-ei9bm8fq4u]

У меня наоборот. Читал на лерн.джавасрипт.ру и ничего не понял (или только частично) а вот это видео внесло полную ясность.

[@3bbiani]

@@user-ei9bm8fq4u это конечно хорошо) так почему же увеличивается счётчик, расскажи нам всем) я например уже понял, и конечно отпишусь, если непонятно кому-то)

[@3bbiani]

@Alex Reyder задайте конкретный вопрос, иначе мне не ясно, что вам непонятно

[@3bbiani]

@Alex Reyder Замыкание в моем понимании - это явление, сущность, проявляющаяся, когда функция (назовем её «внешней») возвращает в качестве значения другую функцию («внутреннюю»). В таком случая внутренняя имеет доступ к внешней по области видимости, даже после того, как внешняя прекратилась. Это говорит о том, что замыкание может запоминать и получать доступ к чтению и изменению переменных и аргументов своей внешней функции, даже после того, как та прекратит выполнение. Если на пальцах, почему увеличивается счетчик: в момент вызова (исполнения) функции Counter создается объект Lexical Environment и возвращается внутренняя функция, которая записывается в переменную counter. В этой внутренней функции есть скрытое свойство [[Scope]], которое указывает на этот объект LE внешней функции. Т.к. мы эту переменную можем использовать в любой момент, сборщик мусора не удаляет LE внешней функции. При этом доступ к этому объекту остается только у внутренней функции. Мы можем читать и изменять переменные в этом объекте, что мы и делаем. При этом, учитывая, что это объект, при чтении мы всегда будем получать текущее значение. Вот и всё)

[@youxxxgun9001]

Ты, блять, слепой? После переменной стоит ++ т.е увеличивается на 1.

[@user-xz1nb2ks1h]

ааааа

[@dimitriy1861]

Да ни хрена не понятно....

[@WikSlayer]

Ну зачем делать ещё одно стандартное видео по данной теме, которое повторяет информацию десятков других источников. Ничего нового. Почему бы не рассказать зачем именно нужны замыкания? Нет, не то, что было показано в видео, а действительно зачем они нужны, в первичной их сути. Почему ни слова о фунарг проблеме? Такое чувство, что автор хапнул базовых знаний и так и остался на этом видении картины замыканий. И видео лишь для галочки на канале. Буду рад ответу и объяснению, почему видео не касается этих вопросов. Если ответа не последует, тогда будет ясно, что вы не особо хорошо относитесь к своей аудитории, игнорируя подобные вопросы.

[@yurafedorenko1218]

:D

[@WikSlayer]

Юрий, ну я серьезно, почему? Это не троллинг, не попытка задеть и прочее.

[@WikSlayer]

В общем, ответа не будет?

[@yurafedorenko1218]

Виктор Данилов я понимаю, что это не тролинг, но я правда не знаю что ответить( ваш вопрос это претензия к автору школьного учебника по математике, что он плохо раскрыл тему интегралов. Я признаю - плохо. Но это просто такой формат, я пытаюсь простыми словами объяснять вещи так, чтоб это было понятно без специальной подготовки. А ваши пассажи насчет моего отношения к аудитории - нелепые. Мое отношение к аудитории в том, что я делаю. И вы как человек который и сам что-то снимал для ютуба можете оценить сколько сил и ресурсов здесь вложено в продакшн. И вот на этом фоне появляется человек в комментах который пишет несколько предложений и резюмирует: если не ответите то вам на всех плевать. Не надо так.

[@WikSlayer]

Очень рад, что вы ответили. Да эти все фразы были только для того, чтобы поднять важность моего ожидания ответа. Просто предположил, что это очередной канал, в котором на комментарии не отвечают, а ответа мне очень хотелось. Извините, если что. Хорошо, условились, что это видео для начинающих. А будет ли что-то для продвинутого уровня в будущем? Просто контента для начинающих тонны просто уже. Зачем снимать то, что уже есть. Это ведь основным принципом должно быть. Просто интересно, задаётесь ли вы вопросом о том что "я только что снял то, что уже есть. Почему моё объяснение лучше, чем у других? В чём оригинальность моего видео?" И вложения сил, в первую очередь, понимаю и уважаю. Но просто если опять мусолить тему замыканий на начинающем уровне, то хотя бы сделать это.. ну как-то оригинально, что ли. Да хоть пример со счётчиком этот взять. Ну было ведь, и причём не у одного объясняющего. Поймите, я очень-очень редко оставляю комментарии, но в этот раз решил написать, чтобы просто узнать ваше мнение о вашей осознанности касательно вопроса "Зачем я создаю то, что уже есть итак? В чём ценность этого?"

[@fresonn]

Народ, за что вы лижите автору? Он не раскрыл замыкания в js, он не сказал как работают функции, почему они являются объектами и тд. Он тупо процитировал learn.javascript.ru. Они даже не удосужились привести нормальный пример. Ужас..

[@yurafedorenko1218]

Vladislav Shevlyakov это такой формат когда берется тема и я пытаюсь ее объяснить по-простому, вот и всё

[@fresonn]

Yura Fedoreko, ну да, а потом приходят «по-простому» такие на роботу, а там их ...

[@yurafedorenko1218]

ну по такой логике js нужно начинать учить с ассемблера, я как бы не против, но моя позиция такая: лучше разобраться в чем-то по книжке "для чайников" чем прочитать кнута и ничего не понять

[@fresonn]

Лучше научится водить в gta, чем идти в автошколу и ничего не понять! И книги Кнута не совсем тут уместны 🙃

[@funnyepictrailers4107]

Привет, не мог бы подсказать с чего начать новичку, что бы поглубже вникнуть в работу javascript и его ньюансы... Сам сейчас прохожу гайд от MDN, а после планирую почитать Фленегана

[@vkgorodok]

Слабенькое объяснение. Почти 7 минут бреда.. Кто хочет понять замыкание смотрите - kzbin.info/www/bejne/ppLLgGiOn9OZgqM