JavaScript 闭包和变量作用域

Question

我在 JS 闭包方面遇到了问题:

// arg: an array of strings. each string is a mentioned user.
// fills in the list of mentioned users. Click on a mentioned user's name causes the page to load that user's info.
function fillInMentioned(mentions) {
    var mentionList = document.getElementById("mention-list");
    mentionList.innerHTML = "";
    for (var i = 0; i < mentions.length; i++) {
        var newAnchor = document.createElement("a");

        // cause the page to load info for this screen name
        newAnchor.onclick = function () { loadUsernameInfo(mentions[i]) };

        // give this anchor the necessary content
        newAnchor.innerHTML = mentions[i];

        var newListItem = document.createElement("li");
        newListItem.appendChild(newAnchor);
        mentionList.appendChild(newListItem);
    }
    document.getElementById("mentions").setAttribute("class", ""); // unhide. hacky hack hack.
}

不幸的是，点击这些 anchor 标记之一会导致这样的调用:

loadUserNameInfo(undefined);

这是为什么？我的目标是像这样的 anchor :

<a onclick="loadUserNameInfo(someguy)">someguy</a>

我怎样才能生产这个？

更新 这有效:

newAnchor.onclick = function () { loadUsernameInfo(this.innerHTML) };
newAnchor.innerHTML = mentions[i];

Answer 1

onclick 处理程序闭包内的“i”引用捕获了对“i”的实时引用。它会针对每个循环进行更新，这也会影响迄今为止创建的所有闭包。当您的 while 循环结束时，“i”刚好超过 mentions 数组的末尾，因此 mentions[i] == undefined 对所有这些都没有定义。

这样做:

newAnchor.onclick = (function(idx) {
    return function () { loadUsernameInfo(mentions[idx]) };
})(i);

强制“i”锁定到闭包内的值 idx。