Javascript 此in对象仅单击按钮

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

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

在本例中，

此

只是一个按钮，它具有eventListener。我做错了什么

未捕获类型错误：this.getText不是函数

---

事件处理程序将更改其上下文，将其绑定到按钮上，并在按钮上设置事件侦听器。您需要将其重新绑定到处理函数：

 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();
  });
})();

（（）=>{
常量字计数器={
文本：“”，
getText:function（）{
console.log（document.getElementById（'textarea'）.value）；//{
fireconter（）；
});
})();

---

另外，使用

textarea.value

，而不是innerHTML

事件处理程序将更改此的上下文，并将其绑定到按钮上，其中包含事件侦听器。您需要将其重新绑定到处理函数：

 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();
  });
})();

（（）=>{
常量字计数器={
文本：“”，
getText:function（）{
console.log（document.getElementById（'textarea'）.value）；//{
fireconter（）；
});
})();

另外，使用

textarea.value

，而不是innerHTML

这是我的解决方案：

(() => {
  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”。

这是我的解决方案：

(() => {
  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”然后是函数。

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

例如：

var应答={
价值：42，
get:function（）{
返回此.value；
}
};
console.log(
回答：get（）
);
var getAnswer=answer.get；
console.log(
getAnswer（）
)；

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

例如：

var应答={
价值：42，
get:function（）{
返回此.value；
}
};
console.log(
回答：get（）
);
var getAnswer=answer.get；
console.log(
getAnswer（）
)

最佳选项是什么？最佳选项是什么？我选择了第一个选项，从我的帖子中刷新演示。我选择了第一个选项，从我的帖子中刷新演示。