有没有办法通过选择将“后缀”附加到javascript函数？答案

【问题标题】：Is there a way to append "suffix" to javascript function through a select?有没有办法通过选择将“后缀”附加到javascript函数？
【发布时间】：2019-01-09 09:02:37
【问题描述】：

我不知道这到底叫什么，也不知道它是否可能。但基本上我想向“不完整”的方法添加东西。例如。

captureDog =()=>{
  alert('caught dog');
}

captureCat =()=>{
  alert('caught cat');
}

<select id="pet">
   <option value="Cat">cat</option>
   <option value="Dog">dog</option>
</select>

基本上我有一大堆捕获方法（我要么自己硬编码编写它们，要么创建另一种方法来创建它们）。我想基本上调用不同的方法，具体取决于选择的值（表现为方法的后缀）。我有一些虚拟代码正在尝试执行我在下面所说的操作。

var selectField = document.getElementById("pet");
selectField.addEventListener("onchange", "capture"+ selectField.value ="()");

我最好只用普通的 javascript 来完成。

编辑：语法 EDIT2：固定箭头功能

【问题讨论】：

假设全局范围，window['capture'+selectField.value]() 会这样做，如果你修复了大写字母问题。否则，建立一个地图，例如。 ({cat: captureCat, dog: captureDog})[selectField.value]();
看起来你的第一个 sn-p 有语法错误。你的意思是做function captureDog() {。您将函数声明与箭头函数混淆了。
感谢您注意到大写错误。我对你的两个建议都有疑问......它们是如何工作的？澄清一下，我之前从未使用过 windows[] 以及地图的任何东西......它是如何工作的？
function capture(type) { alert("caught " + type); } 如果这样的方法不起作用，请提供一个更好地代表您的实际问题以及该解决方案为什么不起作用的示例。
一个简单的方法是使用一个包含键值对的对象，其中值是您要运行的函数，键是函数的名称。

标签： javascript function select

【解决方案1】：

我认为是这样的：

var selectField = document.getElementById("pet");

let X = {
    cat: function(){
    console.log("cat 123")
  },
    dog: function(){
    console.log("dog 123")
  }
}

selectField.addEventListener("change", x => {
let val = x.target.options[x.target.selectedIndex].value

X[val]();

});

小提琴：https://jsfiddle.net/5rnke6zy/10/

【讨论】：