По определению, лексическое окружение — это структура данных, которая содержит сопоставление идентификатор-переменная. Итак, если мы возьмем простую функцию с переменными внутри нее, лексическое окружение будет содержать сопоставление идентификатор-переменная этих переменных.

Самое интересное здесь то, что в JavaScript лексическое окружение функции также содержит отображение переменной-идентификатора ее родителя. Проще говоря, лексическое окружение функции представляет собой комбинацию локальной памяти и лексического окружения ее родителя.

Давайте углубимся в пример, не сосредотачиваясь на определениях и жаргоне.

Сосредоточьтесь на приведенном ниже фрагменте кода.

var c = 3;
function parent(){
	var a = 1;

	function child(){
		var b = 2;
                console.log(b);
                console.log(a);
                console.log(c);
	}

	child();
}

parent();

Давайте посмотрим на стек вызовов параллельно.

Когда мы выполняем приведенный выше фрагмент кода, функция child пытается найти переменную b в своей локальной памяти. Поскольку он есть, он выводит b на консоль. Затем он пытается найти переменную a в своей локальной памяти, но ее там нет. Таким образом, она пытается найти a в локальной памяти своего родителя, потому что функция child имеет локальную память своего родителя в своем собственном лексическом окружении. То же самое происходит при попытке записать переменную c, поскольку дочерняя функция наследует память глобального контекста выполнения через лексическое окружение функции parent, поскольку глобальный контекст выполнения является родителем функции parent.

Это все, что нужно знать о лексическом окружении в JavaScript. Довольно простая, но очень полезная функция.

Спасибо за чтение!

Если вам нравится то, что вы читаете, пожалуйста, нажмите кнопку аплодисментов и поддержите.