Функции JavaScript могут обращаться к их:

1. Аргументы
2. Локали (то есть их локальные переменные и локальные функции)
3. Среда, которая включает : globals, включая DOM что-либо во внешних функциях

Если функция обращается к своей среде, то функция является закрытием.

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

Пример закрытия, использующего глобальную среду:

Представьте, что события кнопки «Переполнение стека» и «Голос-вниз» реализованы как закрытие, voteUp_click и voteDown_click, что имеют доступ к внешним переменным isVotedUp и isVotedDown, которые определены глобально. (Для простоты я имею в виду кнопки «Голос голоса» StackOverflow, а не массив кнопок «Ответ на голосование».)

Когда пользователь нажимает кнопку VoteUp, функция voteUp_click проверяет, является ли isVotedDown == true, чтобы определить, голосовать или просто отменять пониженное голосование. Функция voteUp_click является закрытием, потому что она обращается к своей среде.

var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}

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

Я стараюсь лучше учиться на тестах GOOD / BAD. Мне нравится видеть рабочий код, за которым следует нерабочий код, с которым кто-то может столкнуться. Я собрал a jsFiddle , который делает сравнение, и пытается свести различия к простейшим объяснениям, которые я мог бы придумать.

Завершения выполнены правильно:

console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}

• В приведенном выше коде createClosure(n) вызывается на каждой итерации цикла. Обратите внимание, что я назвал переменную n, чтобы выделить, что это новая переменная, созданная в новой области функций, и не является той же переменной, что и index, которая привязана к внешней области.
• Это создает новая область и n привязаны к этой области; это означает, что у нас есть 10 отдельных областей, по одному для каждой итерации.
• createClosure(n) возвращает функцию, которая возвращает n в пределах этой области.
• В пределах каждой области n независимо от того, какое значение оно имело, когда createClosure(n) был вызван, поэтому вложенная функция, которая возвращается, всегда будет возвращать значение n, которое оно имело при вызове createClosure(n).

Завершение сделано неправильно :

console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}

• В приведенном выше коде цикл был перемещен внутри функции createClosureArray(), и теперь функция только возвращает завершенный массив, который на первый взгляд кажется более интуитивным.
• Что может быть не очевидным, так это то, что поскольку createClosureArray() вызывается только после создания только одной области для этой функции вместо одной для каждой итерации цикла.
• В этой функции переменная с именем index. Цикл запускается и добавляет функции массиву, возвращающему index. Обратите внимание, что index определяется внутри функции createClosureArray, которая только когда-либо вызывается один раз.
• Поскольку в функции createClosureArray() имеется только одна область, index привязана только к значению в пределах этого объема. Другими словами, каждый раз, когда цикл меняет значение index, он меняет его на все, что ссылается на него в пределах этой области.
• Все функции, добавленные в массив, возвращают переменную SAME index из родительской области, где она была определена вместо 10 различных из 10 различных областей, таких как первый пример. Конечным результатом является то, что все 10 функций возвращают одну и ту же переменную из той же области.
• После завершения цикла и index было изменено конечное значение 10, поэтому каждая функция, добавленная в массив, возвращается значение единственной переменной index, которая теперь установлена ​​в 10.

Результат

ЗАКРЫТЬ СДЕЛАНО ПРАВО n = 0 n = 1 n = 2 n = 3 n = 4 n = 5 n = 6 n = 7 n = 8 n = 9

ЗАКРЫВАЕТСЯ СОВЕРШЕННО n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10

Закрытие очень похоже на объект. Он создается при каждом вызове функции.

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

Переменная содержится в закрытии , если вы

1. назначили ее с помощью var foo=1; или
2. просто напишите var foo;

Если внутренняя функция (функция, содержащаяся внутри другой функции) обращается к такой переменной, не определяя ее в своей собственной области с помощью var, она изменяет содержимое переменная во внешнем замыкании .

Закрытие переживает время выполнения функции, которая породила его. Если другие функции выходят из закрытия / scope , в котором они определены (например, как возвращаемые значения), они будут продолжать ссылаться на это закрытие .

Пример

 function example(closure) {
   // define somevariable to live in the closure of example
   var somevariable = 'unchanged';

   return {
     change_to: function(value) {
       somevariable = value;
     },
     log: function(value) {
       console.log('somevariable of closure %s is: %s',
         closure, somevariable);
     }
   }
 }

 closure_one = example('one');
 closure_two = example('two');

 closure_one.log();
 closure_two.log();
 closure_one.change_to('some new value');
 closure_one.log();
 closure_two.log();

Выход

somevariable of closure one is: unchanged
somevariable of closure two is: unchanged
somevariable of closure one is: some new value
somevariable of closure two is: unchanged

Функция в JavaScript - это не просто ссылка на набор инструкций (как на языке C), но также включает скрытую структуру данных, которая состоит из ссылок на все нелокальные переменные, которые она использует (захваченные переменные). Такие функции из двух частей называются замыканиями. Каждая функция в JavaScript может считаться замыканием.

Закрытие - это функции с состоянием. Это несколько похоже на «это» в том смысле, что «это» также предоставляет состояние для функции, но функция, а «это» - отдельные объекты («это» - просто причудливый параметр и единственный способ привязать его к функция - создать закрытие). Хотя «это» и функция всегда живут отдельно, функция не может быть отделена от ее закрытия, а язык не предоставляет никаких средств для доступа к захваченным переменным.

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

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

Пример:

function foo (initValue) {
   //This variable is not destroyed when the foo function exits.
   //It is 'captured' by the two nested functions returned below.
   var value = initValue;

   //Note that the two returned functions are created right now.
   //If the foo function is called again, it will return
   //new functions referencing a different 'value' variable.
   return {
       getValue: function () { return value; },
       setValue: function (newValue) { value = newValue; }
   }
}

function bar () {
    //foo sets its local variable 'value' to 5 and returns an object with
    //two functions still referencing that local variable
    var obj = foo(5);

    //Extracting functions just to show that no 'this' is involved here
    var getValue = obj.getValue;
    var setValue = obj.setValue;

    alert(getValue()); //Displays 5
    setValue(10);
    alert(getValue()); //Displays 10

    //At this point getValue and setValue functions are destroyed
    //(in reality they are destroyed at the next iteration of the garbage collector).
    //The local variable 'value' in the foo is no longer referenced by
    //anything and is destroyed too.
}

bar();

Wikipedia on closures :

В информатике закрытие является функцией вместе со средой ссылок для нелокальных имен (свободных переменных) этой функции.

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

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

Закрытия часто используются для создания функций с некоторыми скрытыми личными данными (но это не всегда так).

var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.

ems

В приведенном выше примере используется анонимная функция, которая была выполнена один раз. Но этого не должно быть. Его можно назвать (например, mkdb) и выполнить позже, генерируя функцию базы данных каждый раз при ее вызове. Каждая сгенерированная функция будет иметь свой собственный скрытый объект базы данных. Другим примером использования замыканий является то, что мы не возвращаем функцию, а объект, содержащий несколько функций для разных целей, каждая из которых имеет доступ к тем же данным.

Автор Closures очень хорошо объяснил замыкания, объясняя причину, по которой они нам нужны, а также объясняет LexicalEnvironment, который необходим для понимания замыканий. Вот сводка:

Что делать, если к переменной обращаются, но она не является локальной? Как здесь:

В этом случае интерпретатор находит переменную во внешнем LexicalEnvironment объекте.

Процесс состоит из двух шагов:

1. Во-первых, когда создается функция f, она не создается в пустом пространстве. Существует текущий объект LexicalEnvironment. В вышеприведенном случае это окно (a не определено во время создания функции).

Когда функция создается, он получает скрытое свойство с именем [[Scope]], которое ссылается на текущую LexicalEnvironment.

Если переменная читается, но не может быть

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

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

Таким образом, функция g имеет доступ к g, a и f.

Замыкания

Вложенная функция может продолжаться

g32]

Как мы видим, this.say является свойством в объекте пользователя, поэтому он продолжает жить после завершения пользователем.

И если вы помните, когда this.say создан, он ( как каждая функция) получает внутреннюю ссылку this.say.[[Scope]] на текущий LexicalEnvironment. Итак, LexicalEnvironment текущего исполнения пользователя остается в памяти. Все переменные пользователя также являются его свойствами, поэтому они также тщательно хранятся, а не как обычно.

Все дело в том, чтобы убедиться, что если внутренняя функция хочет получить доступ к внешней переменной в будущем, .

Подводя итог:

1. Внутренняя функция сохраняет ссылку на внешнюю лексическую среду.
2. Внутренняя функция может обращаться к переменным из нее в любое время, даже если внешняя функция закончена.
3. Браузер сохраняет LexicalEnvironment и все его свойства (переменные) в памяти, пока не будет внутренняя функция, которая ссылается на нее.

Это называется замыканием.

Можете ли вы объяснить закрытие 5-летнего? *

Я все еще думаю, что Объяснение Google работает очень хорошо и кратким:

/*
*    When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns.
*
* An important concept to learn in JavaScript.
*/

function outerFunction(someNum) {
    var someString = 'Hey!';
    var content = document.getElementById('content');
    function innerFunction() {
        content.innerHTML = someNum + ': ' + someString;
        content = null; // Internet Explorer memory leak for DOM reference
    }
    innerFunction();
}

outerFunction(1);​

[/g3]

* AC # вопрос