7

Сейчас я прохожу самостоятельное обучение на одном из онлайн-ресурсов по JavaScript. В нем помимо теории есть еще и задачки. Так вот на одной из задач в теме "Область видимости. Замыкания" я столкнулся с полным непониманием решения задачи, которую предлагает автор (свое решение у меня было только одно, и его я рассматривать не буду - ниже задача с кодом и примерами от автора).

Задание:

Следующий код создает массив функций-стрелков shooters. По замыслу, каждый стрелок должен выводить свой номер:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {
    var shooter = function() { // функция-стрелок
      alert( i ); // выводит свой номер
    };
    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

army[0](); // стрелок выводит 10, а должен 0
army[5](); // стрелок выводит 10...
// .. все стрелки выводят 10 вместо 0,1,2...9

Почему все стрелки́ выводят одно и то же? Поправьте код, чтобы стрелки работали как задумано. Предложите несколько вариантов исправления. (Вопрос автора задания)

Предложенные автором варианты решения, которые мне непонятны:

(1) Использовать дополнительную функцию для того, чтобы «поймать» текущее значение i:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {

    var shooter = (function(x) {

      return function() {
        alert( x );
      };

    })(i);

    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

army[0](); // 0
army[1](); // 1

Я так и не понял этот вариант решения задания. Что дают в этом варианте эти вторые скобки с i и почему в JavaScript, в отличии от других нормальных языков типа Java x = i хотя имена у параметров разные. Иными словами я не понимаю, как происходит отлавливание i.

(2) Обернуть весь цикл во временную функцию:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++)(function(i) {

    var shooter = function() {
      alert( i );
    };

    shooters.push(shooter);

  })(i);

  return shooters;
}

var army = makeArmy();

army[0](); // 0
army[1](); // 1

Этот вариант решения задания еще больше вводит меня в ступор. Где вообще хранится значения i каждого стрелка? Какую роль во всем этом играют вторые скобки с параметром (i)?

2
  • 1
    а саму проблему поняли почему возникает?
    – Grundy
    26 янв 2016 в 9:22
  • Да, проблему я понял, Grundy 26 янв 2016 в 14:33

2 ответа 2

8

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

function makeArmy() {
    var shooters = [];

    for (makeArmy.i = 0; makeArmy.i < 10; makeArmy.i++) {    
        var shooter = function() {
            console.log( makeArmy.i );
        };
        shooters.push(shooter); 
    }

    return shooters;
}

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

var shooters = makeArmy();
a[0](); //выведет 10
makeArmy.i = 20;
a[0](); //выведет 20

Соответственно, для нормального формирования функции надо эту связь разорвать и скопировать текущий номер внутри цикла.

[Решение]

Это можно сделать через дополнительную функцию, которая скопирует значение, я упрощу пример для этого:

function test(){
    var i = 0;

    result = function(){ console.log(i); };

    i = 10;    
    return result;
}

test()(); //test() возвращает функцию, вторые скобки для мгновенного вызова вернувшейся функции

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

function test(){
    var i = 0;

    var makeResult = function(x){
         return function(){ console.log(x); };
    }
    var result = makeResult(i); // вызываем функцию и передаем ей параметр который скопируется внутри и из него сформируется нужная функция.

    i = 10;
    return result;
}
test()(); //выводит 0

Таким образом мы обошли замыкание на внешний контекст благодаря копированию при вызове с параметром. На самом деле это можно упростить, сразу вызвав функцию makeResult.

function test(){
    var i = 0;

    var result = function(x){
         return function(){ console.log(x); };
    }(i); //сразу вызываем

    i = 10;
    return result;
}
test()(); //выводит 0

Тоже самое касается цикла с солдатами, мы сделали промежуточную функцию, которая сформировала нужную и вернула ее по мере увеличения переменной i.

function test(){
    var results = [];
    for(var i = 0; i < 10; i++){
        var result = function(x){
            return function(){ console.log(x); };
        }(i); 
        results.push(result);
    }
    return results;
}
test()[5]();

Что в первом, что во втором примерах делается одно и то же - вызывается промежуточная функция с параметром для копирования и разрыва контекста. Только в одном формируется просто целевая функция, а во втором весь объект целиком.

3
  • Как i попадает в x в выражении function(x) я понял. Но где после этого хранится текущее x? Что на своем месте после вызова оставляет function(x)? Переменную x + код внутренней функции, корой этот x потом при вызове подставляется? Или только код внутренней функции с уже подставленным значением? А может LexicalEnvironment или он не причем? 26 янв 2016 в 14:32
  • 1
    @IngeniousTom, переменная x как параметр храниться во внутреннем стеке функции(в других языках как правило так же). После вызова function(x) возвращается код внутренней функции + который ссылается на эту x в стеке, поэтому она не уничтожается после завершения функции как полагается(это называется замыкание). Поэтому опять же получается замыкание, но уже на копию в стеке функции function(x), а не на внешнюю переменную i которая меняется.
    – Alex Krass
    26 янв 2016 в 15:28
  • Спасибо - оценил. То есть поставил вам +1 27 янв 2016 в 8:31
1

Проблема возникает вот здесь:

 for (var i = 0; i < 10; i++) {
    var shooter = function() {
      alert( i );
    };
    shooters.push(shooter);
}

А именно при вызовах:

army[0]();
army[5]();

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

А обернув во временную функцию, функция будет выполнятся i раз.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.