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

当 myplugin 的回调运行.

时，

MenuItems[] 将不可用

这也意味着，一旦调用任何菜单项的 onclick，它将尝试访问 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);
        }
    });
}

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

Javascript variable scope when adding function to array

javascript

tinymce

tinymce-4