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.
}

不幸的是，单击这些锚标记之一会导致如下调用：

loadUserNameInfo(undefined);

这是为什么？我的目标是这样的锚：

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

我怎样才能制作这个？

更新 这有效：

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

Answer 1

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

这样做：

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

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

Answer 2

您的迭代器 i 存储为引用，而不是值，因此，当它在闭包外部更改时，对它的所有引用都会发生更改。

试试这个

function fillInMentioned(mentions) { 
    var mentionList = document.getElementById("mention-list"); 
    mentionList.innerHTML = ""; 
    for (var i = 0; i < mentions.length; i++) { 
        var newAnchor = document.createElement("a"); 

        // Set the index as a property of the object 
        newAnchor.idx = i;
        newAnchor.onclick = function () { 
            // Now use the property of the current object
            loadUsernameInfo(mentions[this.idx]) 
        }; 

        // 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", "");  
}