Замыкание функций в JavaScript

Замыкание функций в JavaScript

На этом уроке мы разберем, что такое замыкание функции, простыми словами. Если коротко, то замыкание — это функция внутри другой функции. И правда, звучит очень просто, но без привязки к конкретной задачи, понятие «замыкание» так и останется пустым звуком. Я просто хочу знать, в каких случаях мне нужно применять эту технологию.

Замыкание и область видимости

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

Пример функции с локальными переменными


function one() {
    let a = 10;
    return a * 10;
}

// Вызов функции
console.log(one()); // 100

Локальная переменная видна только внутри блока, в котором она объявлена. Если мы попытаемся обратиться к локальной переменной вне этого блока, то гарантированно получим ошибку. Поскольку переменная не находится в области видимости данной функции.


function one() {
    let a = 10;
    return a * 10;
}

// Вывод переменной
console.log(a); // a is not defined

Пример функции c глобальными переменными


let a = 10;

function one() {
    return a * 10;
}

console.log(a); // 10
console.log(one()); // 100

Совсем иначе дело обстоит с глобальными переменными, объявленными за пределами блока. Глобальные переменные доступны в любом месте в данном коде.

В чем подвох?

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


let a = 10;

function one() {
    let a = 15;
    return a * 10;
}

console.log(a); // 10
console.log(one()); // 150

В консоли вывелась глобальная переменная с числом 10 (так и должно быть), но обратите внимание на число 150, в данном математическом расчете уже участвовала локальная переменная a, с числом 15. Переменные внутри функции живут в тот момент, когда используется в вычислениях или вызывается эта функция. Как только функция one() прекратила свое существование, локальная переменная a просто исчезла. При таких условиях, нарушается работа счётчика.


let a = 0;

function one() {
    a = a + 1;
    return a;
}

console.log(one()); // 1
console.log(one()); // 2
console.log(one()); // 3

Вроде все хорошо, счетчик работает корректно, но есть в этом коде одно слабое место — глобальная переменная a, к которой обращается функция. Проблема в том, что объявленная глобальная переменная, оторвана от функции. Например какой-нибудь программист переопределит глобальную переменную, не заметив её связи со счетчиком. Тогда нарушится работа счетчика, ведь все функции имеют доступ к глобальным переменным. Получается, что глобальная переменная беззащитна. Так вот, для защиты глобальных переменных и были придуманы замыкания.

Пример замыканий

Замыкания делают код безопаснее, защищают его от нежелательных переопределений глобальных переменных. Сделаем такую хитрость,поместим функцию one() внутри другой функции wrap(). Это даст следующее: Когда будет вызвана функция wrap(), JavaScript создаст переменную a внутри функции wrap() и эта переменная не прекратит свое существование. Таким образом мы получим несколько экземпляров области видимости, внутри которых существуют свои переменные a.


function wrap() {
    let a = 0;
    return function() {
        a = a + 1
        return a;
    }
}

В момент вызова wrap(), в JavaScript создается блок видимости, внутри которого функция видит внешние по отношению к себе переменные. И никто другой, кроме этой функции, не имеет доступа к переменным и не может их изменить. А все потому, что переменные одной области видимости замкнуты внутри другой области видимости. Отсюда и происходит название — замыкание. Мы получаем возможность делать переменные, которые недоступные никому, кроме функций.

Как определить где необходимо замыкание?

Замыкания активно используются для создания счетчиков. Если вам нужна переменная, к которой никто больше не будет иметь доступа, то замыкание — это то, что вам нужно.

Источник

Просмотров:

Добавить комментарий

Adblock
detector