Переменная вне сферы применения при прослушивании слушателя событий

Question

Почему i не входит в область callback function?

// All menu items collection 
var menuItems = document.getElementsByClassName('menu-item'); 

// Loop trough all menu items and attach 
// event listeners. 
for (var i = 0; i < menuItems.length; i++) { 
     // Check if element truely exsists 
     if (menuItems[i]) { 
      menuItems[i].addEventListener('click', function(e){ 
       //////////////////////////////// 
       // NOTE: i, is out of scope! // 
       ////////////////////////////// 
       var icon = menuItems[i].children[1], 
        submenu = menuItems[i].children[2]; 

       // Change icon color 
       if (icon.style.background !== "blue") { 
        icon.style.background = "blue"; 
       } else { 
        icon.style.background = "red";   
       } 

       // Show/hide submenu 
       if (submenu.style.display !== "block") { 
        submenu.style.display = "block"; 
       } else { 
        submenu.style.display = "none";   
       } 
      }); 
     } 
} 

Answer 1

Переменная i не входит в сферу применения. Просто обработчик события будет вызван через некоторое время после завершения цикла, поэтому переменная i имеет значение, которое указывает за пределами массива menuItems.

Wrap код в функции, чтобы создать область, где у вас есть копия переменной для каждой итерации:

for (var i = 0; i < menuItems.length; i++) { 
    // Check if element truely exsists 
    if (menuItems[i]) { 

    (function(i){ 

     menuItems[i].addEventListener('click', function(e){ 
     var icon = menuItems[i].children[1], 
      submenu = menuItems[i].children[2]; 

     // Change icon color 
     if (icon.style.background !== "blue") { 
      icon.style.background = "blue"; 
     } else { 
      icon.style.background = "red";   
     } 

     // Show/hide submenu 
     if (submenu.style.display !== "block") { 
      submenu.style.display = "block"; 
     } else { 
      submenu.style.display = "none";   
     } 
     }); 

    })(i); 

    } 
} 

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

Закрытие функции содержит все локальные переменные, которые функция использует из внешней области. Если menuItems - глобальная переменная, она также будет в закрытии.