Тёмный

Что такое и как работают замыкания (closures) в JavaScript? 

PurpleSchool | Anton Larichev
Подписаться 41 тыс.
Просмотров 11 тыс.
50% 1

Детально разберёмся в работе замыканий (closures) в JavaScript на примерах. Так же посмотрим на их работу с точки зрения scope chain и стека вызовов в JS.
Это одна из лекций моего нового курса "JavaScript с нуля - основы языка и практика для начинающих".
🎉 Новый курс - Основы JavaScript: purpleschool.ru/course/javasc...
⚡ Мои курсы
Все мои курсы: purpleschool.ru
Мой telegram канал: t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:30 - Пример работы замыканий
3:58 - Пошаговая работа замыканий (call stack, scope chain)
10:45 - Как увидеть замыкание?
13:40 - Заключение

Опубликовано:

 

29 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 92   
@PurpleSchool
@PurpleSchool Год назад
🎉 Новый курс - Основы JavaScript: purpleschool.ru/course/javascript-basics
@Leyla-kk5vo
@Leyla-kk5vo 7 месяцев назад
Вот теперь стало понятно, спасибо!
@PurpleSchool
@PurpleSchool 7 месяцев назад
Пожалуйста!
@DronVol
@DronVol Год назад
Я бы с удовольствием про контексты послушал, а так же про их привязку)
@PurpleSchool
@PurpleSchool Год назад
Это всё есть в курсе, может сделаю отдельное видео как-нибудь
@mamaimdeveloper
@mamaimdeveloper 6 месяцев назад
Как же доходчиво!
@PurpleSchool
@PurpleSchool 6 месяцев назад
Спасибо
@user-bb2ho4ip8t
@user-bb2ho4ip8t 3 месяца назад
А что здесь доходчивого? Почему в change мы можем передать аргумент хотя changeBalance, которая присваивается change не принимает аргументов, какой то трэш, здесь происходит искажение локальных областей видимости функции, нужно уточнить что в change лежит то , что возвращает функция changeBalance а не сама функция changeBalance
@ndrewhas
@ndrewhas 11 месяцев назад
Годно, спасибо 🔥
@PurpleSchool
@PurpleSchool 11 месяцев назад
Пожалуйста!
@bushkov
@bushkov Год назад
О, прикольно! Как раз думал когда выйдет курс по js и вот! Уже купил.
@PurpleSchool
@PurpleSchool Год назад
👍
@bushkov
@bushkov Год назад
@@PurpleSchool Антон, подскажите, когда будет готова вторая часть курса? Я уже прошел 10% базового курса и поэтому полагаю, что смогу завершить все за 2-3 недели. Поэтому хотелось бы сразу перейти ко второй части. Или уже на этом уровне можно сразу к Typescript? Спасибо.
@Quentinrei
@Quentinrei Год назад
Крутой контент 🎉
@PurpleSchool
@PurpleSchool Год назад
Спасибо!)
@user-mu4my8fq2e
@user-mu4my8fq2e Год назад
Моё почтение!
@PurpleSchool
@PurpleSchool Год назад
Спасибо)
@vit944
@vit944 Год назад
Антон, подскажите, а где на практике во фронтенде применяются замыкания?
@PurpleSchool
@PurpleSchool Год назад
Осознанно практически нигде, так как данными из замыкания напрямую нельзя управлять.
@user-jf2ui2qy1y
@user-jf2ui2qy1y 8 месяцев назад
@@PurpleSchool Супер
@asifabbasov3801
@asifabbasov3801 4 месяца назад
Вопрос не по теме. Что за тему вы используете в VS Code?
@PurpleSchool
@PurpleSchool 4 месяца назад
Bearded Theme Vivid Purple
@diggerdog001
@diggerdog001 Год назад
Антон, я вот выбрал твой курс (я в js ноль в данный момент) как первый курс по JS и уже на первых уроках ты произносишь слова, которые новичок не может знать. Например, в разделе что такое JS, ты разбираешь где еще кроме браузера используется JS, там есть такие слова как нативные компоненты, какие то потоки (??), API, React Native, парсинг, компилирование, как будто пытаешь доказать что ты профессионал, хотя мы и так это знаем (извини если грубо написал). Для тебя понятно что эти вещи и пояснения элементарны, только не думаю что это == по отношению к новичкам. Я только начал, а уже голова начинает закипать о доп. информации которую ты не объясняешь, хотя написано что курс подходит для новичков :( Может дашь какой то совет? Может перед твоим курсом что-то другое пройти? Всё таки JS это основа основ после html/css
@PurpleSchool
@PurpleSchool Год назад
Основа основ. Я просто даю дополнительный контекст, который пока не влияет на простые концепции, которые мы разбираем. Двигайся просто медленно по урокам
@diggerdog001
@diggerdog001 Год назад
@@PurpleSchoolпонял спасибо, грубо не хотел написать. Просто хотел высказать тебе обратную связь
@johnsnow6041
@johnsnow6041 Год назад
Несколько раз пересмотрел
@user-nj3ho3uq4h
@user-nj3ho3uq4h Год назад
Ни где нет информации. В каждом браузере есть свои кнопки переход на предыдущую страницу и обратно. Но есть такая штука как куки, при возврате куки не восстанавливаются, из-за чего ломается страница. Что делать? Сохранять историю переходов с куками?
@yyanasolyah
@yyanasolyah Год назад
Спасибо за видео! Хотелось бы в будущем увидеть видео про микро и макротаски;)
@PurpleSchool
@PurpleSchool Год назад
Хорошо)
@user-br1cz5do4c
@user-br1cz5do4c Год назад
Правильно ли я понял, что после каждого вызова запоминается пред результат и прибавляется к итоговой сумме?
@PurpleSchool
@PurpleSchool Год назад
Оно всегда храниться в связанном scope и к нему обращается
@pintofale
@pintofale Год назад
Спасибо за видео! Подскажите пожалуйста - в Вашем курсе ведь нет ничего про асинхронные операции? Это будет в каком-нибудь "продвинутом" курсе?
@PurpleSchool
@PurpleSchool Год назад
Да, будет во второй части, которая продолжает первый курс.
@user-ed8eb6cx7o
@user-ed8eb6cx7o Год назад
Очень полезно) есть ли у Вас видео об утечках памяти?
@PurpleSchool
@PurpleSchool Год назад
Есть анализ утечки памяти в курсе по Node.js и разбор всех инструментов: purpleschool.ru/course/nodejs
@Zadorozhniy39
@Zadorozhniy39 Год назад
Спасибо 👍🏼
@PurpleSchool
@PurpleSchool Год назад
Пожалуйста)
@rusfungame
@rusfungame Год назад
2 года учу js, такого обьяснения еще не встречал
@PurpleSchool
@PurpleSchool Год назад
Надеюсь полезного?)
@rusfungame
@rusfungame Год назад
@@PurpleSchool Конечно!
@aidarb9318
@aidarb9318 Год назад
thanks man
@PurpleSchool
@PurpleSchool Год назад
Welcome)
@sergio_an_2003
@sergio_an_2003 Год назад
Круто! Оч информативно. А какая тема стоит в vs code?
@PurpleSchool
@PurpleSchool Год назад
Bearded Theme Vivid Purple
@raff_m_d6971
@raff_m_d6971 Год назад
Ждемс ещё
@PurpleSchool
@PurpleSchool Год назад
👍
@CCSIB
@CCSIB Год назад
Круто, не знал. Хорошо бы практические примеры, пока придумал что можно считать сумму, среднее и кол-во, например заказов и хранить в контексте. Нужно попробовать.
@PurpleSchool
@PurpleSchool Год назад
Рад, что было полезно)
@valeriyosokin1076
@valeriyosokin1076 Год назад
У замыканий есть накладные расходы при создании и запуске. По сути, при создании замыкания создается объект. Не забываем что в JS функция это объект. В примере создано 2 экземпляра объекта функции. А если будет необходимо создать сотни? И как всем этим управлять?
@igorchesnokov482
@igorchesnokov482 10 месяцев назад
Ну и случится замыкание :) Только в голове :))))
@N5O1
@N5O1 Год назад
8:43 замыкания - инкапсуляция из мира JS
@PurpleSchool
@PurpleSchool Год назад
Да, но у нас есть в JS и более явные механизмы: приватные переменные, IIFE
@user-kv9ur9hi4n
@user-kv9ur9hi4n Год назад
@@PurpleSchool IIFE всегда воспринимал как костыль, сочиненный ввиду отсутствия альтернативы. Интересно ваше мнение
@PurpleSchool
@PurpleSchool Год назад
Он действительно костыль, сейчас практически не используется (кроме разовый запусков инициализации приложения, но не как инкапсуляция).
@CCSIB
@CCSIB Год назад
И надо попробовать внутри объекта vue с методами vue будет ли работать, скорее всего да.
@PurpleSchool
@PurpleSchool Год назад
Vue же это просто JS фреймворк, потому везде где есть JS работаю будет)
@godlikex_alex
@godlikex_alex Год назад
название темы не подскажите?)
@PurpleSchool
@PurpleSchool Год назад
Bearded Theme Vivid Purple
@koshmar1319
@koshmar1319 Год назад
а рекурсия будет на курсе?
@PurpleSchool
@PurpleSchool Год назад
Да, в этом курсе она используется в тестах и рассматривается как пример переполнения стека.
@user-su3ef5cb8p
@user-su3ef5cb8p 9 месяцев назад
Если бы можно было прикладывать аудио, то я бы приложил скрип своего мозга 😁 Но вроде какое то понимание появились 😀
@PurpleSchool
@PurpleSchool 9 месяцев назад
👍
@fedordostoevskiy4209
@fedordostoevskiy4209 Год назад
Классно. Но друзья прочитайте Симпсона про замыкания. Я с третьего раза сам полностью въехал только. Там не прям уж 'wow', но ни один ролик или статья столько не дал мне.
@user-mn3ic2ct8d
@user-mn3ic2ct8d Год назад
А где все коменты?
@PurpleSchool
@PurpleSchool Год назад
Вроде все есть
@serdotsenko
@serdotsenko Год назад
я так предпологаю, что замыкания придумали до классов, т.к. по сути это класс с приватным полем, которое меняет метод этого класса 😉
@PurpleSchool
@PurpleSchool Год назад
Да, они были до классов)
@user-dr7im3tk3e
@user-dr7im3tk3e 6 месяцев назад
change это по сути changeBalance. У changeBalance нет аргументов. Каким образом аргумент переданный в change(100) передаётся в функцию и затем судя по всему передаётся в анонимную функцию вместо sum? У меня вот после просмотра видео сложилось впечатление, что замыкание - это когда одна функция возвращает другую функцию и возвращаемая функция замыкает родительскую и поэтому типа замыкание))) Механизм передачи параметров вообще не понятен.
@user-mf3gt6zs7g
@user-mf3gt6zs7g 3 месяца назад
Ты выполняешь функцию в ченж, тем самым возвращаешь анонимную функцию с параметром и переменную баланс
@novichok3417
@novichok3417 3 месяца назад
​@@user-mf3gt6zs7gа что будет если присвоить перем ченж функ ченжбаланс без вызова (без скобок) . А потом запустить ченж с разными параметрами три раза?
@user-mf3gt6zs7g
@user-mf3gt6zs7g 3 месяца назад
@@novichok3417 Для тебя ничего не произойдёт. А так переменная ченж будет указывать на функцию ченжбаланс. Но ты можешь выполнить функцию ченж с двумя скобками: ченж()(100). Тогда ты по сути повторишь тот же код, что и в примере на видео. Попробуй вариант из видео и свой вариант, но выведи в консоль ченж, чтобы узнать, что в ней содержится
@novichok3417
@novichok3417 3 месяца назад
@@user-mf3gt6zs7gи где тогда как сказать эффект накапливания? ченжбаланс()(100); ченжбаланс()(2000); ченжбаланс()(3500)); Дадут результат: 100, 2000, 3500. А не 100, 2100, 5600.
@user-glory-of-ukraine
@user-glory-of-ukraine 11 месяцев назад
Автор Ангулярщик?)
@PurpleSchool
@PurpleSchool 11 месяцев назад
Ну я писал пару лет на AngularJS, потом на Angular, потом React и Svelte. Vue больше для интереса, а не для прода.
@mooncorizer290
@mooncorizer290 4 месяца назад
Зачем называть замыканием, когда обьект с приватной переменной и методом что её меняет, помещают в переменную и пользуются его методами меняя приватное значение. Почему именно замыкание. Где можно почитать официально об этом а не в википедии
@PurpleSchool
@PurpleSchool 4 месяца назад
developer.mozilla.org/ru/docs/Web/JavaScript/Closures
@romanmed9035
@romanmed9035 Год назад
несомненно полезное видео. но никак не прояснило ситуацию. образно понятно, а конкретно все же еще нет. вероятно не нашел еще то объяснение котрое прольет свет на ситуацию. хотя это уже не первое видео на эту тему которое смотрю.
@PurpleSchool
@PurpleSchool Год назад
Эх, я так старался. По сути замыкание - это функция и окружение где она была создана и связь между этим.
@CJIu3eHb
@CJIu3eHb Год назад
Как дополнение, хочу акцентировать внимание именно на сборщике мусора. После выполнения порождающей функции в замыкании возвращаемой функции (ее внешнем скоупе) остается только то, что используется в возвращаемой функции, т.к. эти переменные еще понадобятся для выполнения возвращаемой функции. А то, что было только внутри порождающей и нигде больше не понадобится - после выполнения порождающей доступно для чистки сборщиком мусора. Ну и не забывать, что каждое выполнение порождающей создает новый скоуп для возвращаемой. Именно это позволяет иметь независимые балансы при создании нескольких функций changeXXX в примере видео.
@romanmed9035
@romanmed9035 Год назад
@@PurpleSchool у Вас отличное видео. и оно действительно кое что прояснило, но не до озарения. Вы не зря старались. я никоим образом ничего плохого о самом выпуске не написал. это не видео виновато, как писал не оно первое которое смотрел. и несомненно оно многим поможет у кого проще с пониманием. Ваш труд не напрасен и старания не бесполезны.
@romanmed9035
@romanmed9035 Год назад
@@CJIu3eHb премного благодарен за дополнение
@denisshulga7539
@denisshulga7539 8 месяцев назад
Ничо не понятно)
@progtime2000
@progtime2000 Год назад
Уснуть можно...
@PurpleSchool
@PurpleSchool Год назад
😴
@limonred5283
@limonred5283 Год назад
почему это выглядит как дичь?)))
@PurpleSchool
@PurpleSchool Год назад
Это JS)
@victormog
@victormog Год назад
Слишком затянул, IMHO (тут на много проще: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RPuFz93Gvpk.html )
@PurpleSchool
@PurpleSchool Год назад
Тут не рассказана механика с точки зрения scope и привязки. Потому люди и не понимают почему так происходит
@user-kv9ur9hi4n
@user-kv9ur9hi4n Год назад
интересная логика, тебе можно пойти тогда к хауди хо, он тебе весь js за час расскажет) без обид)
@victormog
@victormog Год назад
@@user-kv9ur9hi4n логика элементарная - если видео обучающее, то где понятнее? Лично я, если бы уже не знал, не понял бы ничего...
@N5O1
@N5O1 Год назад
Это самая бесполезная информация, которую нужно знать JS\TS разработчкину. Замыкания - это инициализированные внутри функции\облати видимости переменные
@PurpleSchool
@PurpleSchool Год назад
Проблема, что многие не понимают работу замыканий и допускают ошибки при работе.