Как понять решение задачи на JS?

Question

[gleendo]

В общем изучая JS, дошел до задачи. https://learn.javascript.ru/closures-usage#армия-ф...
Прочитал что есть, что нужно. Не понял как решить проблему и вообще что уже дано.
Думаю открою я решение и разберусь. Но не там то было, там такого нагородили, что ...

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

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

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

Answer 1

[heartdevil]

Думаю если ничего не понял из задачи, то тема нихр#на не усвоена.

Вы, конечно, правы. НО, если вы реально решили научиться программировать, то вам придется свыкнуться с этим ощущением и работать над собой дальше. Потому как такие недопонимания будут возникать ооочень часто. Если вы чего-то еще не поняли, значит еще до этого не доросли (тут нужно правильно понимать). Не отчаивайтесь. Работайте дальше. Это же не уравнение или задача, где не узнав одно неизвестно невозможно решить задачу. В этом месте у вас будет пробел, но программировать вы все равно сможете. А когда наткнетесь на задачу, где нужно понять замыкания, то у вас будет реальная мотивация для этого.

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

Answer 2

[Александр Таратин]

ИМХО. Простое решение должно выглядеть так

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

shooter = shooter.bind(null, i);
Метод bind доступный у функций, если объяснять простым языком - возвращает новую функцию, которая представляет из себя исходную функцию с приклеенным контекстом ( this внутри функции) - первый параметр (в данном случае null), и аргументами вызова - все последующие аргументы (у нас только i)
То есть shooter.bind(null, i) вернет функцию которая будет выполнять те же действия, что и исходная shooter, но будто первым параметром мы передали i.

Answer 3

[Виталий Инчин ☢]

Вы не поняли решения или причину ошибки? Или и то и то?

Причина ошибки:
Функция не берет i при создании, не сохраняет его куда-то, она возьмет его именноо при выполнении, т.е после цикла, когда i будет = 10.

Если разжевать "исправления", то как-то так:

1-ое: Функция - объект и как любому объекту ей можно назначить свойство, что и делают. Потом из самой функции получают к нему доступ.

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

3-ее: Суть как во втором, но push выполняется в контексте первой функции (это ничего не меняет). Иначе говоря, записали красивее, суть не изменили.

А более понятным языком только в книгах, не в онлайн-справочниках.

Answer 4

[Анатолий Сидоров]

Для всех стрелков вызов будет выдавать 10, потому что в момент вызова(а не создания) функция будет ссылаться на i = 10(на последнюю итерацию). Для того, чтобы сохранить значение переменной, нужно сделать сохранение ее в локальную. Например так:

function makeArmy() {

  var shooters = [];

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

  return shooters;
}

var army = makeArmy();

Вот здесь habrahabr.ru/post/38642 описана полностью твоя проблема и ее решение.

Comments

[gleendo]

Большое спасибо. Все понятно. непонятно только одно. Почему все таки все стрелки выдавали изначально 10.

[Анатолий Сидоров]

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