Лексична область видимості в JavaScript
Що таке лексична область видимості (Lexical Scope)
Лексична область видимості - це область, визначена розташуванням коду в момент його написання, а не під час виконання.
Простіше кажучи:
Яка функція має доступ до яких змінних, вирішується на етапі оголошення, а не виклику.
Чому називається лексична
Слово "лексична" (від англ. lexical) означає "така, що стосується тексту програми". Тобто JS "запам'ятовує" розташування функцій і блоків коду під час парсингу, коли читає вихідний код, а не коли ти викликаєш функції.
Приклад 1: Просте вкладення
let a = 10;
function outer() {
let b = 20;
function inner() {
let c = 30;
console.log(a, b, c);
}
inner();
}
outer();Тут:
innerбула оголошена всерединіouter.- Тому вона має доступ до змінних
outerіglobal.
JS запам'ятав структуру при оголошенні, а не при виклику.
Ланцюжок областей видимості:
inner -> outer -> globalПриклад 2: Різниця між "лексичною" і "динамічною" областю
Деякі мови (наприклад, Bash чи старий Lisp) використовують динамічну область видимості - вона визначається тим, хто викликав функцію.
У JavaScript - лексична: вона визначається тим, де функцію написано.
let x = "глобальний";
function foo() {
console.log(x);
}
function bar() {
let x = "локальний";
foo(); // хто викликав foo? bar, але...
}
bar();Результат:
глобальнийТому що foo оголошена в глобальній області - і JS шукає x там,
а не в місці, звідки її викликали (bar).
Це і є суть лексичної області: "шукай там, де функцію написано, а не де викликано".
Приклад 3: Замикання - практичний прояв лексичної області
function makeCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const counter = makeCounter();
counter(); // 1
counter(); // 2Тут:
- внутрішня функція запам'ятала лексичну область
makeCounter - і навіть після її завершення все ще "бачить"
count.
Це можливо тільки тому, що область видимості - лексична, а не динамічна.
Візуально
[ Global Scope ]
a = 10
↓
[ outer() Scope ]
b = 20
↓
[ inner() Scope ]
c = 30Функція inner завжди "знає", де шукати a і b - це визначено на етапі оголошення.
Підсумок
| Поняття | Опис |
|---|---|
| Лексична область видимості | Область, де функція "бачить" змінні, визначена розташуванням у вихідному коді |
| Визначається коли | Під час написання коду, а не при виконанні |
| Навіщо потрібна | Щоб JS знав, які змінні доступні кожній функції |
| Пов'язано з | Lexical Environment, Scope Chain, Closures |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.