javascript - 尝试在 foreach 循环中将变量传递到对象的方法构造函数时出现范围问题

Question

我了解以下代码块中发生的情况，但不确定如何修复它:

for (var i = 0; i < songs.length; i++){
    var listItem = $('<li/>').appendTo(songList);

    var song = songs[i];

    var link = $('<a/>', {
        id: song.id,
        href: '#' + song.id,
        text: song.name,
        contextmenu: function(e){
            var contextMenu = new ContextMenu(song);
            contextMenu.show(e.pageY, e.pageX);

            //Prevent default context menu display.
            return false;
        }
    }).appendTo(listItem);
}

在这种情况下，当在 contextmenu 方法内部访问时，歌曲将始终是 foreach 循环中迭代的最后一个项目。我想知道如何使链接与其定义的歌曲之间存在 1:1 的关系。

我尝试将歌曲对象分配为链接对象的属性(通过 this.song 访问)，但它显示为未定义。

Answer 1

for (var i = 0; i < songs.length; i++){
    // note this
    (function(i) {
        var listItem = $('<li/>').appendTo(songList);

        var song = songs[i];

        var link = $('<a/>', {
            id: song.id,
            href: '#' + song.id,
            text: song.name,
            contextmenu: function(e){
                var contextMenu = new ContextMenu(song);
                contextMenu.show(e.pageY, e.pageX);

                //Prevent default context menu display.
                return false;
            }
        }).appendTo(listItem);
    // and this
    }(i));
}

参见this duplicate以获得解释。