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

Question

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

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：固定箭头功能

标签： javascriptfunctionselect

Answer 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/