动态子菜单项点击区分及loadLoadout函数传参问题求助

嘿，我完全懂你碰到的麻烦——你动态创建子菜单时，想给loadLoadout传参数，但addItem却没正确识别参数，导致点击不同菜单项没法区分对吧？

问题根源 #

你当前的代码是把函数调用拼接成字符串传给addItem：

warSubMenu.addItem(chosenMenu,'loadLoadout(' + chosenMenu +')');

这种方式的问题在于，JavaScript会直接执行loadLoadout(chosenMenu)的结果，而不是把这个带参数的函数作为点击回调绑定到菜单项上。如果是在循环里生成菜单，还会出现所有菜单项都使用最后一个chosenMenu值的问题。

解决方案 #

这里有几种靠谱的方式来解决这个问题：

1. 使用箭头函数包裹（推荐，简洁直观）

箭头函数会捕获当前作用域的chosenMenu值，点击菜单项时就会调用带正确参数的loadLoadout：

warSubMenu.addItem(chosenMenu, () => loadLoadout(chosenMenu));

2. 用闭包创建独立作用域（兼容旧环境）

如果你的运行环境不支持ES6箭头函数，可以用立即执行函数（IIFE）来保存当前的chosenMenu值，避免变量共享问题：

warSubMenu.addItem(chosenMenu, (function(currentMenu) {
  return function() {
    loadLoadout(currentMenu);
  };
})(chosenMenu));

3. 使用bind方法绑定参数

bind方法会创建一个新函数，把指定参数预先传给原函数：

warSubMenu.addItem(chosenMenu, loadLoadout.bind(null, chosenMenu));

这里第一个参数null是绑定的this上下文，如果loadLoadout不需要特定的this值，传null或者undefined就可以。

注意事项 #

• 绝对不要用字符串拼接函数调用的方式传递回调，不仅会导致参数传递错误，还可能带来代码注入的安全风险。
• 如果是在循环中生成菜单，一定要确保每个菜单项对应的参数被正确捕获，上面的三种方案都能解决这个问题。

内容的提问来源于stack exchange，提问作者Galaxy