Пожалуйста, объясните использование JavaScript-замыканий в циклах [duplicate]

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

var helloFunction;
var finished = false;

while (!finished) {
 var message = 'Hello, World!';
 helloFunction = function() {
   alert(message);
 }
 finished = true;
}

helloFunction();

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

Дополнение

(i) в скобках — это вызов функции. Вот что происходит:

1. Вы определяете некоторую функцию (число) {}. Это называется анонимной функцией, потому что она определена встроенной и не имеет имени.
2. function(num) принимает целочисленный аргумент и возвращает ссылку на другую функцию, которая определена как alert(num)
3. Немедленно вызывается внешняя анонимная функция с аргументом i. Итак, число=i. Результатом этого вызова является функция, которая выполнит alert(i).
4. Конечный результат более или менее эквивалентен следующему: link.onclick = function() { alert(i); };

Я давно программирую на JavaScript, и тема "замыкание в цикле" очень широкая. Я предполагаю, что вы говорите о практике использования (function(param) { return function(){ ...}; })(param); внутри цикла for, чтобы сохранить «текущее значение» цикла при последующем выполнении этой внутренней функции...

Код:

for(var i=0; i<4; i++) {
  setTimeout(
    // argument #1 to setTimeout is a function.
    // this "outer function" is immediately executed, with `i` as its parameter
    (function(x) {
      // the "outer function" returns an "inner function" which now has x=i at the
      // time the "outer function" was called
      return function() {  
        console.log("i=="+i+", x=="+x);
      };
    })(i) // execute the "closure" immediately, x=i, returns a "callback" function
  // finishing up arguments to setTimeout
  , i*100);
}

Вывод:

i==4, x==0
i==4, x==1
i==4, x==2
i==4, x==3

Как вы можете видеть по выходным данным, что все внутренние функции обратного вызова указывают на одно и то же i, однако, поскольку каждая из них имеет свое собственное «замыкание», значение x фактически сохраняется каким бы ни был i во время выполнения внешней функции.

Обычно, когда вы видите этот шаблон, вы должны использовать то же имя переменной, что и параметр и аргумент внешней функции: (функция(i){ })(i) например. Любой код внутри этой функции (даже если он будет выполнен позже, например, функция обратного вызова) будет ссылаться на i в то время, когда вы вызывали "внешнюю функцию".

Ну, "проблема" с замыканиями в таком случае заключается в том, что любой доступ к i будет ссылаться на одну и ту же переменную. Это связано с ECMA-/Javascripts областью действия или лексической областью действия.

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

Для этого вам нужно создать новую функцию, плюс вам нужны дополнительные скобки в конце, чтобы немедленно вызвать внешнюю функцию, поэтому link.onclick теперь возвращаемая функция в качестве ссылки.

Чтобы ответить на последнюю часть ваших вопросов. Две круглые скобки вызывают функцию, как и любые другие функции. Почему вы делаете это здесь, так это то, что вы хотите сохранить переменную «i» именно в это время. Итак, что он делает, вызывает функцию, i отправляется в качестве аргумента «num». Поскольку он вызывается, он запомнит значение nume в собственных ссылках переменных.

Если вы этого не сделаете, все клики по ссылкам приведут к предупреждению с надписью «5»

У Джона Резига, основателя jQuery, есть очень хорошая онлайн-презентация, объясняющая это. http://ejohn.org/apps/learn/

..fredrik