Javascript 如何调用名称在字符串中的实例方法

发布于03月20日

我想调用实例方法，其名称与func输入元素一起传递，但代码失败，因为它在全局window中找不到TestClass个实例方法.我如何才能做到这一点？

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

  result = document.getElementById('result');

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

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

  funcListener = () => {
    window[this.func.value]();
  };

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

new TestClass();

functest.html

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>functest</title>
</head>

<body>
  <input id="func" placeholder="enter function to call: func1, func2" type="text" maxlength="200">
  <label id="result" for="func">result</label>
</body>

推荐答案

window[this.func.value]()—你的函数被包装在类中，而不是全局函数，所以使用this[this.func.value]()代替.

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

  result = document.getElementById('result');

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

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

  funcListener = () => {
    this[this.func.value]();
  };

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

new TestClass();

functest.html

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>functest</title>
</head>

<body>
  <input id="func" placeholder="enter function to call: func1, func2" type="text" maxlength="200">
  <label id="result" for="func">result</label>
</body>