Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Важное примечание</h2>

2 Изначально в начале конспекта и урока речь шла о глобальном и локальном окружении, но объяснялась фактически глобальная и локальная область видимости. В видео эта тема до сих пор называется "глобальное и локальное окружение", текстовая версия урока исправлена.

3 Прежде, чем приступить к уроку, разберёмся с терминологией:

4 <ul><li>Область видимости (scope) - это широкое понятие, означающее, грубо говоря, "интерпретатор в разных местах кода видит разные штуки".</li>

5 <li>Лексическая область видимости (Lexical scoping) - это конкретный механизм, одно из правил для области видимости. Этот механизм применяется в JavaScript и большинстве других языков. Под лексической областью видимости можно понимать просто механизм поиска значений: смотрим в текущей области, если нет - идём на уровень выше, и так далее. Слово "лексический" означает, что видимость задаётся исключительно текстом программы, исходным кодом. То есть можно смотреть на программу, не запуская её, и понять область видимости в любой точке. В других языках может быть не лексический механизм, а динамический (<a>dynamic scope</a>).</li>

6 <li>Окружение (environment) - это область памяти, где записываются идентификаторы и значения из областей видимости. Не путайте с окружением, как средой исполнения.</li>

7 </ul>Путаница возникает ещё потому, что в разделе про Область видимости мы смотрим на примеры, которые работают по правилу "лексическая область видимости". От этого никуда не деться, так как язык JavaScript работает именно так.

8 <h2>Транскрипт урока</h2>

9 <h3>Часть I. Окружение</h3>

10 Давайте поговорим об окружении. Наша планета огромна, но мы все делим её. Если вы построите химический завод, неплохо бы изолировать его от окружающего мира, чтобы то, что в нём происходит оставалось внутри. Вы можете сказать, что в этом здании своё окружение, микроклимат, изолированный от внешней окружающей среды. В программировании такая изоляция называется областью видимости.

11 Ваша программа имеет подобную структуру по похожим причинам. То, что вы создаёте снаружи - снаружи функций, инструкций if, циклов и других блоков кода - находится во внешней, глобальной области видимости.

12 Константа age , функция multiplier и переменная result - имеют "глобальную область видимости". Область видимости означает "область, где компоненты доступны".

13 Внутри функции multiplier есть константа x. Поскольку она внутри блока кода, это локальная константа, а не глобальная. Она видна только внутри этой функции, но не снаружи. У неё локальная область видимости.

14 В функции multiplier есть ещё один компонент из локальной области видимости - аргумент num. Он не задан так же чётко, как константы или переменные, но ведёт себя почти как локальная переменная.

15 У нас нет доступа к x снаружи, как будто её там не существует:

16 console.log вызывается в глобальном окружении, а x не задан в этом глобальном окружении. Поэтому мы получаем Reference Error.

17 Мы можем задать x глобально:

18 Теперь существует глобальный x и его значение было выведено на экран, но локальный x внутри функции multiplier по-прежнему виден только внутри этой функции. Эти два x не имеют ничего общего друг с другом, они находятся в разных областях видимости. Они не схлопываются в одно целое, несмотря на то, что у них одно и то же имя.

19 Любой блок кода между фигурными скобками имеет локальную область видимости. Вот пример с блоком if:

20 То же работает для циклов while и for.

21 Ок, локальное не доступно снаружи. Но глобальное доступно везде. Даже внутри чего-то? Да!

22 Эта глобальная переменная a изменилась внутри функции changer. Функция вообще выполняет что-то только когда её вызывают, а не когда её определяют, так что вначале a это 0, но после того как вызывается changer, a становится 1.

23 Хоть это и заманчиво всё помещать в глобальную область видимости и забыть о сложностях областей видимости - это ужасная практика. Глобальные переменные делают ваш код невероятно хрупким. В таком случае что угодно может сломать что угодно. Поэтому избегайте глобальной области видимости, храните вещи там, где им место.

24 <h3>Часть II. Лексическая область видимости</h3>

25 Взгляните на эту программу:

26 Функция multiplier возвращает произведение a и b. a задано внутри, а b - нет.

27 Пытаясь решить умножение a * b, JavaScript ищет значения a и b. Он начинает искать локально и выходит наружу, по одной области видимости за шаг, пока он не найдёт то, что ему нужно или пока не поймёт, что это невозможно найти.

28 Поэтому в данном примере JavaScript начинает с поиска a внутри локальной области видимости - внутри функции multiplier. Он находит значение сразу и переходит к b. Невозможно найти значение b в локальной области видимости, поэтому он переходит к наружной области. Тут он находит b - это 10. a * b превращается в 5 * 10, а затем в 50.

29 Весь этот кусок кода мог бы быть внутри другой функции, и ещё внутри другой функции. И если бы b не нашлась здесь, JavaScript продолжил бы искать b за пределами функции, слой за слоем.

30 Заметьте, что a = 7 не затронула вычисления, a была найдена внутри, поэтому внешняя a не сыграла роли.

31 Этот механизм называется лексической областью видимости. Область видимости любого компонента определяется местом расположения этого компонента внутри кода. И вложенные блоки имеют доступ к их внешним областям видимости.

32 <h3>Часть III. Замыкания</h3>

33 Большинство языков программирования имеют что-то вроде области видимости или окружения, и этот механизм позволяет существовать замыканиям. Замыкание - это всего лишь модное название функции, которая запоминает внешние штуки, используемые внутри.

34 Перед тем, как мы продолжим, давайте вспомним, как функции создаются и используются:

35 f - довольно бесполезная функция, она всегда возвращает 0. Весь этот набор состоит из двух частей: константы и самой функции.

36 Важно помнить, что эти два компонента раздельны. Первый - константа с именем f. Её значение могло бы быть числом или строкой. Но в данном случае её значение - функция.

37 Мы использовали аналогию в предыдущих уроках: константы как листы бумаги - имя на одной стороне, значение на другой. Следовательно, f - лист бумаги с f на одной стороне и описанием запускаемой функции на другой.

38 Когда вы вызываете эту функцию, вот так:

39 … создаётся новый ящик, основываясь на описании на этом листе бумаги.

40 Ок, вернёмся к замыканиям. Рассмотрим следующий код:

41 Функция createPrint создаёт константу name и затем функцию с именем printName. Обе они локальные для функции createPrint, и доступны только внутри createPrint.

42 У самой printName нет локальных компонентов, но у неё есть доступ к области видимости, где она сама находится, внешней области, где задана константа name.

43 Затем функция createPrint возвращает функцию printName. Помните, определения функций - это описания запущенных функций, просто фрагменты информации, как числа или строки. Поэтому мы можем вернуть определение функции, как мы возвращаем число.

44 Во внешней области видимости мы создаём константу myPrint и задаём ей значение, которое возвращает вызов функции createPrint(). Этот вызов возвращает функцию, так что теперь myPrint - это функция. Вызовите её, и на экран выведется "King".

45 Тут есть странная штука: эта константа name была создана внутри функции createPrint. Функция была вызвана и исполнена. Как мы знаем, когда функция заканчивает работу, она больше не существует. Этот магический ящик исчезает со всеми своими внутренностями.

46 НО он возвратил другую функцию, и уже она как-то запомнила константу name. Поэтому когда мы вызывали myPrint(), она вывела "King" - запомненное значение, при том, что область видимости, где оно было задано больше не существует.

47 Функция, которая была возвращена из createPrint, называется замыканием. Замыкание - это сочетание функции и окружения, где она была задана. Функция "замкнула" в себе некоторую информацию из области видимости.

48 Это может выглядеть как JavaScript-фокус, но замыкания, когда их используют разумно, могут сделать код приятней, чище и проще для чтения. И сама идея возврата функций тем же способом, которым можно возвращать числа и строки, даёт больше возможностей и гибкости.

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

50 <h2>Выводы</h2>

51 <ul><li>Область видимости(scope) компонентов - это местоположение, где эти компоненты доступны.</li>

52 <li>Компоненты, созданные снаружи функций, инструкций с if, циклов и так далее, находятся вглобальной области видимости</li>

53 <li>Фигурные скобки { } задают новуюлокальную область видимости</li>

54 </ul><h3>Глобальная против локальной</h3>

55 Локальные константы и переменные не видимы снаружи их области видимости:

56 Но если x представлен глобально, то он доступен:

57 Возможен доступ к внешней области видимости:

58 Функция фактически производит что-то, только когда она вызывается, а не задаётся, поэтому изначально a это 0, но после того, как вызвана changer, a становится 1.

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

60 JavaScript пытается найти значение в текущем окружении. Но значение не находится и JavaScript выходит наружу, на один уровень за попытку, пока не найдёт значение или не поймет, что значение невозможно найти.

61 Здесь, в выражении a * b , функция multiplier использует локальную a (потому что она обнаружена локально), и наружную b (потому что локально b найдена не была).

62 <h3>Замыкания</h3>

63 myPrint - это функция, которая была возвращена createPrint. Несмотря на то, что вызов createPrint окончен и константы name больше не существует, значение запомнено в myPrint.

64 Этозамыкание: сочетание функции и окружения, где она была заявлена.