САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

Определение функции Параметры функции Вызов функции Вызвать функцию Применение функции Закрытие функции

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

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 Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


Спасибо за поддержку, сайт продолжает работать

JavaScript Закрытие функции



Переменные JavaScript могут принадлежать к локальной или глобальной области.

Глобальные переменные можно сделать локальными (частными) с помощью замыканий.


Глобальные переменные

function может получить доступ ко всем переменным, определенным внутри функции, например:

Пример

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

Но function также может обращаться к переменным, определенным вне функции, например:

Пример

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

В последнем примере a - это глобальная переменная.

На веб-странице глобальные переменные принадлежат объекту window.

Глобальные переменные могут использоваться (и изменяться) всеми скриптами на странице (и в window).

В первом примере a - это локальная переменная.

Локальную переменную можно использовать только внутри функции, в которой она определена. Она скрыта от других функций и другого скриптового кода.

Глобальные и локальные переменные с одинаковыми именами - это разные переменные. Изменение одной не изменяет другую.

Переменные, созданные без ключевого слова объявления (var, let, или const), всегда являются глобальными, даже если они созданы внутри функции.



Продолжительность жизни переменной

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

У локальных переменных короткий срок жизни. Они создаются при вызове функции и удаляются по завершении функции.


Встречная дилемма

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

Вы можете использовать глобальную переменную и function для увеличения счетчика:

Пример

// Запуск счетчика
var counter = 0;

// Функция увеличения счетчика
function add() {
  counter += 1;
}

// Вызов add() 3 раза
add();
add();
add();

// Счетчик теперь должен быть 3
Попробуйте сами »

Существует проблема с решением, приведенным выше: любой код на странице может изменить счетчик без вызова add().

Счетчик должен быть локальным для add() функции, чтобы другой код не мог его изменить:

Пример

// Запуск счетчика
var counter = 0;

// Функция увеличения счетчика
function add() {
  var counter = 0;
  counter += 1;
}

// Вызов add() 3 раза
add();
add();
add();

// Счетчик теперь должен быть 3. Но он равен 0
Попробуйте сами »

Это не сработало, потому что мы отображаем глобальный счетчик вместо локального.

Мы можем удалить глобальный счетчик и получить доступ к локальному счетчику, позволив функции вернуть его:

Пример

// Функция увеличения счетчика
function add() {
  var counter = 0;
  counter += 1;
  return counter;
}

// Вызов add() 3 раза
add();
add();
add();

// Теперь счетчик должен быть 3. Но он равен 1.
Попробуйте сами »

Это не сработало, потому что мы сбрасывали локальный счетчик каждый раз, когда вызываем функцию.

Внутренняя функция JavaScript может решить эту проблему.


Вложенные функции JavaScript

Все функции имеют доступ к глобальной области видимости.

Фактически, в JavaScript все функции имеют доступ к области, расположенной "над ними".

JavaScript поддерживает вложенные функции. Вложенные функции имеют доступ к области "над ними".

В этом примере внутренняя функция plus() имеет доступ к counter переменной в родительской функции:

Пример

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();   
  return counter;
}
Попробуйте сами »

Это могло бы решить встречную дилемму, если бы мы могли добраться до plus() функции извне.

Нам также нужно найти способ выполнить counter = 0 только один раз.

Нам нужно закрытие.


Замыкания JavaScript

Помните самозапускающиеся функции? Что они делают?

Пример

var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

// счетчик теперь 3
Попробуйте сами »

Объяснение примера

Переменная add присваивается возвращаемому значению самозапускающейся функции.

Самозапускающаяся функция запускается только один раз. Он устанавливает счетчик на ноль (0) и возвращает выражение функции.

Таким образом, add становится функцией. "Замечательно" то, что он может получить доступ к счетчику в родительской области.

Это называется закрытием JavaScript. Это позволяет функции иметь "частные" переменные.

Счетчик защищен областью действия анонимной функции и может быть изменен только с помощью функции добавления.

Замыкание - это функция, имеющая доступ к родительской области, даже после закрытия родительской функции.