Уроки Javascript #4. Что такое замыкания в JS (простыми словами + 3 примера)
HTML-код
- Опубликовано: 10 фев 2025
- Мой 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
Это магия! 12 минут меня отделяло от того, чтобы непонятное заклинание в начале видео, стало абсолютно понятным и логичным в конце
Я не встречал ещё более доступного и короткого объяснения
Спасибо!
На втором примере стало понятно 50 на 50. И тут Василий выкатывает 3-ий пример, после которого, у меня все встает на свои места. Спасибо!
:) Спасибо!
кучу видео пересмотрел, еще не встречал того, кто знал бы настолько хорошо эту тему,чтобы мог объяснить. Все объясняют это по-разному и разное понимание.
Благодаря этому видео реально понял замыкания! Большое Спасибо!!!
Рад что вам было полезно:)
это наверное если не ошибаюсь 3 видео если не 4-ое , и только сейчас я догнал что значит замыкание, спасибо за помощь!
Спасибо!
Спасибо вам большое! 🤗
Сегодня был экзамен "Программирование на JS", и в качестве доп вопроса спросили "Что знаешь про замыкание?"
Ответила то, что сегодня утром, пока ехала в автобусе, просмотрела
Поставили "5")
Круто) поздравляю
СПС ОГРОМНОЕ я час не мог понять что такое замыкание и вдруг наткнулся на ваше видео и за 12 мин понял
Спасибо)
спасибо, Вася!
Очень понятно и интересно и ещё ждём от вас REDUX👍👍👍
Спасибо. Максимум полезной информации!
Предполагаю, что если писать по старокрестьянски с использованием ООП - то будет примерно вот так:
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
Что примерно является эквивалентом последнего примера.
Пожалуй, Лучшее объяснение!
Спасибо!
Спасибо! Хорошие примеры для объяснения замыкания.
prikolinii i svejii content, vsem budu recomandavati!!
Спасибо за поддержку!
Великолепное объяснение замыкания
Спасибо!
Круто! Спасибо большое! Чем больше учу язык тем больше понимаю важность хороших, понятных и разных примеров
Спасибо!
Автору большое спасибо за труд! Очень доступно
Вы замечательно все рассказываете , побольше таких уроков !
Спасибо!
Господи спасибо Вам огромное за такое обьяснение. Ломал голову а тут всё настолько понятно!!!
Лайк подписка!!!
Спасибо!
очень хорошее видео!!!! спасибо большое
Очень приятная подача и хорошие примеры! Благодарю!
Спасибо!
Спасибо! Очень понятные примеры и объяснение на высоте, продолжай!
Спасибо!
Самое прекрасное объяснение, спасибо!
Спасибо!
Спасибо Вам огромное за объяснение, на 0-ой минуте первый раз слышала слово "замыкание", к 8-ой могла объяснить, что это такое😌
Спасибо!
завтра без реального применения, забудешь)
Большое спасибо за такое грамотное разъяснение!!!)
Спасибо за поддержку!
Отличное объяснение! Василий)
Спасибо!
Рахмет! Вы умеете объяснять сложные вещи простыми примерами. Для основы самое то, очень лаконично и взаимосвязано, не то что у других авторов даже платных курсов, коих у меня много, создают переменные от балды, во время исполнения пропадает некая логическая связка вместе с этим и желание дальше смотреть. Как же все это парадоксально. Все жду момента когда вы выпустите полноценный буткемп по js, неее неее 2-х часов мало))
Спасибо! как раз работаю над этим:)
Купил урок на UDEMY и ничего не понял🤦♂ . Нашел ваш ролик и все стало на свои места. Спасибо!!! 😊👍
Спасибо!
Лучший! Раза 3-4 учил, и тут прям осенило как все просто. Спасибо у Вас талант учить. Сам тренер по хоккею, не вру)!
:) Спасибо!
Хорошее, информативное видео! Спасибо за урок!
Спасибо!
спасибо, Василий)
Отличные уроки, спасибо!
Спасибо!!! 🤩
Понятно и ясно.
Спасибо
Спасибо, очень доступно!
Спасибо!
Спасибо, очень понятным языком всё описано.
Спасибо!
Спасибо, очень понятно
Спасибо!
"Замыкание - это возможность функции, которая находится внутри др функции, получать доступ к переменным, которые в области видимости родительской функции, даже после того, как родительская функция прекратила своё выполнение."
любая функция создает замыкание.
очень понятные примеры. Было б еще в конце реальное применение...
Спасибо!
сокрытие реализации, кеширование и проч, но это продвинутые темы уже
Базара ноль вообще вопросов не осталось
Лайк, і підписка, всі відео супер. Більше прикладів,все дуже цікаво.
Спасибо!
спасибо, всё шикарно 👍
Спасибо!
ух как незаметно пролетел урок
Спасибо
Видео хорошее. Чтобы лучше тему понять, как по мне, нужно ознакомиться с таким понятием как лексическое окружение
12:43 мы получили доступ не только к переменой score, но и к аргументу name . Вопрос меняется ли значение score во внешней функции или только во внутренней?
отлично
Спасибо!
круто
Спасибо!
👍👍👍
Классно
Хороший канал!!! Так внутренняя функция берёт не только переменную,но и аргумент внешней ?
Спасибо! Все верно. Внутренней функции доступны переменные - которые находятся в области видимости внешней функции - включая аргументы, которые мы передаем во внешнюю функцию.
похоже это сильно влияет на производи тельность, что если у меня несколько переменных и много игроков, вообще это правильный подход или есть способы получше, без замыканий например?
в чем смысл создания замыкания в примере гражданами если мы можем написать обычную функцию и без замыкания?
Спасибо за объяснение. Остался вопрос, а playerOne это функция высшего порядка?
Правильно понимаю, что замыкание, это как шаблон, под который можно делать много экземпляров, и за счет того, что дочерняя функция не удаляется после завершения, то все работает как надо? Как например во втором примере, одна фунцкия под всех юзеров!
некуя не понятно, but очень интересно
а почему пеерменные обьявляются через конст?
замыкание через возврат функции из функции это просто один из частных случаев замыкания, это не его опредление. Замыкание может быть и без функции в функции. Так что обьяснение не сосем корректное.
А какие ещё варианты могут быть? Подобные примеры с функцией в функции везде практически, где объясняют тему замыкания.
При каждом запуске playerOne или playerTwo, начиная с первого запуска, должна создаваться переменная score и обнуляться согласно let score = 0; и, т.о. счётчик должен показывать всё время 1. В чём тут дело не пойму?
И где мы обращаемся к внутренней функции? Мы всё время обращаемся к внешней функции createPlayer.
Создайте (или скопируйте) репозитоий проекта, посмотрите логи, поиграйте логикой - и все станет понятно!
createPlayer вызывается один раз и возвращает функцию в переменную playerOne. Другую, не createPlayer. В нашем случае это scoreCount. Поэтому вызывая playerOne, ты по сути вызываешь scoreCount (а там никакого обнуления нет, только увеличение на 1)
Механизм понял, но полезного применения замыкания не вижу (((
Благодарю, но определение я не запомню
Не понимаю, каким образом аргумент из функции addressGrazdanin (имя) встаёт на место параметра в анонимной функции?
Потому что когда вызов createAdress(address==type) возвращает внутри себя анонимную функцию которая возвращает address и name. И это анонимная функция записывается в переменную adressGrazhdanin. И эта переменная становится функцией и хранит в себе функцию createAdress() и Антон функцию и если вызвать её возвращает address и name.
Ну типа
adressGrazhdanin = function(name) {
return address и name
}
Если просто вызвать функцию createAdress("Гражданин") то нечего не произойдёт потому что он возвращает анонимную функцию. А у анонимная не работает без имени. Поэтому как бы присваиваем в переменную чтобы использовать эту функцию.
like
Спасибо!
Походу все всё поняли кроме меня) Почему родительская функция неактивна? Она же запускается каждый раз, просто через функцию обёртку. А к функции внутри мы не обращаемся ни разу кроме как запуская родительскую. Я не понял тейка.
Почему-то у меня на 3 минуте, когда вызываю функцию external(); она перечеркивается и пишется, что устарела. Код такой же, проверил. Не подскажите где искать причину?
нашел причину, когда переименовал функцию. Зарезервировано слово что-ли?
Что это за шрифт?
Так и не понял, как автор вывел в консоль результат работ функций createPlayer() если нигде в коде нет команды вывода в консоль. Или мозги уже после объяснений отъехали
он вызывал функцию прямо в консоле где > | и тут пропиши playerOne() нажми enter все получится
Я не понимаю. Тут же просто присваевается то что возвращает внешняя функция канстанте, вот и все. То есть главное что у нас в ретурне. Мы бы могши на писать ретурн А и тогдабы константа содержала просто строку А.
А зачем это нужно?
блин крутое объяснение, но все ровно пока не понял(
:) а вы просто смотрели - или код за мной писали?
@@stackdev сейчас буду писать код)
но тогда смотрел) я немного не пойму саму соль этого)
я бы хотел с вами пару минут поговорить на эту тему может вы меня в правильную сторону направите)))))))))))))))
@@thecatwrites9731 Знаете, для меня, любое самое крутое объяснение - обязательно болжно быть дополнено написанием кода собственными руками (часто многократным...).... Без это никак. Напишите сами - без подсказок, поставьте логи - и все встанет на свои места:)
@@stackdev спасибо за хороший совет!!!
В JavaScript все функции являются замыканиями, но есть исключение: функции которые объявлены через синтаксис new Function().
Непонятно объясняешь
переменная grazhdanin как-то не по феншую. Плохому учите.
Grazhdanka XD
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();
Только родительская функция так и останется в стеке, и не важно "работает" она или нет. Всё её локальные переменные и параметры останутся в стейке пока она не вернёт управление. Неудивительно, что внутренняя функция будет "видеть". Только в JS это вызывает дикий экстаз... Да, и Closure не переводится, как Замыкание с английского....
Понятное видео, спасибо