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