Замыкание с использованием Named Function Expression

308

07 декабря 2017, 02:26

Здравствуйте, изучаю JS,пытаюсь разобраться в решении задачи на замыкание:

function makeArmy() {
  var shooters = [];
  for (var i = 0; i < 10; i++) {
    var shooter = function me() {    //*
      alert( me.i );
    };
    shooter.i = i;                  //**
    shooters.push(shooter);
  }
  return shooters;
}
var army = makeArmy();
army[0](); // 0
army[1](); // 1

Насколько я понимаю shooter ссылается на одну и ту же функцию(объект).Но при при использовании NFE разные i.

Вопрос: почему i не перезаписывается?

Упростил для себя:

 b = {};
    d = [];
    a = с= b;
    a.i=1;
    d.push(a);
    c.i=2;
    d.push(c);

на каждой итерации цикла FOR будит создаваться переменная shooter с присвоением свойств объекта в значении Function " var shooter = function me() { ...} "

Я думаю,что здесь Вы не правы,объявление сработает один раз.(https://learn.javascript.ru/function-basics)

Насколько я понял дело даже не в замыкании,а просто в использовании функции как объекта.И так как Function Expression создаются в процессе выполнения выражения,это будут разные объекты,соответственно поэтому i и не перезаписывается,а NFE для того чтобы обратиться к свойству.

Однако непонятно еще вот что,если написать как Function Declaration,все равно получается разные объекты,но ведь https://learn.javascript.ru/function-declaration-expression

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

function makeArmy() {
  var shooters = [];
  for (var i = 0; i < 10; i++) {
    function shooter() {    
      //alert( me.i );     //убрал для примера
    };
    shooter.i = i;                  
    shooters.push(shooter);
  }
  console.log(shooters);  //добавил для примера
  return shooters;
}
var army = makeArmy();
army[0](); // 0
army[1](); // 1

Answer 1

_ почему i не перезаписывается _

function makeArmy() {
    var shooters = [];
  for (var i = 0; i < 2; i++) {
/*
    *   на каждой итерации цикла FOR будит создаваться переменная shooter
        с присвоением свойств объекта в значении Function  "  var 
       shooter = function me() { ...} "     
*/
/*
       Объявления Function Expression с присвоением обеления Function
        Declaration внутри цикла FOR. Такой подход никакой функциональной
        нагрузки для тела декларативной функции makeArmy не несет
*   !   в  теле функции makeArmy " me " не несёт не какого значения, его
        просто НЕТ !!!
*/
    var shooter = function me(){
/*
    *   тело функции содержит метод  алёрт, в нутрии которого происходит
       обращение к  значению свойства ключа i объекта именованным "me"
*/  
        alert( me.i );
    }
/*
    *   *   свойству обекта(функции),, в ключе i  присваиваем значения
            переменой i, объявленной циклом FOR "  shooter.i = i " 
*/  
    shooter.i = i;
/*
    *   *   *   в массив методом push , итым элементом добавляем аргумент
                содержащий результат переменой shooter
*/          
     shooters.push(shooter);
  }
/*  
    *   возвращаем массив методов(функций)
*/
  return shooters;
}
/*
    *   присваиваем переменой army результат работы метода(функции) makeArmy
 */
var army = makeArmy(); 
/*
    *   открываем  в консоли массив army
    *   видим что он наполнен 10-ю функциями
    *   *   и каждая имеет ключ "i"  с расширением №
*/
console.dir(
    army
)
army[0](); // 0
army[1](); // 1

_____ про замыкание _____

function makeArmy_1(_perem) {
    var perem = "в функцию аргументом _perem передано " + (_perem || "нечего");
    var shooters = [];
  for(var i = 0; i < 10; i++){
    var shooter = function me(){
/*
    *   тело функции содержит метод  алёрт, в нутрии которого происходит
         конкатенация значений 
        1. значения переданного аргументу в функцию  +  2. значению
        свойства ключа i объекта именованным "me" + 3.результат последней
        итерации сохранённой в переменой i
*/  
        alert(_perem +" "+ me.i + " последняя итерация " + i)}
    shooter.i = i;
    shooters.push(shooter)
    } 
/*
    возвращаем анонимную функцию
*/  
  return function(_num){
/*
     *   тело функции содержит ссылку  на локальную переменную
     *  !    возможность обращения к ней и есть замыкание
*/  
        shooters[_num || 0]()
/*
        выводим результат переменой perem в консоль браузера
*/      
        console.log(perem)
    }
}
var army_1 = makeArmy_1(); 
/*
    *   открываем  в консоли массив army
    *   видим одну анонимную функцию 
*/
console.dir(
    army_1
)
army_1(5)