Как движок JavaScript ищет ссылки на переменные в определенном scope?

Question

JavaScript использует механизм, называемый "лексическое окружение", для поиска ссылок на переменные в определенном scope (области видимости). Когда функция вызывается, создается новое лексическое окружение, которое включает в себя ссылки на переменные, объявленные в родительских scopes. Если переменная не найдена в текущем scope, движок продолжает поиск в родительских scopes до тех пор, пока не найдет переменную или не достигнет глобального scope.

YeaHub · Accepted Answer

Движок JavaScript использует лексическое окружение для управления переменными и их областью видимости. Лексическое окружение — это структура данных, которая хранит переменные, функции и другие значения, связанные с определенным контекстом выполнения. Понимание того, как движок ищет ссылки на переменные, помогает избежать ошибок и лучше организовать код.Определение лексического окружения:Лексическое окружение состоит из двух основных компонентов:Environment Record: Содержит все переменные и функции, объявленные в данной области видимости.Ссылка на родительское окружение (Outer Environment Reference): Указывает на родительское лексическое окружение.При создании функции создается новое лексическое окружение, которое включает все переменные из родительского окружения.Поиск переменных:Когда движок JavaScript ищет переменную, он выполняет следующие шаги:Сначала он проверяет текущее лексическое окружение (local scope).Если переменная не найдена, движок переходит к родительскому окружению и ищет там.Этот процесс продолжается до тех пор, пока переменная не будет найдена или не будет достигнут глобальный scope.Например:let a = 1; 
function outer() {
	let b = 2;    
	function inner() {    
		let c = 3;        
		console.log(a, b, c); // Здесь доступ к a, b и c    
	}    
	inner(); 
} 
outer();В этом примере, когда функция inner пытается получить доступ к переменным, движок выполняет следующий поиск:Сначала ищет c в своем локальном окружении (находит).Затем ищет b в родительском окружении outer (находит).Наконец, ищет a в глобальном окружении (находит).Проблема "hoisting":Важно помнить, что объявления переменных с помощью var поднимаются (hoisted) в верхнюю часть функции или глобального контекста. Это означает, что переменная может быть доступна в функции, даже если она была объявлена позже в коде:console.log(x); // undefined 
var x = 5; 
console.log(x); // 5В этом случае, хотя x объявлена после первого console.log, движок JavaScript поднимает объявление, и x существует, хотя и не имеет значения до присваивания.Применение:Понимание, как движок ищет переменные в scope, помогает:Избежать ошибок, связанных с областью видимости.Правильно организовывать код, используя замыкания и функции.Оптимизировать производительность, минимизируя доступ к глобальным переменным.Таким образом, знание о том, как JavaScript управляет областью видимости и поиском переменных, позволяет разработчикам писать более чистый и предсказуемый код.