НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

JS Підручник

JS Старт JS Інтро JS Установка JS Виведення JS Інструкції JS Синтаксис JS Коментарі JS Змінні JS Ключове слово Let JS Ключове слово Const JS Оператори JS Арифметичні JS Присвоєння JS Типи даних JS Функції JS Об’єкти JS Події JS Рядки JS Рядкові методи JS Рядковий пошук JS Рядкові шаблони JS Числа JS Числові методи JS Масиви JS Методи масиву JS Сортування масиву JS Ітерація масиву JS Масив Const JS Дати JS Формати дат JS Методи отримання дат JS Методи встановлення дат JS Математичні JS Рандомні JS Булеві JS Порівняння JS Умови JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break & Continue JS Ітерації JS Сети (Набори) JS Мапи JS Typeof JS Перетворення типів JS Побітові JS Регулярні вирази JS Помилки JS Область дії JS Хостинг JS Use Strict JS Ключове слово this JS Функція стрілки JS Класи JS Модулі JS JSON JS Відладка JS Гід по стилю JS Кращі практики JS Поширені помилки JS Продуктивність JS Зарезервовані слова

JS Версії

JS Версії JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS Історія

JS Об’єкти

Визначення об’єктів Властивості об’єкта Методи об’єкта Відображення об’єкта Доступ до об’єктів Конструктори об’єктів Прототипи об’єктів Ітеровані об’єкти Сети (Набори) об’єктів Мапи (Карти) об’єктів Довідник об’єктів

JS Функції

Визначення функції Параметри функції Виклик функції Функція call() Функція apply() Функція bind() Закриття функції

JS Класи

Вступ Наслідування класу Статичні методи

JS Асинхроний

Зворотні виклики Асинхроний Проміси Async/Await

JS HTML DOM

DOM Вступ DOM Методи DOM Документ DOM Елементи DOM HTML DOM Форми DOM CSS DOM Анімація DOM Події DOM Слухач подій DOM Навігація DOM Вузли DOM Колекції DOM Вузлові списки

JS Браузер BOM

JS Вікно JS Скрін JS Локація JS Історія JS Навігатор JS Спливаюче оповіщення JS Таймінг JS Кукі

JS Веб API

Веб API Вступ Веб-форми API Веб-історія API Веб-сховище API Веб-воркер API Веб-виборка API Веб-геолокація API

JS AJAX

AJAX Вступ AJAX XMLHttp AJAX Запит AJAX Відгук AJAX XML Файл AJAX PHP AJAX ASP AJAX База даних AJAX Додатки AJAX Приклади

JS JSON

JSON Вступ JSON Синтаксис JSON та XML JSON Типи даних JSON Аналіз JSON Stringify JSON Об’єкти JSON Масиви JSON Сервер JSON PHP JSON HTML JSON JSONP

JS та jQuery

jQuery Селектори jQuery HTML jQuery CSS jQuery DOM

JS Приклади

JS Приклади JS HTML DOM JS HTML Input JS HTML Об’єкти JS HTML Події JS Браузер JS Редактор JS Вправи JS Вікторина JS Сертифікат

JS Довідники

JavaScript Об’єкти HTML DOM Об’єкти

JavaScript. Уроки W3Schools для початківців українською мовою

En

JavaScript Закриття


JavaScript змінні можуть належати до локальної або глобальної області дії.

Глобальні змінні можна зробити локальними (приватними) за допомогою закриття.


Глобальні змінні

Отже, function може отримати доступ до всіх змінних, визначених всередині функції, як це:

Приклад

function myFunction() {
  let a = 4;
  return a * a;
}
Спробуйте самі »

Але function також може отримати доступ до змінних, визначених поза функцією, як це:

Приклад

let a = 4;
function myFunction() {
  return a * a;
}
Спробуйте самі »

В останньому прикладі a є глобальною змінною.

На вебсторінці глобальні змінні належать сторінці.

Глобальні змінні можуть використовуватися (і змінюватися) усіма іншими скриптами на сторінці.

У першому прикладі a є локальною змінною.

Локальна змінна може використовуватися лише всередині функції, де вона визначена. Вона прихована від інших функцій та іншого коду скриптів.

Глобальні та локальні змінні з однаковою назвою є різними змінними. Змінюючи одну, не змінюється інша.

Примітка

Змінні, створені без ключового слова оголошення (var, let або const) завжди є глобальними, навіть якщо вони створені всередині функції.

Приклад

function myFunction() {
  a = 4;
}
Спробуйте самі »

Тривалість життя змінної

Глобальні змінні діють, доки сторінку не буде відкинуто, наприклад, коли ви переходите на іншу сторінку або закриваєте вікно.

Локальні змінні мають короткий термін служби. Вони створюються під час виклику функції та видаляються після завершення роботи функції.


Зустрічна дилема

Припустімо, що ви хочете використовувати змінну для підрахунку чогось і хочете, щоб цей лічильник був доступний для всіх функцій.

Ви можете використати глобальну змінну та 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" ("приватні") змінні.

Лічильник захищено анонімною функцією, і його можна змінити лише за допомогою функції додавання.

Закриття — це функція, яка має доступ до батьківської області навіть після того, як батьківська функція закрита.