Scope chain (ланцюжок областей видимості)
Що таке Scope Chain (ланцюжок областей видимості)
Ланцюжок областей видимості - це механізм, за допомогою якого JavaScript знаходить змінні. Коли код звертається до змінної, рушій шукає її в поточній області видимості, а якщо не знаходить, йде "вгору по ланцюжку", до батьківських областей.
Простіше кажучи:
Scope chain - це ланцюжок посилань на зовнішні лексичні оточення, через які рушій шукає змінні.
Як це працює
Кожна функція в JS створює своє лексичне оточення (Lexical Environment). І в цьому оточенні зберігається посилання на зовнішнє оточення, тобто на те місце, де функцію було оголошено, а не викликано.
Саме ці посилання і утворюють ланцюжок областей видимості.
Приклад 1: проста ланцюжок
let a = 10;
function outer() {
let b = 20;
function inner() {
let c = 30;
console.log(a, b, c);
}
inner();
}
outer();Що станеться при виклику inner():
| Рівень | Що доступно | Де шукає змінні |
|---|---|---|
| inner() | c = 30 | Спочатку шукає c -> знайшов |
| outer() | b = 20 | Шукає b -> знайшов |
| global | a = 10 | Шукає a -> знайшов |
Ланцюжок виглядає так:
inner -> outer -> globalЯкби ми написали console.log(d), пошук пройшов би весь ланцюжок і закінчився б помилкою:
ReferenceError: d is not definedПриклад 2: замикання
function outer() {
const outerVar = 'outside';
return function inner() {
console.log(outerVar);
};
}
const fn = outer();
fn();Тут функція inner запам'ятала посилання на своє зовнішнє оточення outer, і це теж частина ланцюжка областей видимості.
Ланцюжок:
inner -> outer -> globalЗавдяки цьому працює замикання (closure) - коли внутрішня функція отримує доступ до змінних зовнішньої, навіть після її завершення.
Приклад 3: змінні з однаковими іменами
let x = 1;
function foo() {
let x = 2;
function bar() {
let x = 3;
console.log(x);
}
bar();
}
foo();Вивід:
3Чому:
- JS шукає
xу поточному контекстіbar-> знайшовx = 3. - Далі по ланцюжку (
foo,global) не йде, тому що вже знайшов збіг.
Підсумок
| Термін | Опис |
|---|---|
| Scope (область видимості) | Набір змінних, доступних у конкретній частині коду |
| Lexical Environment | Внутрішній об'єкт, де зберігаються змінні і посилання на зовнішнє оточення |
| Scope Chain | Ланцюжок усіх лексичних оточень, через які рушій шукає змінні |
Візуально
[ Global Scope ]
^
[ outer() Scope ]
^
[ inner() Scope ]Якщо inner не знаходить змінну, йде вгору по стрілці, поки не знайде або не дійде до глобального контексту.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.