В этой части учебника мы разберём что такое функция замыкания в javascript и в целом что такое это замыкание, также не много затроним IIFE.
Для чего нужны функция замыкания в JS:
Замыкания в JS нужны для безопасности, чтобы это понять, давайте покажу не большой пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Создаём переменную x let x = 0; // Cоздаём функцию count function count(){ // Увеличиваем на один переменную x x++; // Выводим x в консоль console.log(x) } // Вызываем три раза функцию count count() count() count() |
Это очень короткий, но наглядный пример, в начале мы создаём переменную которую будем увеличивать, дальше идёт функция, которая как раз и увеличивает x, вызываем её несколько раз.
Вот что должно появиться в консоли:
Как видите всё правильно, но есть проблема, если мы решим изменить переменную x на слово «Hello», то программа уже не будет работать.
Для примера я изменю x после первого объявления функции count(), вот что получится:
Как видите после единицы выводиться «NaN», а теперь представьте что программа более сложная, и от значения одной такой переменной будет зависеть вся работоспособность программы, чтобы избежать этого были придуманы замыкания.
Работа со замыканиями в JS:
Теперь разберём как сделать замыкание, для этого на JS покажу простой пример замыкания:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Создаём функцию замыкания function count_fun(){ // Создаём переменную x let x = 0; // Возвращаем функцию return function() { // Инкрементируем x x++; // Выводим x console.log(x); } } // Присваиваем возвращаемую функцию переменной let count = count_fun(); // Вызываем count() три раза count() count() count() |
Она выведет всё тоже самое что и первый пример, но теперь её нельзя так просто взять и сломать, давайте разберём в чём разница.
Как видите мы создали функцию count_fun(), внутри которой объявляем переменную x, после чего возвращаем функции, в которой увеличиваем эту переменную.
После получается мы присваиваем эту функцию переменной, и вызываем её три раза.
И почему у нас не должно быть такого как с первой вариантом этой программы? Дела в том, что когда мы вызываем функцию, то она обрушаться к области видимости count_fun(), где есть переменная x и мы её увеличиваем.
Таким образом мы её замкнули в определённой области видимости, и теперь не каких подобных проблем с безопасностью не должно быть.
IIFE JS:
Последние что стоит разобрать, так это что такое IIFE в JavaScript, это сокрушение от «immediately-invoked function expressions» или на русском означает функцию, запускаемую сразу после объявления.
То есть как понятно из названия, IIFE запускает функцию сразу после объявления.
Но на данный момент этот синтаксис редко используется, единственное, может ради конфигурации, чтобы они сразу применились, вот и всё.
Также взгляните на синтаксис:
1 2 3 | (function (){ console.log("Это IIFE"); })() |
Как видите всё очень просто, вы просто создаёте функцию внутри круглых скобок и после закрывающей скобки, ещё ставьте круглые скобки, также внутри последних вы можете передавать параметры, если они есть у функции.
Это всё про IIFE.
Вывод:
В этой части учебника вы прочитали что такое функция замыкания в JavaScript, как она работает, и немного разобрали что такое IIFE.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...