Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение понятия</a></li>

2 <li><a>Лексическая область видимости</a></li>

3 <li><a>Примеры на практике</a><ul><li><a>Номер один</a></li>

4 <li><a>Пример два</a></li>

5 </ul></li>

6 <li><a>Принцип работы</a><ul><li><a>О контексте выполнения</a><ul><li><a>О процессе наглядно</a></li>

7 </ul></li>

8 </ul></li>

9 <li><a>Несколько слов о лексическом окружении</a><ul><li><a>На что стоит поглядеть</a></li>

10 </ul></li>

11 <li><a>Внешние переменные</a><ul><li><a>Важные выводы и внешние переменные</a></li>

12 </ul></li>

13 <li><a>Функции - кратко о самом важном</a><ul><li><a>Вложенные функции - как применять</a></li>

14 <li><a>Возврат - return function</a><ul><li><a>Что здесь происходит</a></li>

15 </ul></li>

16 </ul></li>

17 <li><a>Как быстро освоить тему</a></li>

18 </ul><p>JavaScript - язык программирования, который используется при создании веб-контента. Он предусматривает не только простой синтаксис, но и разнообразные функции. Все это помогает создавать действительно стоящие приложения.</p>

19 <p>Для того, чтобы быть хорошим разработчиком, необходимо изучить немало особенностей ДжаваСкрипт. Одна из них - это замыкания. Новичков в программировании соответствующая тема способна на первых порах сбить с толку. Но, если разобраться с оной, после выйдет создавать улучшенные программные коды.</p>

20 <h2>Определение понятия</h2>

21 <p>Замыкание - функция, которая обладает доступом к своей внешней функции по области видимости, даже если последняя остановилась. Соответственно, замыкание умеет запоминать и получать доступ к:</p>

22 <ul><li>переменным;</li>

23 <li>аргументам.</li>

24 </ul><p>И не важно, прекратилась ли выполняться внешняя функция или нет.</p>

25 <p>Замыкание - функция первого класса, имеющая в своем теле ссылки на переменные, объявленные за пределами соответствующей функции в зоне видимости и не являющиеся ее параметрами. Так называют функцию, ссылаемую на свободные переменные в области видимости.</p>

26 <p>Замыкание - способ представления функциональности и информации, которые связаны друг с другом. Данный момент сход с экземплярами объектов. Рассматриваемая "операция" - особый вид функции, которая имеет доступ (предопределение) в теле другой функции. Создается каждый раз при выполнения последней.</p>

27 <h2>Лексическая область видимости</h2>

28 <p>Так принято называть статическую область в JS, которая имеет прямое отношение к доступу к переменным, объектам, функциям. В основе лежит расположение соответствующих элементов в программном коде.</p>

29 <p>Выше представлен пример кода. Его нужно рассмотреть, чтобы лучше разобраться в лексической области видимости. Тут происходит следующее:</p>

30 <ol><li>Функция inner обладает доступом к переменным в пределах своей зоны видимости.</li>

31 <li>Она же имеет доступ в пределах функции outer, а также глобальной области видимости.</li>

32 <li>Функция outer получает доступ к переменным, которые объявлены в собственной и глобальных зонах.</li>

33 </ol><p>Полученная цепочка обладает следующим представлением:</p>

34 <p>Обратить внимание необходимо на следующие факты:</p>

35 <ol><li>Функция Inner окружена лексической областью outer.</li>

36 <li>Последняя окружена глобальной "видимостью".</li>

37 <li>У функции inner есть доступ к переменным, которые определены в outer и глобальной видимости.</li>

38 </ol><p>Но для того, чтобы продолжить тему и лучше понимать замыкания, рассмотрим в статье далее несколько примеров. Они всегда помогают успешно ориентироваться в выбранном направлении.</p>

39 <h2>Примеры на практике</h2>

40 <p>Внутреннее устройство замыканий понять очень трудно, особенно если опираться только на "примерные задачи". Наглядные примеры продемонстрируют нюансы рассматриваемой темы.</p>

41 <h3>Номер один</h3>

42 <p>Ниже представлен элемент программного кода, написанного в Java Script:</p>

43 <p>Здесь происходит следующее:</p>

44 <ol><li>Функция person() отвечает за возврат внутренней функции displayName().</li>

45 <li>Происходит сохранение последней в переменную peter.</li>

46 <li>После вызывается peter(), где соответствующая переменная содержит на displayName().</li>

47 <li>Через консоль происходит ввод имени Peter.</li>

48 </ol><p>Функция displayName() не обладает переменной с именем name. Из-за этого можно прийти к выводу о том, что соответствующая "операция" способна тем или иным методом получать доступ к переменной, объявленной во внешней по отношению к ней функции, даже когда последняя отработана. Дело все в том, что в приведенном примере displayName() - это замыкание.</p>

49 <h3>Пример два</h3>

50 <p>А вот еще один наглядный пример, который позволяет наглядно увидеть принцип работы рассматриваемой операции:</p>

51 <p>Здесь происходит следующее:</p>

52 <ol><li>В переменной count содержится ссылка на анонимную внутреннюю функцию, которая возвращается посредством getCounter().</li>

53 <li>Count() выступает замыканием и может обращаться к одноименной переменной counter.</li>

54 <li>Counter находится в getCount().</li>

55 <li>Рассматриваемая "операция" может обращаться к переменной counter даже после прекращения работы getCounter().</li>

56 </ol><p>Значение переменной counter не будет сбрасываться в 0 каждый раз, когда происходит вызов count(). Подобная ситуация возникает из-за того, что при активации соответствующей "операции" осуществляется создание новой области видимости. А для getCounter() имеется всего одна подобная "зона". Переменная counter объявлена в области видимости getCounter, значение оной между вызовом count() будет сохраняться без сброса.</p>

57 <h2>Принцип работы</h2>

58 <p>Настало время рассмотреть замыкания более подробно. Ранее было сказано лишь о том, что это такое, а также приведены наглядные примеры. Внутренние механизмы процесса не затрагивались.</p>

59 <p>Чтобы лучше понимать замыкания, требуется разобраться с весьма важными концепциями выбранного языка программирования. Речь идет о контексте и лексическом окружении.</p>

60 <h3>О контексте выполнения</h3>

61 <p>Это абстрактное окружение, в котором код JS вычисляется, а затем реализовывается. Здесь важно запомнить следующие моменты:</p>

62 <ol><li>При выполнении глобального кода манипуляции осуществляются внутри глобального контекста выполнения.</li>

63 <li>Код "операции" будет "инициализироваться" внутри контекста выполнения оной.</li>

64 <li>В определенный момент времени может обрабатываться код только в одном контексте выполнения. Связано это с тем, что JS является однопоточным языком.</li>

65 <li>Управление процессами происходит через стек вызовов.</li>

66 </ol><p>Стек вызовов - своеобразная структура информации, которая устроена по принципу LIFO (последний вошел - первым вышел). Новые составляющие помещаются исключительно в верхней части стека. И именно оттуда происходит изъятие оных.</p>

67 <p>Нынешний контекст выполнения всегда расположен в верхней части стека. Если текущая функция прекращает работать, ее контекст выполнения будет извлекаться из стека. Управление перейдет тому контексту, который был расположен ниже в стеке вызовов.</p>

68 <h4>О процессе наглядно</h4>

69 <p>Используем следующий пример кода, чтобы больше разобраться в стеках вызовов и контексте:</p>

70 <p>Здесь при выполнении кода:</p>

71 <ol><li>Движок создаст глобальный контекст выполнения для обработки глобальной кодификации.</li>

72 <li>При встрече с вызовом функции first() будет создан новый контент для выполнения оной.</li>

73 <li>Далее полученный контекст будет размещен для соответствующей "операции" в верхней части стека.</li>

74 </ol><p>Стек вызовов представлен ниже:</p>

75 <p>При завершении first(), контекст ее выполнения будет извлекаться из стека вызовов. Это дает возможность передачи управления context выполнения, расположенному ниже него. А именно - глобального характера. Далее обрабатывается элемент представленной кодификации, находящийся в глобальной "территории".</p>

76 <h2>Несколько слов о лексическом окружении</h2>

77 <p>Когда JavaScript осуществляет создание контекста выполнения для реализации "операций" или глобальных частей кода, появляется новое лексическое окружение. Оно предназначается для того, чтобы хранить переменные, объявленные в той или иной функции во время обработки оной.</p>

78 <p>Лексическое окружение - структура информации, несущая в себе сведения о соответствии переменных с идентификаторами. Идентификатором выступает имя переменной или "операции". Переменная - ссылка на объект. Может являться значением примитивного характера.</p>

79 <p>В лексическом окружении функции содержатся некие составляющие:</p>

80 <ul><li>запись окружения - пространство, в котором хранятся объявления "манипуляций" и переменных;</li>

81 <li>ссылка на внешнее окружение - своеобразная ссылка, которая позволяет обращаться к родительскому лексическому окружению.</li>

82 </ul><p>Именно ссылки "внешнего типа" выступают в качестве основополагающей для полноценного понимания замыканий.</p>

83 <p>Выше представлен элемент кода, который описывает лексическое окружение.</p>

84 <h3>На что стоит поглядеть</h3>

85 <p>Вот код, который поможет лучше освоить "лексику":</p>

86 <p>Здесь происходит следующее:</p>

87 <ul><li>Движок Джавы будет отвечать за создание глобального контекста выполнения для обработки глобального кода.</li>

88 <li>После этого он создает новое лексическое окружения для того, чтобы хранить переменные и "операции", объявленные в глобальной области видимости.</li>

89 <li>Результатом окажется лексическое окружение:</li>

90 </ul><ul><li>Ссылка на внешнее окружение (outer) стоит в значении null. Связано это с тем, что у глобальной "области видимости" отсутствует "лексика".</li>

91 <li>В процессе создания context для first() возникнет и "лексика" для хранения переменных объявленных в пределе оной и образованных при непосредственном выполнении.</li>

92 <li>Итог получится таким:</li>

93 </ul><ul><li>Ссылка на внешнюю "лексику" устанавливается в значении <globalLexicalEnvironment>. Связано это с тем, что исходный код "операции" расположен в "глобальном пространстве".</li>

94 </ul><p>Стоит обратить внимание на то, что при завершении работы функции контекст будет извлекаться из стеков вызовов. Лексическое окружение может удаляться из памяти или оставаться в ней далее. Все зависит от существования ссылки на соответствующую "лексику" в виде ссылок на внешнее лексическое окружение в других рассматриваемых областях.</p>

95 <h2>Внешние переменные</h2>

96 <p>Локальные переменные - не единственные, к которым можно обратиться из функции. Дополнительно предусматривается вызов внешних "хранилищ":</p>

97 <p>Интерпретатор при доступе к переменной будет в первую очередь пытаться обнаружить переменную в текущем LexicalEnvironment. Лишь после этого, при условии отсутствии оной - во внешнем объекте "хранилищ". В приведенном примере таковым выступает windows.</p>

98 <p>Подобное явление становится доступным из-за того, что ссылка на внешний объект переменных будет храниться в специальном свойстве функции внутреннего характера. А именно - в [[Scope]]. Оно не имеет прямого доступа, но это не значит, что программер должен обходить стороной оную. Знать принципы работы "Скоп" важно при программировании на JS.</p>

99 <p>Интерпретатор при создании "операции" создает для этой функции скрытое свойство [[Scope]]. Оно будет ссылаться на лексическое окружение, в котором оная создавалась.</p>

100 <p>Пример выше предусматривает такие явления:</p>

101 <ul><li>Упомянутый ранее окружением выступает window, что приводит к образованию свойства:</li>

102 </ul><ul><li>Оное будет неизменным. Следует за "операцией", привязывая ее к своему месту рождения.</li>

103 <li>После запуска ее объект переменных LocalEnvironment получит ссылку на внешнюю "лексику" со значением из "Скоп".</li>

104 <li>Когда переменная не будет обнаружена в "манипуляции", произойдет ее поиск во внешней среде.</li>

105 </ul><p>Вывод к внешней переменной происходит за счет alert (username) за счет описанных принципов. В коде все это имеет интерпретацию поиска во внешней области видимости, за пределами функции.</p>

106 <h3>Важные выводы и внешние переменные</h3>

107 <p>В результате изученной информации можно сделать следующие заключения:</p>

108 <ol><li>Каждая "операция" будет при создании получать ссылку [[Scope]] на объект с переменными, в контексте которого она появилась.</li>

109 <li>После запуска создается новый объект с "хранилищами" LexicalEnvironment. Он получит ссылку на внешний объект переменных из [[Scope]].</li>

110 <li>Во время поиска переменных оный произойдет сначала внутри текущего объекта переменных, лишь после - по соответствующей ссылке.</li>

111 </ol><p>На первых порах подобная информация может показаться сложной. Но она позволяет разобраться в более важных для программиста вещах.</p>

112 <h2>Функции - кратко о самом важном</h2>

113 <p>Замыкания в JS напрямую связаны с функциями. В них объявляются не только локальные переменные, но и другие "операции". А значит, целесообразно говорить о вложенности. Такой прием позволяет намного проще реализовывать некоторые программные коды.</p>

114 <h3>Вложенные функции - как применять</h3>

115 <p>Вот пример кода:</p>

116 <p>Он поможет разобраться с эффективным применением вложенных функций при замыканиях. Он предусматривает такие моменты:</p>

117 <ul><li>getFullName() - вспомогательная "операция".</li>

118 <li>Вложенные "манипуляции" получают [[Scope]] вместе с глобальными:</li>

119 </ul><ul><li>Соответствующий прием обеспечит получение getFullName() снаружи lastName и firstName.</li>

120 </ul><p>Стоит обратить внимание на то, что при отсутствии рассматриваемой переменной во внешнем объекте, она будет искаться в "более внешнем" через [[Scope]] внешней "операции".</p>

121 <p>Указанная ранее информация ведет к тому, что последний пример кода (выше) будет успешно работать.</p>

122 <h3>Возврат - return function</h3>

123 <p>Но есть и более сложные ситуации. Пример - внутри одной "операции" будет создана другая, после чего система выведет оную в виде итогового результата. Такая манипуляция рассматривается при создании интерфейсов как "обычная". В виде "операции" может выступать обработчик действий клиента.</p>

124 <p>Рассматриваемый случай предусматривает счетчик-"манипуляцию", которая будет считывать собственные вызовы. Он возвращает текущее количество оных.</p>

125 <p>Выше makeCounter будет создавать счетчик. Результат - два независимых "элемента" - counter и counter2. Каждый из них незаметно отвечает за сохранение количество вызовов в переменной внешнего типа currentCount. Ей обладает каждый счетчик.</p>

126 <h4>Что здесь происходит</h4>

127 <p>Если рассмотреть кодификацию подробно, будет происходить следующее:</p>

128 <ul><li>В строчке (*) запустится makeCounter, создастся LexicalEnvironment для переменных нынешнего вызова. У "операции" лишь одна переменная под названием var currentCount. Она выступит свойством соответствующего объекта. Сначала инициализируется в undefined, после обработки ей будет присвоено значение 1.</li>

129 </ul><ul><li>Когда будет обрабатываться makeCounter, произойдет создание "операции" в строчке (**), что приведет к присваиванию внутреннего свойства [[Scope]]. Она получит ссылку на нынешнее LexicalEnvironment.</li>

130 <li>Вызов "МейкКантер" завершается. "Манипуляция" (**) будет возвращена и сохранена во внешней переменной counter (*).</li>

131 <li>В counter запишется "операция":</li>

132 </ul><ul><li>Counter, возвращенная из "МейкКантер" будет помнить об окружении, в котором возникла. Это происходит за счет "Скоп".</li>

133 <li>При вызове counter неизвестно, что произойдет, так как она содержит всего одну строку - с return. Собственные объект переменных (LE) окажется пустым.</li>

134 <li>За счет свойства [[Scope]] указывается внешнее окружение. Для увеличения и возврата currentCount интерпретатор будет искать в нынешнем объекте переменных LE. Оные не обнаружатся.</li>

135 <li>Осуществляется переход на внешний объект, где "предмет розыска" будет обнаружен, изменен и возвращен:</li>

136 </ul><p>Переменные во внешних областях видимости удается не только считывать, но и корректировать.</p>

137 <p>Приведенный пример в console продемонстрировал независимость взаимного характера имеющихся счетчиков. Это из-за того, что при активации makeCounter будет создаваться собственный объект переменных LE с "личными" свойствами currentCount. Именно на него очередной счетчик будет получать ссылку [[Scope]].</p>

138 <h2>Как быстро освоить тему</h2>

139 <p>Изучая замыкание, можно легко запутаться. Это приводит к тому, что разобраться с выбранным направлением оказывается весьма проблематично. Но выход есть всегда - это дистанционные тематические курсы.</p>

140 <p>Срок обучения - от нескольких месяцев до года. Предложения для начинающих и опытных разработчиков. Гарантирована практика, а также контакты с опытными разработчиками. Можно в кратчайшие сроки выучить несколько языков программирования и углубиться в них. В конце обучения выдается электронный сертификат, подтверждающий знания.</p>

141 <a></a>