当应用事件侦听器时，超出范围的变量

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数组之外。

包裹在一个函数的代码，创建，你必须为每次迭代变量的副本的范围：

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是一个全局变量，它也将在关闭中。