如何在通过DOM选择器识别对象时访问JS类方法

Question

假设我想创建一个JavaScript类，如下所示。我们还可以说，在上一个时间点上，我已经创建了该类的一些实例。

class Fruit {
doSomething(input){
// something to do in here;
}
}
let apple = new Fruit();
let banana = new Fruit();
let orange = new Fruit();

现在，假设我希望能够访问doSomething()方法。在我的场景中，我想访问与HTML选择器中的值相对应的对象的方法。

<select name="fruit" id="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="orange">orange</option>
</select>

let selectedFruit = document.getElementById("fruit");
selectedFruit.doSomething();

然而，当我尝试这样的东西时，我得到的具体错误是：

Uncaught TypeError: selectedFruit.doSomething is not a function

因此，虽然doSomething()是Fruit类上的一个方法，并且我已经创建了一些作为Fruit类实例的对象，但每当我试图动态地确定要对哪个对象执行doSomething()方法时，我都会遇到这个错误。

我该如何解决这个问题？

在我的用例中，用户可以在任何时候向下拉列表中添加新的水果，因此我确实需要能够根据当前选择的内容动态识别要执行doSomething()的对象。

此外，很抱歉，如果我在任何时候使用了不正确的术语/令人困惑的措辞，我仍然是一个很好的学习者，所以我可能在某个地方使用了错误的单词。

Answer 1

将它们放在一个对象中，您可以使用括号符号来引用它。

class Fruit {
constructor(foo) {
this.foo = foo;
}
doSomething(input) {
console.log(this.foo);
}
}
const basket = {
apple: new Fruit('a'),
banana: new Fruit('b'),
orange: new Fruit('o')
};
document.querySelector("#fruit").addEventListener("change", function () {
basket[this.value].doSomething();
});

<select name="fruit" id="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="orange">orange</option>
</select>