时间戳

首页 > 解决方案 > JavaScript 类函数可以添加到 ul，但要清除时未定义

javascript - JavaScript 类函数可以添加到 ul，但要清除时未定义

问题描述

我正在为我的投资组合开发一个小型网络应用程序，基本上它模仿了餐厅服务员用来输入客户订单、计算总数和“打印”账单的那种系统——只有前端，没有后端。到目前为止，我所做的一切都有效，除了一件。我希望可以根据要求清除整个账单（假设犯了一个巨大的错误）。我可以在主 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() 文件并且它可以工作。

任何人都可以解释为什么它在尝试清除时在类中未定义，但在尝试无限期地添加项目时却没有？

标签： javascript

解决方案

因为您使用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);
}

推荐阅读