Подойдите ближе к Closure в JavaScript

Чем больше вы знакомы с основами JavaScript, тем дальше вы от кодов, подверженных ошибкам. А Замыкание — одна из самых рудиментарных концепций, которая может стать для вас кошмаром. Но не волнуйтесь; призрак больше не сможет преследовать вас после этого.

Замыкание в JavaScript — это внутренняя функция, которая имеет доступ к членам внешней функции. Таким образом, наряду со своей собственной областью действия и членами глобальной области видимости, он также может получить доступ к своей цепочке областей действия родительской функции. Замыкания широко используются для обеспечения конфиденциальности данных объекта, функций обратного вызова и в обработчиках событий.

Пример:

Вывод:

Ссылаясь на фрагмент кода в примере 1, можно увидеть, что доступ к переменным preMsgText и postMsgText внешней функции greetingMessage осуществляется внутри внутренней функции showGreeting. Функция showGreeting называется замыканием.

Здесь мы кратко обсудили, что такое замыкание и как его можно определить простым способом. Теперь давайте поговорим о его практических вариантах использования и о том, почему это так важно в JavaScript. Чтобы понять это, вы должны внимательно взглянуть на приведенный ниже фрагмент кода.

Вывод:

В примере 2, объявив preMsgText и postMsgText внутри функции greetingMessage, мы сделали их закрытыми переменными, доступ к которым возможен только внутри функции. и снаружи через некоторую функцию-член (геттер или сеттер) той же цепочки областей видимости. Теперь, с другой стороны, мы установили функции showGreeting и setGreetingMessage в качестве общедоступных членов, предоставив их в возвращаемом объекте. Эти две функции теперь могут обращаться к preMsgText и postMsgText извне.

Это одна из популярных функций объектно-ориентированного программирования (ООП), помогающая скрывать данные.

Пока все просто. Правильно? Теперь давайте разберем его призрачную часть и проблемы, с которыми можно столкнуться. См. приведенный ниже код.

Возможно, вы ожидаете следующего вывода:

Но, к сожалению, он напечатает это-

Вы нашли что-нибудь сомнительное в примере 3? При отладке кода вы увидите, что значение i отображается правильно при возврате. Однако в конце все переменные объектов имеют одинаковое значение. Причина в том, что внутренняя функция имеет доступ к переменным внешней функции по ссылке. Таким образом, каждый раз возвращается ссылка i, а не фактическое значение i. И когда мы вызываем функцию regNo извне, значение i становится равным 3.

Теперь вопрос в том, как мы можем преодолеть это. Одним из лучших решений является использование выражения немедленно вызываемой функции (IIFE) следующим образом.