向数组添加函数时的Javascript变量范围

Question

我正在使用TinyMCE 4并试图建立一个动态菜单。为了做到这一点，我正在建立一个包含onclick函数的菜单项数组。菜单显示了，但是onclick函数没有工作，因为当构建数组时，我需要传递给函数的值超出了范围--我相信。

var MenuItems = [{"Id":"1","Name":"MenuItem 1"},{"Id":"2","Name":"MenuItem 2"}];

var Menu = [];
for (var i=0;i<MenuItems.length;i++)
{
    Menu.push({
        text: MenuItems[i].Name,
        onclick: function(){              
            alert(MenuItems[i].Id);
        }
    });
}

在onclick声明中，MenuItems[i].Id不在范围内--我相信。

我怎么能把值传给onclick函数。

我是把数组传给TinyMCE插件，但我不相信这是TinyMCE的问题，但把这部分内容贴出来，以防有更好的方法。

tinymce.PluginManager.add('myplugin', function(editor, url) {    
    editor.addButton('menu', {
        text: 'MyMenu',
        type: 'menubutton',
        icon: false,
        menu: Menu           
    });
});

Answer 1

MenuItems[] 的回调时，该函数将不可用。myplugin 会运行。

这也就意味着，一旦。onclick 调用任何一个menuItem的，它将尝试访问 MenuItems[].

为了解决这个问题，曾经的方法可以是改变执行方式，如。

var MenuItems = [{"Id":"1","Name":"MenuItem 1"},{"Id":"2","Name":"MenuItem 2"}];

var Menu = [];
for (var i=0;i<MenuItems.length;i++)
{
    const id = MenuItems[i].Id;
    Menu.push({
        text: MenuItems[i].Name,
        onclick: function(){              
            alert(id);
        }
    });
}