javascript - 只需单击对象中的 this 按钮

Question

我无法从对象中的其他方法执行方法:

(() => {
  const wordCounter = {
    getText: function() {
       console.log(document.getElementById('textarea').innerHTML);
    },
    fireCounter: function() {
      console.log(this);
      this.getText();
    }
  }
  document.getElementById('button').addEventListener('click', wordCounter.fireCounter);
})();

在此示例中，this 只是一个具有 eventListener 的按钮。我做错了什么？ demo

Uncaught TypeError: this.getText is not a function

Answer 1

事件处理程序将更改其上下文，将其绑定(bind)到带有事件监听器的按钮。您需要将其重新绑定(bind)到处理函数:

 document.getElementById('button').addEventListener('click', wordCounter.fireCounter.bind(wordCounter));

我警告您，这不是最佳解决方案，因为您将无法访问所单击的元素(e.target 除外)

您可以将函数调用包装在处理程序中，以保留所有信息，如下所示:

(() => {
  const wordCounter = {
    text: '',
    getText: function() {
       console.log(document.getElementById('textarea').value); // <--
    },
    fireCounter: function() {
      console.log(this);
      this.getText();
    }
  }
  document.getElementById('button').addEventListener('click', () => {
    wordCounter.fireCounter();
  });
})();

另外，使用textarea.value，而不是innerHTML