Уроки Javascript #4. Что такое замыкания в JS (простыми словами + 3 примера)

Мой Telegram: t.me/stackdevru
В этом видео мы разберемся, что такое замыкания (Closures) в JavaScript и как они работают. Рассмотрим 3 примера использования замыканий.
Замыкания это одна из фундаментальных концепций JavaScript, которая сбивает с толку многих начинающих разработчиков JS.
Замыкание это функция у которой есть доступ к своей внешней функции по области видимости, даже после того, как внешняя функция прекратилась.
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

[@kirill-petrov]

Я не встречал ещё более доступного и короткого объяснения

[@stackdev]

Спасибо!

[@user-je7lw5ey9n]

Это магия! 12 минут меня отделяло от того, чтобы непонятное заклинание в начале видео, стало абсолютно понятным и логичным в конце

[@SergioDev001]

На втором примере стало понятно 50 на 50. И тут Василий выкатывает 3-ий пример, после которого, у меня все встает на свои места. Спасибо!

[@stackdev]

:) Спасибо!

[@flashback8504]

Благодаря этому видео реально понял замыкания! Большое Спасибо!!!

[@stackdev]

Рад что вам было полезно:)

[@azamatmyktybekov6194]

СПС ОГРОМНОЕ я час не мог понять что такое замыкание и вдруг наткнулся на ваше видео и за 12 мин понял

[@stackdev]

Спасибо)

[@munarcymbatov181]

Очень понятно и интересно и ещё ждём от вас REDUX👍👍👍

[@mar_kha]

Спасибо вам большое! 🤗 Сегодня был экзамен "Программирование на JS", и в качестве доп вопроса спросили "Что знаешь про замыкание?" Ответила то, что сегодня утром, пока ехала в автобусе, просмотрела Поставили "5")

[@stackdev]

Круто) поздравляю

[@user-zb1sg8ov3h]

Предполагаю, что если писать по старокрестьянски с использованием ООП - то будет примерно вот так: class Player { score = 0 countScore() { return this.score++ } } const pl1 = new Player() const pl2 = new Player() ///И в консоли const pl1 = new Player() const pl2 = new Player() pl1.countScore() // ->0 pl1.countScore() // ->1 pl1.countScore() // ->2 pl2.countScore() // ->0 pl2.countScore() // ->1 pl2.countScore() // ->2 Что примерно является эквивалентом последнего примера.

[@user-mb7kp1bl4w]

Автору большое спасибо за труд! Очень доступно

[@Andrei-nr2oi]

Спасибо. Максимум полезной информации!

[@user-cd1sr5sx2r]

Спасибо! Хорошие примеры для объяснения замыкания.

[@AlexanderShinigami]

Круто! Спасибо большое! Чем больше учу язык тем больше понимаю важность хороших, понятных и разных примеров

[@stackdev]

Спасибо!

[@sergdonskikh2140]

Вы замечательно все рассказываете , побольше таких уроков !

[@stackdev]

Спасибо!

[@elenasmirnova3549]

спасибо, Вася!

[@Lok1goD]

Спасибо! Очень понятные примеры и объяснение на высоте, продолжай!

[@stackdev]

Спасибо!

[@kinomir20]

Отличные уроки, спасибо!

[@Albert_Hall]

Очень приятная подача и хорошие примеры! Благодарю!

[@stackdev]

Спасибо!

[@petelazari7994]

prikolinii i svejii content, vsem budu recomandavati!!

[@stackdev]

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

[@voodooshtv7883]

Понятное видео, спасибо

[@user-km8kb3xj1p]

Хорошее, информативное видео! Спасибо за урок!

[@stackdev]

Спасибо!

[@secondnamefifthname]

Самое прекрасное объяснение, спасибо!

[@stackdev]

Спасибо!

[@yaropolkvass6131]

Господи спасибо Вам огромное за такое обьяснение. Ломал голову а тут всё настолько понятно!!! Лайк подписка!!!

[@stackdev]

Спасибо!

[@yuryarakelove5322]

Великолепное объяснение замыкания

[@stackdev]

Спасибо!

[@mountainprogrammer]

Пожалуй, Лучшее объяснение!

[@stackdev]

Спасибо!

[@syuzannanasukhova5777]

Большое спасибо за такое грамотное разъяснение!!!)

[@stackdev]

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

[@javascript7676]

Отличное объяснение! Василий)

[@stackdev]

Спасибо!

[@Abubaxi]

очень хорошее видео!!!! спасибо большое

[@user-ch9qk3ee5n]

спасибо, Василий)

[@manofsteppe179]

Рахмет! Вы умеете объяснять сложные вещи простыми примерами. Для основы самое то, очень лаконично и взаимосвязано, не то что у других авторов даже платных курсов, коих у меня много, создают переменные от балды, во время исполнения пропадает некая логическая связка вместе с этим и желание дальше смотреть. Как же все это парадоксально. Все жду момента когда вы выпустите полноценный буткемп по js, неее неее 2-х часов мало))

[@stackdev]

Спасибо! как раз работаю над этим:)

[@erzhan225]

Спасибо, очень понятным языком всё описано.

[@stackdev]

Спасибо!

[@DerAleksey]

ух как незаметно пролетел урок

[@razvalnuy]

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

[@stackdev]

Спасибо!

[@user-dq7jd3yd4s]

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

[@stackdev]

Спасибо!

[@therelaxingsound6903]

Спасибо!!! 🤩

[@crossmaxish]

спасибо, всё шикарно 👍

[@stackdev]

Спасибо!

[@perchinina]

Спасибо Вам огромное за объяснение, на 0-ой минуте первый раз слышала слово "замыкание", к 8-ой могла объяснить, что это такое😌

[@stackdev]

Спасибо!

[@Syberby]

завтра без реального применения, забудешь)

[@kirillguryanov4925]

Спасибо, очень понятно

[@stackdev]

Спасибо!

[@Maria-sm2qi]

"Замыкание - это возможность функции, которая находится внутри др функции, получать доступ к переменным, которые в области видимости родительской функции, даже после того, как родительская функция прекратила своё выполнение."

[@catsapp]

Или доступ к внутренней функции из вне области видимости внешней функции. При этом внутренняя функция запоминает окружающее ее область видимости

[@andTutin]

любая функция создает замыкание.

[@user-ji6mp1jo4u]

Понятно и ясно.

[@stackdev]

Спасибо

[@minerinlove9338]

Лучший! Раза 3-4 учил, и тут прям осенило как все просто. Спасибо у Вас талант учить. Сам тренер по хоккею, не вру)!

[@stackdev]

:) Спасибо!

[@AchtungBaby-io7zl]

очень понятные примеры. Было б еще в конце реальное применение... Спасибо!

[@andTutin]

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

[@Sashad2003]

Купил урок на UDEMY и ничего не понял🤦‍♂ . Нашел ваш ролик и все стало на свои места. Спасибо!!! 😊👍

[@stackdev]

Спасибо!

[@rachonak]

Лайк, і підписка, всі відео супер. Більше прикладів,все дуже цікаво.

[@stackdev]

Спасибо!

[@vaich1738]

Спасибо

[@tazorprod.934]

Видео хорошее. Чтобы лучше тему понять, как по мне, нужно ознакомиться с таким понятием как лексическое окружение

[@user-qg9ji2nb8r]

отлично

[@stackdev]

Спасибо!

[@sergkuznetzov3469]

Хороший канал!!! Так внутренняя функция берёт не только переменную,но и аргумент внешней ?

[@stackdev]

Спасибо! Все верно. Внутренней функции доступны переменные - которые находятся в области видимости внешней функции - включая аргументы, которые мы передаем во внешнюю функцию.

[@nouchance]

👍👍👍

[@TeomunMete]

Классно

[@user-jg5iy6zs7k]

круто

[@stackdev]

Спасибо!

[@andreybalatsan9336]

Спасибо за объяснение. Остался вопрос, а playerOne это функция высшего порядка?

[@Anti-Pikaper]

Базара ноль вообще вопросов не осталось

[@novichok3417]

12:43 мы получили доступ не только к переменой score, но и к аргументу name . Вопрос меняется ли значение score во внешней функции или только во внутренней?

[@catsapp]

Вопрос. Когда *_внутренняя функция_* запоминает свое { лексическое окружение }, она запоминает все окружение или только те переменные которые использует?

[@petrplotnikov4307]

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

[@user-vk6wk8bs5m]

Почему-то у меня на 3 минуте, когда вызываю функцию external(); она перечеркивается и пишется, что устарела. Код такой же, проверил. Не подскажите где искать причину?

[@user-vk6wk8bs5m]

нашел причину, когда переименовал функцию. Зарезервировано слово что-ли?

[@RefuelTheRocket]

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

[@nade3282]

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

[@slavkapiyavka]

Не понимаю, каким образом аргумент из функции addressGrazdanin (имя) встаёт на место параметра в анонимной функции?

[@karoche-tv]

Потому что когда вызов createAdress(address==type) возвращает внутри себя анонимную функцию которая возвращает address и name. И это анонимная функция записывается в переменную adressGrazhdanin. И эта переменная становится функцией и хранит в себе функцию createAdress() и Антон функцию и если вызвать её возвращает address и name. Ну типа adressGrazhdanin = function(name) { return address и name } Если просто вызвать функцию createAdress("Гражданин") то нечего не произойдёт потому что он возвращает анонимную функцию. А у анонимная не работает без имени. Поэтому как бы присваиваем в переменную чтобы использовать эту функцию.

[@evand.349]

При каждом запуске playerOne или playerTwo, начиная с первого запуска, должна создаваться переменная score и обнуляться согласно let score = 0; и, т.о. счётчик должен показывать всё время 1. В чём тут дело не пойму? И где мы обращаемся к внутренней функции? Мы всё время обращаемся к внешней функции createPlayer.

[@stackdev]

Создайте (или скопируйте) репозитоий проекта, посмотрите логи, поиграйте логикой - и все станет понятно!

[@andTutin]

createPlayer вызывается один раз и возвращает функцию в переменную playerOne. Другую, не createPlayer. В нашем случае это scoreCount. Поэтому вызывая playerOne, ты по сути вызываешь scoreCount (а там никакого обнуления нет, только увеличение на 1)

[@user-tc6pi1nc2r]

like

[@stackdev]

Спасибо!

[@user-eh7no3me3x]

некуя не понятно, but очень интересно

[@MrGeorgeMS]

Механизм понял, но полезного применения замыкания не вижу (((

[@user-qj2yg1rn3j]

Благодарю, но определение я не запомню

[@realmanproject7529]

а почему пеерменные обьявляются через конст?

[@catsapp]

Щас такая мода

[@whatisloveel]

Что это за шрифт?

[@apmypa.b.291]

Походу все всё поняли кроме меня) Почему родительская функция неактивна? Она же запускается каждый раз, просто через функцию обёртку. А к функции внутри мы не обращаемся ни разу кроме как запуская родительскую. Я не понял тейка.

[@KimarTV]

А зачем это нужно?

[@grantorino3465]

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

[@nefed-L]

А какие ещё варианты могут быть? Подобные примеры с функцией в функции везде практически, где объясняют тему замыкания.

[@user-ij5vu4jn5w]

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

[@galievramil1169]

Привет, если есть время и желание, можешь потестировать меня по js! Я новичок, но оч хочу программировать.. Твой урок по классам очень крутой!

[@thecatwrites9731]

блин крутое объяснение, но все ровно пока не понял(

[@stackdev]

:) а вы просто смотрели - или код за мной писали?

[@thecatwrites9731]

@@stackdev сейчас буду писать код) но тогда смотрел) я немного не пойму саму соль этого) я бы хотел с вами пару минут поговорить на эту тему может вы меня в правильную сторону направите)))))))))))))))

[@stackdev]

@@thecatwrites9731 Знаете, для меня, любое самое крутое объяснение - обязательно болжно быть дополнено написанием кода собственными руками (часто многократным...).... Без это никак. Напишите сами - без подсказок, поставьте логи - и все встанет на свои места:)

[@thecatwrites9731]

@@stackdev спасибо за хороший совет!!!

[@bikadorov]

Так и не понял, как автор вывел в консоль результат работ функций createPlayer() если нигде в коде нет команды вывода в консоль. Или мозги уже после объяснений отъехали

[@frankshepherd5953]

он вызывал функцию прямо в консоле где > | и тут пропиши playerOne() нажми enter все получится

[@whiterhino752]

Grazhdanka XD

[@user-xv5bt2fy2z]

переменная grazhdanin как-то не по феншую. Плохому учите.

[@user-xp7zh5yr9f]

В JavaScript все функции являются замыканиями, но есть исключение: функции которые объявлены через синтаксис new Function().

[@user-xn2cr5oe4p]

Непонятно объясняешь

[@greykoff3325]

function outerData(){ if(oData.convert_to === "ft"){pereshetka = oData.value * 3.2808; console.log('GGGGGGGGGG',pereshetka); } return pereshetka; } Доброго ввечора есть функция - а в из нее нужно как то достать доступ до переменной в глобальную область видимости когда делаю как у Вас подсказано - console.log віводіт undefined. var pereshetka=0; oAJAX = new XMLHttpRequest(); oAJAX.open("GET","data.json", true); oAJAX.onreadystatechange = function () { var oData; //const accessToInner = outerData(); var oOutput = document.getElementById("info"); if ((oAJAX.readyState == 4) && (oAJAX.status == 200)) { var oData = JSON.parse(oAJAX.responseText); function outerData(){ if(oData.convert_to === "ft"){pereshetka = oData.value * 3.2808; console.log('GGGGGGGGGG',pereshetka); } return pereshetka; } //const result = {unit: oData.convert_to, value: convertFunction(oData.distance.value, oData.distance.unit, oData.convert_to)} { //console.log(' Hello', result); var oP; var Dlinacount = oData.distance.lenght; for (i in oData.distance ){ console.log(oData.distance[i]); console.log('HERNA', oData.distance.value); if (!oData.distance.value) { break; } else{ console.log(oData.distance) oP = document.createElement ("p"); console.log(oData.distance[i]) oP.textContent = oData.distance.unit + " " + oData.distance.value; oOutput.appendChild(oP); } } } const mygav = outerData(); console.log('HAHGAHAHAHA',mygav); } } oAJAX.send();

[@yuriytheone]

Только родительская функция так и останется в стеке, и не важно "работает" она или нет. Всё её локальные переменные и параметры останутся в стейке пока она не вернёт управление. Неудивительно, что внутренняя функция будет "видеть". Только в JS это вызывает дикий экстаз... Да, и Closure не переводится, как Замыкание с английского....