javascript removeEventListener bir sınıf içinde çalışmıyor

Question

Es6 sınıfları ile uğraştım ve basit bir fare sınıfı oluşturmayı denedim.

addEventListener çalışır, ancak bazı nedenlerle onları kaldıramıyorum removeEventListener. Sanırım bunun bağlama bağlama ile ilgili bir şey var, ama bunu nasıl çözeceğimi anlayamıyorum.

'use strict' 
class Mouser { 
    constructor() { 
     this.counter = 0 
     this.clicked = function (event) { 
      this.counter++ 
      console.log('clicks:', this.counter) 
      if (this.counter >= 10) this.remove() 
     } 
     window.addEventListener('click', this.clicked.bind(this)) 
    } 

    remove() { 
     console.log('Removing click listener') // this line runs .. 
     window.removeEventListener('click', this.clicked.bind(this)) 
    } 
} 

var mouse = new Mouser() 

Answer 1

this.clicked.bind(this) numaralı telefonu her aradığınızda, yeni ve farklı bir işlev döndürür. Böylece, addEventListener()'a ilettiğiniz işlev, removeEventListenter()'a ilettiğiniz işlevle aynı değildir, bu nedenle kaldırma bir eşleşme bulamaz ve hiçbir şey kaldırmaz. Kaldırmak için her ikisine de aynı işlevi iletmelisiniz.

Kullandığınız işlevin yerel olarak saklanmış bir referansı oluşturmanız gerekir, böylece eklemek ve kaldırmak için aynı olanı iletebilirsiniz. Bunu yapmanın birkaç yolu vardır, ancak bu nesne yönelimli kod olduğundan, her nesnenin kendi referansı olabilmesi için referansı nesnenin kendisinde saklamak isteyeceksiniz.

'use strict' 
class Mouser { 
    constructor() { 
    this.counter = 0 
    this.clicked = function (event) { 
     this.counter ++ 
     console.log('clicks:', this.counter) 
     if (this.counter >= 10) this.remove() 
    } 
    // save the click handler so it can be used in multiple places 
    this.clickHandler = this.clicked.bind(this); 
    window.addEventListener('click', this.clickHandler) 
    } 

    remove() { 
    console.log('Removing click listener') // this line runs .. 
    window.removeEventListener('click', this.clickHandler) 
    } 
} 

var mouse = new Mouser()