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

未捕获的TypeError：this.getText不是函数

Answer 1

事件处理程序将更改其上下文，并将其绑定到具有事件侦听器的按钮。您需要将其重新绑定到处理功能：

 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

Answer 2

这是我的解决方案：

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

使用“ this”，您尝试调用“ wordCounter”常量的外部函数。因此，您必须调用常量而不是函数后面的“ this”。

Answer 3

事件处理程序的确会更改函数的上下文，但是真正的问题是，通过将函数从其对象中移出，您还需要将函数与其原始上下文解耦。

示例：

var answer = {
  value: 42,
  get: function () {
    return this.value;
  }
};

console.log(
  answer.get()
);

var getAnswer = answer.get;

console.log(
  getAnswer()
);

知道您有两个选择：

不要将函数带出对象。

button.addEventListener('click', function () {
  wordCounter.fireCounter();
});

确保“独立” fireCounter仍与bind的对象相关联

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

这在对象只是单击按钮

3 个答案: