JavaScript Закриття
JavaScript змінні можуть належати до локальної або глобальної області дії.
Глобальні змінні можна зробити локальними (приватними) за допомогою закриття.
Глобальні змінні
Отже, function
може отримати доступ до всіх змінних, визначених всередині функції, як це:
Але function
також може отримати доступ до змінних, визначених поза функцією, як це:
В останньому прикладі a є глобальною змінною.
На вебсторінці глобальні змінні належать сторінці.
Глобальні змінні можуть використовуватися (і змінюватися) усіма іншими скриптами на сторінці.
У першому прикладі a є локальною змінною.
Локальна змінна може використовуватися лише всередині функції, де вона визначена. Вона прихована від інших функцій та іншого коду скриптів.
Глобальні та локальні змінні з однаковою назвою є різними змінними. Змінюючи одну, не змінюється інша.
Примітка
Змінні, створені без ключового слова оголошення (var
, let
або const
) завжди є глобальними, навіть якщо вони створені всередині функції.
Тривалість життя змінної
Глобальні змінні діють, доки сторінку не буде відкинуто, наприклад, коли ви переходите на іншу сторінку або закриваєте вікно.
Локальні змінні мають короткий термін служби. Вони створюються під час виклику функції та видаляються після завершення роботи функції.
Зустрічна дилема
Припустімо, що ви хочете використовувати змінну для підрахунку чогось і хочете, щоб цей лічильник був доступний для всіх функцій.
Ви можете використати глобальну змінну та function
, щоб збільшити лічильник:
Приклад
// Запустити лічильник
let counter = 0;
// Функція збільшення лічильника
function add() {
counter += 1;
}
// Викликати add() 3 рази
add();
add();
add();
// Тепер лічильник має бути 3
Спробуйте самі »
Існує проблема з наведеним вище рішенням: будь-який код на сторінці може змінити лічильник без виклику add().
Лічильник має бути локальним для функції add()
, щоб запобігти зміні іншого коду:
Приклад
// Запустити лічильник
let counter = 0;
// Функція збільшення лічильника
function add() {
let counter = 0;
counter += 1;
}
// Викликати add() 3 рази
add();
add();
add();
// Лічильник тепер має бути 3. Але він 0
Спробуйте самі »
Це не спрацювало, оскільки ми відображаємо глобальний лічильник замість локального.
Ми можемо видалити глобальний лічильник і отримати доступ до локального, дозволивши функції повертати його:
Приклад
// Функція збільшення лічильника
function add() {
let counter = 0;
counter += 1;
return counter;
}
// Викликати add() 3 рази
add();
add();
add();
// Тепер лічильник має бути 3. Але він 1.
Спробуйте самі »
Це не спрацювало, оскільки ми скидали локальний лічильник кожного разу, коли ми викликали функцію.
Внутрішня функція JavaScript може вирішити цю проблему.
Вкладені функції JavaScript
Усі функції мають доступ до глобальної області.
Насправді в JavaScript усі функції мають доступ до області "вище" їх.
JavaScript підтримує вкладені функції. Вкладені функції мають доступ до області "вище" їх.
У цьому прикладі внутрішня функція plus()
має доступ до змінної counter
у батьківській функції:
Приклад
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Спробуйте самі »
Це могло б вирішити дилему протидії, якби ми могли отримати доступ до функції plus()
ззовні.
Нам також потрібно знайти спосіб виконати counter = 0
лише один раз.
Нам потрібне закриття.
Закриття JavaScript
Пам’ятаєте функції, що викликають себе самостійно? Що робить ця функція?
Приклад
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// лічильник тепер 3
Спробуйте самі »
Пояснення прикладу
Змінна add
присвоюється значенню, що повертається функцією, що викликається самостійно.
Функція самостійного виклику запускається лише один раз. Вона встановлює лічильник на нуль (0) і повертає вираз функції.
Таким чином add стає функцією. "Файна" частина полягає в тому, що вона може отримати доступ до лічильника в батьківській області.
Це називається закриттям JavaScript. Це дає змогу функції мати "private" ("приватні") змінні.
Лічильник захищено анонімною функцією, і його можна змінити лише за допомогою функції додавання.
Закриття — це функція, яка має доступ до батьківської області навіть після того, як батьківська функція закрита.