Loftschool школа онлайн обучения IT профессиям
Профессии
  • Веб-разработчик
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • Интернет-маркетолог
  • Android-разработчик
  • UX/UI Дизайнер
Курсы
          • Основы вёрстки
          • Веб для начинающих
          • JavaScript
          • Vue.js
          • React.js
          • Node.js
          • PHP
          • Контекстная реклама
          • SMM
          • SEO для всех
          • Android: базовый
          • Android: продвинутый
          • UX/UI-дизайн: базовый
          • UX/UI-дизайн: PRO
          • Python для начинающих
          • Python: машинное обучение
        Профессия Дизайнер со скидкой
        -20%
        До конца акции:
        15
        00
        16
        Дней
        Часов
        Минут
        • Главная
        • Блог
        • Статьи
        • Урок 5. Основы JavaScript. Область видимости и замыкания
        Полезный блог
        Статьи
        Опубликовано 21.12.2020 14:56

        Урок 5. Основы JavaScript. Область видимости и замыкания

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

        Область видимости

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

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

        Пример

        Представим, что наша программа состоит из двух переменных и одной функции, которую мы разбирали в Уроке 4:

        let someVar = 20;
        let someOtherVar = 30;
         function sum (a, b) {
           let result = a + b;
           return result;
        }

        В глобальную область видимости войдут переменные someVar и someOtherVar, а также функция sum.

        В локальной видимости находится то, что указано внутри функции sum: два параметра a и b, а также переменная result.

        Добавим ещё одну функцию:

        function someFn (a, b, c ,d) {
            let var1 = 10;
            let var2 = a+ b + c + d + var1;
            return var2
        }

        Теперь в глобальную область видимости добавилась и функция someFn, а в функции someFn образовалась собственная локальная область видимости, которая состоит из параметров a, b, c, d и двух переменных var1 и var2.

        Замыкания

        Замыкания – важная особенность языка JavaScript. В чём она заключается? Каждая функция знает, где и когда её объявили. Это позволяет ей пользоваться всеми данными, которые существовали в области видимости на момент объявления функции.

        Пример

        Снова возьмём наш код, который состоит из двух переменных и одной функции, но попросим функцию выполнить сложение не только параметров a и b, но и значений из переменных someVar и someOtherVar. Это выглядит так:

        let someVar = 20;
        let someOtherVar = 30;
        function sum (a, b) {
           let result = a + b + someVar + someOtherVar;
           return result;
        }

        Запишем результат функции sum с аргументами 2 и 3 в переменную result, чтобы затем вывести её значение в консоль:

        let result = sum(2,3);

        Справка! Сейчас в нашем коде две переменные result. Первая – в локальной области видимости внутри функции. А вторую мы создали в глобальной области видимости. Так как они созданы в разных зонах видимости, то не конфликтуют друг с другом. Если в глобальной области мы попробуем создать еще одну переменную result, то увидим ошибку «Идентификатор 'result' уже объявлен»:

        Uncaught SyntaxError: Identifier 'result' has already been declared

        Выведем результат в консоль:

        console.log(result);

        Так как функция sum объявлена в глобальной области видимости после переменных someVar и someOtherVar, то она может ими пользоваться. В консоли увидим результат: 

        55

        Если бы мы сначала создали функцию sum, а затем переменные someVar и someOtherVar, то функция бы не сработала.

        Здесь замыкание – это способность функции sum обратиться к созданным ранее переменным someVar и someOtherVar.

        Как интерпретатор пришёл к результату 55? Рассмотрим пошагово:

        1. Мы попросили его выполнить заданную функцию с аргументами 2 и 3 и вывести результат:

        let result = sum(2,3);
        console.log(result);

        2. Он проводит поиск, берёт заданные аргументы и подставляет в соответствующие параметры их значения.

        3. Сначала поиск происходит в локальной области видимости – внутри функции. В этой области он видит параметры a и b, равные 2 и 3 соответственно. Подставляет:

        function sum (a, b) {
           let result = 2 + 3 + someVar + someOtherVar;
           return result;
        }

        Теперь ему нужно найти значения переменных someVar и someOtherVar. Как он это сделает? Закончив поиск внутри локальной области и не найдя там нужных значений, интерпретатор переходит в более широкую область. В данном случае – это глобальная. Здесь находится сама функция sum и значения переменных someVar и someOtherVar. Интерпретатор подставляет их в функцию вот так:

        function sum (a, b) {
           let result = 2 + 3 + 20 + 30;
           return result;
        }

        Поэтому, выводя в консоль результаты функции, мы и получили значение 55.

        Усложним задачу и сделаем несколько локальных областей видимости. 

        Для этого создадим переменную a и функцию fn1, в которую вложена ещё одна функция fn2:

        let a = 10;
        function fn1(b, c) {
           function fn2(d, e) {
               return a + b + c + d + e;
           }
           return fn2 (3,4);
        }

        Теперь попросим компьютер выдать нам результат функции fn1 с аргументами 1 и 2, записав их в переменную result:

        let result = fn1(1,2);
        console.log(result);

        Как интерпретатор вычисляет результат в этом случае? 

        Рассмотрим подробнее выражение, записанное в функции fn2 – a + b + c + d + e:

        Сначала ищем значение a. В первую очередь поиск происходит внутри локальной области видимости первого уровня – это область видимости функции fn2:

        function fn2(d, e) {
               return a + b + c + d + e;
           }

        Здесь значения a нет.

        Поиск переходит в локальную область видимости более высокого уровня, в которой создана функция fn2 – это функция fn1:

        function fn1(b, c) {
           function fn2(d, e) {
               return a + b + c + d + e;
           }
           return fn2 (3,4);
        }

        Но и здесь значения a нет. 

        Тогда поиск переходит на следующий уровень видимости, куда вложена функция fn1 – это глобальная область. И здесь находит переменную a со значением 10. Подставляет его в выражение: 10 + b + c + d + e.

        Продолжает поиск параметров b и c сначала в своей области видимости. Не находит. Затем обнаруживает их в локальной области видимости функции fn1, которым мы передали значение 1 и 2. Подставляет: 10 + 1 + 2 + d + e.

        Продолжает поиск параметров d и e и сразу находит их в своей локальной области видимости, подставляет переданные значения 3 и 4: 10 + 1 + 2 + 3 + 4.

        Так мы видим в консоли итоговый результат:

        55

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

        Теперь вы знаете, что такое область видимости и замыкания.

          Поделись публикацией

          Категории

          • Все записи блога
            • Трудоустройство
              • Истории выпускников LoftSchool
              • Полезные советы
            • Полезные ссылки
              • Книги
              • Инструменты
            • Новости школы
              • Команда LoftSchool
              • Информация о курсах
            • Статьи
              • Архив материалов
                • DevNews
                • DevShow
                • Loftnews
                • Loftschool
                • Loftvlog
                • Интервью
                • Видеоуроки
              • © 2012 - 2023 LOFT

                Школа онлайн образования

              • © 2012 - 2023 LOFT

                Школа онлайн образования

                • +7 (800) 600 09 54
                • +7 (812) 339 22 01
                • [email protected]
                УчастникSkolkovo
              • Полезная рассылка

                Подпишись, чтобы быть в курсе наших новостей, акций и скидок.

              • Полезное
                • О нас
                • Карта курсов
                • B2B
                • Работодателям
                • Партнерская программа
                • Вакансии
                • Стать автором
                • Подарочные сертификаты
                • Вебинары
                • Блог
                • FAQ
              • Информация
                • Публичная оферта портала
                • Политика конфиденциальности
                Безопасная передача данных