如何在 JavaScript 中刪除 class object 的引用？

Question

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('start'),addEventListener('click', () =>{
    var car = new Car('Audi');
    document.addEventListener('keyup', e=>{
      car.printName();
    })
  })
})

class Car{
  constructor(name){
    this.name = name
  }

  printName(){
    console.log(this.name)
  }
}

我正在嘗試使用 JavaScript OOP 創建一個簡單的游戲。 在 DOM 加載並且玩家點擊“開始”按鈕后，通過傳遞對象的 name 屬性創建了一個新的 Car object。 為簡單起見，目前 class 中的唯一方法是打印的“printName”。

問題是以前的 object 仍保留在 memory 中，即使每當玩家點擊開始按鈕時游戲應該重置，因為我創建了一個全新的 object。

請注意，在上面的代碼中，每當玩家點擊“開始”按鈕兩次並按下任意鍵時，都會為新舊 object 調用“printName”方法。 我該如何解決這個問題？

Answer 1

這里的問題是，每次單擊開始按鈕時，您都會創建一個新的 keyup 事件偵聽器，因為您正在傳遞一個匿名（新）function。

要解決此問題，您可以將常規 function 傳遞給keyup listener器，並在start click listener器之外添加var car聲明，而不是匿名 function ，以便car成為全局變量。 因為常規的 function（下面的 doSomething()）總是具有相同的地址，所以不會在每次單擊開始按鈕時分配新的事件偵聽器。

另一種解決方案是將 onkeyup 事件偵聽器聲明移到開始單擊偵聽器之外，但它不會與按下開始按鈕相關聯。

檢查以下：

 document.addEventListener("DOMContentLoaded", () => { var car; document.getElementById('start').addEventListener('click', () =>{ car = new Car('Audi'); document.addEventListener('keyup', doSomething); // gets assigned only once document.addEventListener('keyup', () => { // gets assigned every time console.log("BMW"); }); }); // gets assigned once, after DOM loads, but is not tied to the start button document.addEventListener('keyup', () => { console.log("PORSCHE"); }); function doSomething() { car.printName(); } }); class Car{ constructor(name){ this.name = name } printName(){ console.log(this.name) } }

 <input type="button" id="start" value="Start"/>

Answer 2

您可以通過在click事件之外添加keyup事件來解決此問題，以便click事件停止向堆棧添加多個keyup事件偵聽器，例如：

 document.addEventListener("DOMContentLoaded", () => { var car; document.querySelector('start'), addEventListener('click', () => { car = new Car('Audi'); }) var handleKeyup = () => car && car.printName(); document.addEventListener('keyup', handleKeyup, false) }) class Car { constructor(name) { this.name = name } printName() { console.log(this.name) } }

 <button class="start">Start</button>