#1 Замыкания в Javascript

poster
В этом уроке мы с вами разберем, что такое замыкания. Замыкания, это именно тот вопрос, который чаще всего задают на собеседованиях.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом уроке мы с вами разберем, что такое замыкания. Замыкания, это именно тот вопрос, который чаще всего задают на собеседованиях. Обычно потому, что люди его не полностью понимают или не могут обьяснить.

Давайте начнем.

Итак представьте, что у нас есть функция, которая добавляет 2 к числу, которое мы указали в функции.

var addTo = function (passed) {
  var inner = 2
  return passed + inner
}

console.log(addTo(3))

То есть при вызове функции с аргументом 3 мы добавляем 3 + 2 и получаем 5.

Если мы посмотрим в браузер, то оно так и работает.

Теперь изменим код. Давайте уберем аргумент passed. Теперь вопрос: "Откуда мы можем его получить, чтобы он появился внутри функции addTo"?

Мы можем написать passed, как переменную вверху нашей функции и тогда она будет доступна внутри нашей функции.

var passed = 3

var addTo = function () {
  var inner = 2
  return passed + inner
}

console.log(addTo())

Если мы посмотрим в браузер, то мы получаем такой же результат, как до этого.

В javascript все переменные, который описаны снаружи функций доступны внутри этих функций. Именно поэтому мы можем брать переменную passed снаружи и использовать ее внутри нашей функции.

Теперь давайте усложним наш пример. Давайте внутри нашей функции addTo, которая принимает 1 аргумент passed, создадим еще одну функцию так, как мы их обычно создаем.

var addTo = function (passed) {
  var add = function () {

  }
}

И вернем созданную функцию не вызывая ее.

var addTo = function (passed) {
  var add = function () {

  }

  return add
}

Теперь давайте добавим в эту функцию один параметр inner и так как мы помним из предыдущего пример, что внутри функции нам доступны внешние переменные, то нам доступна переменная passed в этой функции.

var addTo = function (passed) {
  var add = function (inner) {
    return passed + inner
  }

  return add
}

Итак еще раз. Мы описали функцию внутри функции, которая принимает аргумент inner и возвращает passed + inner. passed мы берем извне.

Теперь давайте напишем

var addThree = addTo(3)
console.log(addThree)

В браузере мы увидим, что у нас вывелась функция. И это логично, так как мы описали внутри функцию и ее вернули.

Как вы помните, функции являются обьектами, поэтому давайте посмотрим на свойства этого обьекта.

var addThree = addTo(3)
console.dir(addThree)

Теперь в консоли мы увидим не тело функции, а обьект. И у него есть одно свойство, которое нас интересует. Это свойство [[Scopes]]. Если мы его откроем, то увидим Closure внутри. И внутри Closure у нас и будет наша переменная passed, которую мы передавали как аргумент.

Собственно, Closure в переводе на русский и означает замыкание.

Итак еще раз. Как вы помните все переменные внутри функции создаются при ее вызове и удаляются, после завершения функции.

Но в данном случае мы видим, что функция addTo уже вызвалась, а переменная passed все еще хранится внутри и мы можем ее использовать.

Давайте попробуем вызвать эту функцию еще раз

var addThree = addTo(3)
var addOne = addTo(1)
console.dir(addThree)
console.dir(addOne)

Если мы посмотрим сейчас, то функция вызвалась в обоих случаях и в обоих случаях сохранила внутри себя passed после вызова.

Теперь мы можем этот passed использовать. Собственно он у нас и используется внутри нашей функции add. Но мы эту функцию еще не вызвали. Мы ее только вернули и записали в переменные.

Когда мы ее вызовем сейчас, то у нас будет доступ к переменной passed, так как она сохранилась в замыкании.

var addThree = addTo(3)
var addOne = addTo(1)
console.log(addThree(3))
console.log(addOne(2))

Если мы посмотрим в браузер, то у нас вывелось 6 и 3 соответственно.

Итак давайте подытожим, что такое замыкания.

  1. Это внутренная функция, со всеми внешними переменныеми, которые ей доступны.
  2. Замыкания служат для одной единственной цели - сохранить какие-то переменные, после вызова функции.

Это очень часто используемый прием в javascript, который мы будем применять в следующих уроках.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Aleksandr Mikhailov
4 месяцев назад
https://www.youtube.com/watch?v=71AtaJpJHw0 ничего не напоминает?
monsterlessons
4 месяцев назад
И? Я по моему нигде не говорил, что беру все из головы и придумываю все примеры сам.
Serafim
8 месяцев назад
Хай, а можете как можно понятнее сформулировать что такое closure ? =) Я понимаю что это, но вот когда просят обьяснить без примеров - возникает ступор) На собеседовании спросили что это, я сказал что это функция, которая имеет доступ к scope родительской функции, как пример, но мой ответ не очень понравился.
monsterlessons
8 месяцев назад
Привет. Это внутренняя функция, со всеми внешними переменными, которые ей доступны. Ну не понравился и не понравился. Можно всегда пример предложить написать. Если не прокатит и точек соприкосновения с собеседующим не найдено, то лучше туда не идти, особенно если тимлид собеседует.
Moe Green
11 месяцев назад
Круто! Отличное описание closure, да еще с использованием console.dir() для наглядности! )
monsterlessons
11 месяцев назад
На здоровье)
Pavel Silber
11 месяцев назад
Большое спасибо автору! Вы случайно не даете частные уроки?
monsterlessons
11 месяцев назад
На здоровье. Нет не даю. Времени не хватает на все)
Pavel Silber
11 месяцев назад
How to find a good mentor?
monsterlessons
11 месяцев назад
Я думаю, тут больше проблема не найти хорошего ментора, а убедить его тратить время на обучение. Обычно это занимает достаточно много времени жизни (например по вечерам), а денег особо приносить не будет. Как вариант попробуйте курсы. Из тех, что мне нравятся, это курсы Кантора (но нужно идти именно к нему, а не к другим), либо Илья Климов.
Pavel Silber
11 месяцев назад
Вы имеете в виду онлайн курсы? Или видео курсы?
monsterlessons
11 месяцев назад
Я имею ввиду онлайн курс, куда записывается человек 40, преподаватель 2 раза в неделю излагает материал, дает домашки и разбирает ошибки.
Dmitry Romaniuk
1год назад назад
А можешь сделать канал в телеграмме, чтобы можно было отслеживать новое, как например у девшахты https://t.me/devSchachtChannel ??? за видосы, огромное спасибо, у тебя лучшие видосы на русском
monsterlessons
1год назад назад
Спасибо за отзыв. Насчет телеграма я подумаю. Просто это будет еще одно место, куда прийдется постить новости. Сейчас и так можно подписаться на рассылку раз в неделю или в группы вк, фб, твиттер и получать обновления. Может быть это удобно, а я просто очень старый уже)) Потому что телеграмом не пользуюсь просто.
Vladisalv “Cobr3n” Khudyshkin
1год назад назад
Блин чувак где ты раньше был со своими уроками ?)))
monsterlessons
1год назад назад
Рад, что помогло)
Oleksandr Bondar
1год назад назад
Стало намного понятнее теперь.
monsterlessons
1год назад назад
На здоровье. Рад, что помогло.
Zato Prosto
1год назад назад
Для работы с замыканием мы всегда должны возвращать внутреннюю функцию?
monsterlessons
1год назад назад
Практически всегда да.
Zato Prosto
1год назад назад
Спасибо за материалы и ответы. +1
Galeups
1год назад назад
Спасибо большое, за разъяснение. Мне одному кажется? Что использование замыканий делает код неочивидным. Жду с нетерпением следующих уроков - примеры использования замыканий. И, если честно, не хватает даты размещения видео. Не очень понятно, какой давности видео )) Спасибо большое за Ваш труд, всегда смотрю Ваши уроки с интересом!
monsterlessons
1год назад назад
Спасибо большое. Конечно код с замыканиями читать и понимать сложнее, чем без них. Но это возможности языка, которые очень часто применяются. Например если вы посмотрите это видео, где мы применяем функцию curry, она обычно пишется с помощью замыканий и в следующем видео я разберу как именно. https://monsterlessons.com/project/lessons/karrirovanie-currying-v-javascript Насчет даты - это достаточно спорный момент. Многие видео, например, как замыкания - вечные. Так как это основа языка. Но когда люди видят дату больше одного года, они обычно считают, что все устарело и нужно искать что-то новее.
Артур Владимирович
1год назад назад
Много смотрел и читал про объяснение замыкания. Спасибо, что пояснили для чего это нужно - "чтобы сохранять значения переменных после вызова функции". Учитывая, что из-за каждого угла звучит про функциональное программирование, это короткое видео очень полезное.
monsterlessons
1год назад назад
Спасибо за отзыв. Это видео как раз первое в серии по фукциональному программированию. И я считаю, что она поможет в дальнейшем понимании таких вещей как каррирование, композиция и т.п.
Dude Lebowski
1год назад назад
Третий год прошу Санту подарить мне понимание замыкания в JavaScript...
monsterlessons
1год назад назад
После видео стало понятнее?
Денис Танков
1год назад назад
К нам сегодня приходил зоо-некро-педофил Мертвых маленьких зверюшек он с собою приносил Замыкания - это суровый способ сохранять жизнь переменных объявленных в функции которая отработала и сдохла! Все сдохло,а область видимости осталась ,замкнутая и недоступная,как в параллельно-загробном мире. И доступ к ней имеет та ламбда которую выдала эта сдохшая функция. Я Черный-Пречерный Санта !!! Бугогаааааа-шеньки)
Олег Редькин
10 месяцев назад
О пасиб, теперь стало понятно)