JS Scope Flashcards
Область видимості (Scope)
Область видимості - набір правил, які регулюють як рушій (двіжок) може шукати змінну за її ідентифікатором і знаходити її або в поточній області видимості, або в одній із зовнішних областей видимості.
Цей пошук може здійснюватися для цілей присвоювання значення змінній, що є LHS (left-hand-side) посиланням, або для цілей одержання значення змінної, що є RHS (right-hand-side) посиланням.
Область видимості змінної - частина контексту виконання, в якому ця змінна існує, тобто на неї можна посилатися. Області видимості можуть бути вкладені.
Процес обробки і виконання JS коду
JS двіжок (рушій) – спеціалізована програма, що виконує скрипти JavaScript, переважно, в браузерах, але також і у серверній реалізації. Двіжок, компілятор і область видимості взаємодіють між собою для обробки і виконання програми.
Компілятор парсить і генерує код. Двіжок відповідає за компіляцію від початку до кінця і виконання JavaScript програми. Область видимості збирає і підтримує список всіх оголошених змінних, і стежить за виконанням строгого набору правил про те, як ці змінні доступні для коду, що виконується в даний момент.
Коли оголошується змінна, наприклад var a = 2; виконується наступне:
Зустрівши var a, Компілятор просить Область видимості подивитися чи існує вже змінна a в колекції зазначеної області видимості. Якщо так, то Компілятор ігнорує це оголошення змінної і рухається далі. В іншому випадку, Компілятор просить Область видимості оголосити нову змінну a в колекції зазначеної області видимості.
Потім Компілятор генерує код для двіжка для подальшого виконання, щоб обробити присвоювання a = 2. Код, який Движок запускає, спочатку запитує Область видимості чи є змінна з ім’ям a в колекції поточної області видимості. Якщо так, то Движок використовує цю змінну. Якщо немає, то Движок шукає у вищій області видимості.
Підводячи підсумки: для присвоювання значення змінній виконуються дві окремі дії: по-перше, Компілятор оголошує змінну (якщо вона не була оголошена до цього в поточній області видимості), і по-друге, коли виконує код, Движок шукає цю змінну в Області видимості і, якщо знаходить, привласнює їй значення.
Компіляція JS
JS не компілюється заздалегідь, для JavaScript, компіляція в багатьох випадках відбувається за всього лише мікросекунди перед виконанням коду.
Компіляція умовно включає три етапи:
1) Розбиття на лексеми: розбиття рядка символів на змістовні (для мови) частини, звані лексемами. Наприклад, уявіть програму: var a = 2;. Ця програма, цілком ймовірно, буде розбита на наступні лексеми: var, a, =, 2 і ;. Пробіл може бути збережений або не збережений як лексема в залежності від того має він сенс чи ні.
2) Парсинг: бере поток (масив) лексем і перетворює його в дерево вкладених елементів, які представляють граматичну структуру програми. Це дерево називається "AST" (Abstract Syntax Tree, дерево абстрактного синтаксису). Таке дерево для var a = 2; може починатися з вузла верхнього рівня з назвою VariableDeclaration, з дочірнім вузлом Identifier (чиє значення дорівнює a) і ще одним дочірнім вузлом AssignmentExpression, у якого теж є дочірній вузол NumericLiteral (чиє значення дорівнює 2).
3) Генерація коду: процес перетворення AST в байткод.
RHS і LHS пошук змінної в області видимості
На етапі виконання коду рушій виконує два типи пошуку змінних - лівосторонній та правосторонній (LHS та RHS).
Лівосторонній пошук відбувається, коли значення присвоюються змінним, як у var a = 2;.
Правосторонній пошук відбувається під час отримання значень змінних. Наприклад, у console.log(a) двигун буде шукати значення a.
Обидва типи пошуку починають шукати змінну в поточній області видимості і рухаються вгору, поки не знайдуть її, або не досягнуть глобальної області видимості, так і не знайшовши її.
Два типи пошуку поводяться по-різному, коли змінна не була оголошена (тобто не була знайдена в жодній області видимості).
Якщо для лівостороннього пошуку рушій так і не знаходить змінну, створюється глобальна змінна (коли виконання відбувається у не строгому режимі) або буде викинута помилка ReferenceError (коли виконання відбувається у строгому режимі).
Якщо для правостороннього пошуку рушій не знаходить змінну в ланцюзі областей видимості, буде викинута помилка ReferenceError.
var magicalCreature = ‘unicorn’; //lhs lookup (assigning the value of magicalCreature)
var x = function () { //lhs lookup (assigning the value of x)
var y = function (color) { //lhs lookup (assigning the value of y)
console.log(color, magicalCreature); //2 rhs lookups (retreiving the value of color and retreiving the value of magicalCreature)
}
y('pink and yellow'); //rhs lookup (retreiving the value of y) and lhs lookup (by passing an argument to y we are assigning the value 'pink and yellow' to the variable 'color')
}
x(); //rhs lookup (retreiving the value of x)
Вкладена область видимості
Так само як блок або функція вкладається всередину іншого блоку або функції, області видимості вкладаються всередину інших областей.
Тому, якщо змінна не знаходиться в поточній області видимості, рушій заглядає в наступну зовнішню по відношенню до цієї область видимості, продовжуючи до тих пір, поки не знайде змінну або поки не досягне глобальної області видимості.
TypeError
Ця помилка виникає, коли операнд або аргумент, переданий в функцію, не сумісний з типом, очікуваним оператором або функцією.
Лексична (JS) і динамічна області видимості
Лексична область видимості - це область видимості, яка визначається в момент оголошення функцій та змінних в коді. Визначається під час розбиття коду на лексеми.
(На відміну від динамічної області видимості, при якій область видимості визначається в момент виклику функції).
Фаза розбиття коду на лексеми під час компіляції дізнається де і як оголошені всі ідентифікатори, і передбачає як їх будуть шукати під час виконання.
Не важливо звідки викликається функція, її лексична область видимості визначена тільки тим, де функція була оголошена.
Це розташування підказує JavaScript рушію, де він повинен виконувати LHS та RHS пошук , інакше кажучи, ланцюг областей, по яких йому потрібно рухатися вгору, щоб знайти змінну.
function foo(a) {
var b = a*2;
function bar(c) {
console.log(a,b,c,);
}
bar(b*3);
}
foo(2); // 2,4,12
В цьому прикладі є три вкладених області видимості.
1) глобальна область видимості, в якій є лише один ідентифікатор: foo.
2) область видимості foo, яка включає в себе три ідентифікатора: a, bar і b.
3) область видимості bar і вона включає в себе всього один ідентифікатор: c.
Зони областей видимості визначаються тим, де написані блоки області видимості, які послідовно вкладені одна в одну.
У наведеному вище коді, рушій виконує оператор console.log (..) і йде шукати три змінних a, b, і c, на які є посилання. Спочатку він починає з самої внутрішньої зони області видимості, області видимості функції bar (..). Він не знайде там a, тому піде на рівень вище, назовні до наступної найближчої зони області видимості, області видимості foo (..). Там він знайде a, і тому використовує цю a. Те ж саме і для b. А ось c він знайде всередині bar (..).
Якби c була і всередині bar (..), і всередині foo (..), то оператор console.log (..) знайшов б і використав ту, що в bar (..), ніколи не чіпаючи таку ж з foo ( ..).
Затінення (shadowing)
Одне і те ж ім’я ідентифікатора може бути зазначено в декількох вкладених областей видимості, що називається “затінення (shadowing)” (внутрішній ідентифікатор “затінює (shadows)” зовнішній).
eval і with
Є два механізми, які можуть обманути лексичну область видимості: eval (..) і with.
Функція eval (..) приймає string як аргумент і інтерпретує вміст рядка ніби він є кодом, написаним в цій точці програми.
function foo(str, a) {
eval( str ); // обман!
console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3
Оператор with бере об’єкт, у якого є нуль або більше властивостей, і трактує цей об’єкт як окрему лексичну область видимості, а його властивості як лексично визначені ідентифікатори в цій “області видимості”.
function foo(obj) {
with (obj) {
a = 2;
}
}
var o1 = {
a: 3
};
var o2 = {
b: 3
};
foo( o1 );
console.log( o1.a ); // 2
foo( o2 );
console. log( o2.a ); // undefined
console. log( a ); // 2 — Упс, утекшая глобальная переменная!
Принцип дизайну ПЗ “Принцип найменших привілеїв” (Principle of least Privilege)
В дизайні ПЗ, такому як API для модуля / об’єкта, слід виставляти назовні тільки те, що мінімально необхідно для виконання робочої цілі і “ховати” все інше.
Функції - найпоширеніші одиниці області видимості в JavaScript. Змінні і функції, які оголошуються всередині іншої функції, по суті “приховані” від будь-якої з зовнішніх “областей видимості”.
Іншою перевагою приховання змінних і функцій всередині області видимості - уникнути ненавмисного перезапису значень.
function foo() {
function bar(a) {
i = 3; // меняем `i` в окружающей области видимости цикла for-loop
console.log( a + i );
}
for (var i=0; i<10; i++) {
bar( i * 2 ); // упс, впереди бесконечный цикл!
}
}
foo();
Присвоєння i = 3 всередині bar (..) несподівано перезаписує i, яка була оголошена в foo (..) всередині циклу for-loop.Це призведе до нескінченного циклу, оскільки i має фіксоване значення 3 і завжди буде залишатися <10.
Бібліотеки, що завантажуються в програму, можуть без вступати в суперечність між собою, якщо вони не сховають належним чином свої внутрішні/приватні функції і змінні.
Такі бібліотеки, як правило, створюють єдине оголошення змінної, часто об’єкта, з досить унікальним ім’ям в глобальному контексті. Цей об’єкт потім використовується як “простір імен” для цієї бібліотеки, де функціональність створюється в якості властивостей цього об’єкта, замість того, щоб створювати ідентифікатори в області видимості на самому верхньому рівні.
var MyReallyCoolLibrary = {
awesome: "stuff",
doSomething: function() {
// ...
},
doAnotherThing: function() {
// ...
}
};
Функціональні вирази
setTimeout( function(){
console.log(“I waited 1 second!”);
}, 1000 ); // функціональний вираз в якості параметру функції
Функціональні вирази можуть бути анонімними, але оголошення функцій повинні мати ім’я.
var x = function () {
console.log('I'm an anonymous function expression')
}
var y = function doMagic () {
console.log('I'm a named function expression')
}
(function () {
console.log(‘I’m a self-invoking function expression’)
})()
(function doMagic () {
console.log(‘I’m a named self-invoking function expresion’)
})()
setTimeout(function () {
console.log(‘I’m also an anonymous function expression)
}, 1000);
setTimeout(function timeoutHandler () {
console.log(‘I’m also a named function expression)
}, 1000);
IIFE Immediately (негайно) Invoked (викликаємий) Function (функціональний) Expression (вираз)
(function foo(){
var a = 3;
console.log( a ); // 3
})();
Перша огортаюча пара ( ) робить функцію виразом, а друга пара ( ) виконує функцію.
Будь-які змінні, оголошені всередині IIFE, не будуть доступні за межами функції.
(Function foo () {..})(); як вираз означає, що ідентифікатор foo може бути знайдений тільки в області видимості самої функції, але не у зовнішній області видимості.
Інша форма IIFE: (function(){ .. }()).
Блочна область видимості (try/catch, let, const)
Блок catch в конструкціїї try/catch створює блочну область видимості.
Ключове слово let приєднує оголошення змінної до області видимості того блоку (зазвичай пара {..}), в якому воно міститься.
Можна створити блок для використання let просто включаючи пару {..} в будь-якому місці, де цей оператор є валідним синтаксисом.
var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar );
console.log( bar );
}
console.log( bar ); // ReferenceError
const також створює змінну блочної області видимості, але її значення фіксовано (константа). Будь-яка спроба змінити це значення пізніше призведе до помилки.
Вспливання змінних (Hoisting)
Рушій бачить var a = 2; як два окремих оператора, перший - як завдання фази компіляції, а другий - як завдання фази виконання.
Це призводить до того, що всі оголошення в області видимості, незалежно від того де вони з’являються, обробляються першими, до того, як сам код буде виконаний. Можна подумки уявити собі, ніби оголошення змінних і функцій, піднімаються на початок їх відповідних областей видимості.
Самі оголошення піднімаються, а присвоювання і навіть присвоювання функціональних виразів, не піднімаються.
foo(); // не ReferenceError, але TypeError!
var foo = function bar() {
// ...
};
Ідентифікатор змінної foo піднімається на початок глобальної області видимості, тому foo() не викличе помилки ReferenceError. Але в foo поки ще немає значення. Тому, foo() намагається викликати значення undefined, яке є неправильною операцією з викликом помилки TypeError.
Спершу піднімаються функції, а потім змінні.
Дублюючі оголошення var ігноруються, послідовні оголошення функції перекривають попередні.
foo(); // 3
function foo() {
console.log( 1 );
}
var foo = function() {
console.log( 2 );
};
function foo() {
console.log( 3 );
}
foo(); // “b”
var a = true;
if (a) {
function foo() { console.log( "a" ); }
}
else {
function foo() { console.log( "b" ); }
}
Локальна і глобальна області видимості
Глобальний контекст - ідентифікатор доступний в усьому тексті програми.
Локальна область видимості - ідентифікатор доступний тільки всередині певної функції.
Замикання
Замикання - це комбінація функції і лексичного оточення (контексту), в якому ця функція була визначена.
Лексичне оточення – словник, який створюється в момент виклику функції і містить в собі всі локальні змінні, а також посилання на зовнішнє лексичне оточення. Зовнішнє лексичне оточення – оточення, в якому функція була оголошена. (об’єкт в контексті якого функція була оголошеня, в свою чергу цей обєкт може посилатися на вище розташований обєкт і так далі)
Замикання (closure) - коли функція, створена в одній області видимості, запам’ятовує своє лексичне оточення навіть у тому випадку, коли вона виконується за межами своєї області видимості.
Функції в JavaScript зберігають контекст в якому були оголошені.
function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz();
