如何调用名称以字符串形式传入的类实例方法？

当前代码执行失败的核心原因：你试图从全局window对象中查找TestClass的实例方法，但这些方法属于实例本身，并非全局属性，自然找不到。

修改方案 #

直接从当前实例this中获取目标方法，并增加安全校验避免报错：

修改后的JavaScript代码：

class TestClass {
  func = document.getElementById('func');

  result = document.getElementById('result');

  func1 = () => {
    this.result.innerHTML = 'func1 called';
  };

  func2() {
    this.result.innerHTML = 'func2 called';
  }

  funcListener = () => {
    const methodName = this.func.value.trim();
    const targetMethod = this[methodName];
    // 校验方法是否存在且为函数类型
    if (typeof targetMethod === 'function') {
      targetMethod();
    } else {
      this.result.innerHTML = `方法 ${methodName} 不存在`;
    }
  };

  constructor() {
    this.func.addEventListener('change', this.funcListener);
  }
}

new TestClass();

关键修改说明 #

1. 方法访问路径修正：把window[this.func.value]()改为从当前实例this中获取方法，这才是实例方法的正确访问方式。
2. 安全校验：增加typeof targetMethod === 'function'判断，避免用户输入无效名称时控制台报错，同时给用户明确提示。
3. 输入处理：用trim()去除输入内容的首尾空格，避免因空格导致方法名匹配失败。

另外，由于funcListener是箭头函数，它的this始终指向TestClass实例，所以调用普通方法func2时，方法内部的this也能正确指向实例，确保this.result可以正常访问。

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