Приветствую вас, друзья. В изучении Javascript многим начинающим разработчикам непонятны тема замыканий. Да, тут действительно есть над чем задуматься. Но так как я сторонник того, чтобы вся сложная теория подкреплялась практикой, то заметка будет ориентирована именно на практические примеры.
Немного теории
Замыкания — это функции, ссылающиеся на независимые (свободные) переменные . Другими словами, функция, определённая в замыкании, «запоминает» лексическое окружение (LexicalEnvironment), в котором она была создана.
Заметка: cвободные переменные — это переменные, которые не объявлены локально и не передаются в качестве параметра.
Для чего нужны замыкания? Это способ задания функций, которые в свою очередь тоже создают функции. Благодаря такой вложенности возвращаемая функция [от внешней (обертки) создающей функции] "запоминает" параметры, переданные ей от создающей (внешней обертки) функции.
Покончим с теорией и перейдем к практике. Единственное, я оставлю здесь ссылки на хорошие статьи по теме:
1. Замыкания в JavaScript (habr)
2. Замыкания в JavaScript (html Academy)
3. Замыкания, функции изнутри (learn.javascrit.ru)
Немного практики
А теперь быстренько приступаем к практике. Каждый пример я постарался визуализировать и сделать кликабельным. Поэтому поэкспериментировать можно будет прям в браузере :)
Пример 1
Пример переключения классов средствами Javascript. Плюс простейшее замыкание для циклического счетчика нажатий:
Запустить код примера 1 ( https://jsfiddle.net/rgx74v8w/7/ )
Пример 2
Переключение CSS-классов средствами Javascript.
Подсветка выбранного элемента.
Пример логики выбора элементов.
Подсчет количества нажатий на каждый элемент посредством присваивания замыкания каждому элементу списка elementList.
Запустить код примера 2 ( https://jsfiddle.net/9md108g3/3/ )
Пример 3
Ручное + автоматическое рандомное переключение CSS-классов средствами Javascript. Подсветка выбранного элемента. Пример логики выбора элементов. Подсчет количества нажатий на каждый элемент посредством присваивания замыкания каждому элементу списка elementList. Мерцание с помощью метода setInterval(), использующий метод переключения CSS-классов в контексте текущего объекта, контекст которого получен через call().
Запустить код примера 3 ( https://jsfiddle.net/dpg3mybz/1/ )
Библиотека с книгами для физиков, математиков и программистов
Репетитор IT mentor в VK
Репетитор IT mentor в Instagram
Репетитор IT mentor в telegram
