JavaScript类函数可以添加到ul中，但在需要清除时未定义

Question

我正在为我的投资组合开发一个小的网络应用程序，基本上它模仿了餐厅服务器用来输入客户订单、计算总数和"打印"账单的系统——只在前端，没有后端。到目前为止，除了一件作品，我所做的一切都很成功。我希望可以选择根据要求清除整个法案(假设犯了一个巨大的错误(。我可以在主javascript文件中执行此操作，但如果我尝试使用用于填充它的同一类，则对象为"未定义">

下面是我的类的基本结构(我删除了与这个问题无关的代码(。

class UI{
constructor(){
this.billUL = document.querySelector('#bill-ul');
}
//succeeds, no undefined errors
insertInBill(items){
//get some values out of items
//create and add items to li element
//append li element
this.billUL.appendChild(li);
}
//fails - it evaluates as undefined
clearBill(){
this.billUL.innerHTML = '';
}
}

主javascript文件-这很好用：

const billUL = document.querySelector('#bill-ul');
clearBillBtn = document.getElementById('clear-bill')
clearBillBtn.addEventListener('click',clearBill);
function clearBill() {
billUL.innerHTML = '';
billTotal.innerText = '';
}

基本上，我可以使用类中的函数正确地添加项，但如果我试图清除它，它是未定义的。正如我所说，我的解决方法是在我的主javascript文件中创建clearBill((文件，它就可以工作了。

有人能解释为什么当试图清除而不是无限期添加项时，它在类中是未定义的吗？

Answer 1

因为您使用的是作为对事件侦听器的引用传递的clearBill，所以在执行clearBill时，它内部的this指向具有id="clear-bill"的元素，而不是指向类的实例。

要修复它，只需将bind(this)添加到constructor:中的实例

constructor(){
/* ... other code to run on construction time */
// replace this.clearBill by itself, but bound to `this`
this.clearBill = this.clearBill.bind(this);
}