Question

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

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

时

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);
}

循环内Javascript范围的问题

2 个答案: