循环内的Javascript范围问题[重复]

Question

可能重复：
Javascript closure inside loops - simple practical example

我（很明显）是 javascript 的初学者。我试图理解为什么，当使用 for 循环并调用事件处理程序ala

http://jsfiddle.net/Yw5Uj/

var nav = document.getElementById('nav');
var navLinks = nav.getElementsByTagName('a');
var content = document.getElementById('content');
var contentSections = content.getElementsByTagName('div');


for(i =0; i < contentSections.length; i++) {
    contentSections[i].style.display = 'none';
}

for(i =0; i < navLinks.length; i++) {
    navLinks[i].onmouseover = function() {
         contentSections[i-1].style.display = 'block'
    }
}

我只得到循环的最后一次迭代。当鼠标悬停在 navLinks 数组中的每个链接上时，我将如何调用函数对它们进行操作？

这方面有很多问题，但很多时候它们太复杂了，我无法理解。

Answer 1

试试下面的

var makeFunction = function(i) {
  return function() { contentSections[i-1].style.display = 'block'; };
};

for(var i =0; i < navLinks.length; i++) {
    navLinks[i].onmouseover = makeFunction(i);
}

让你失望的是i 的生命周期语义。在 Javascript 中，只有一个 i 为当前函数定义（如果不使用 var，它很可能在全局范围内）。因此，分配给onmouseover 的每个函数都使用相同的i 变量，其最终值为navLinks.length。

我的解决方案有效，因为它使用函数范围为循环的每次迭代创建一个新的i。

Answer 2

Updated example here.

function handleMouseOver(i) {
    return function () {
        for (var j = 0; j < navLinks.length; j++) {
            contentSections[j].style.display = 'none';
        }
        contentSections[i].style.display = 'block';
    }
}

for(i =0; i < navLinks.length; i++) {
    navLinks[i].onmouseover = handleMouseOver(i);
}