javascript removeEventListenerがクラス内で動作しない

Question

私はes6クラスで遊んでいて、簡単なマウスクラスを設定しようとしました。

addEventListenerが動作しますが、何らかの理由でremoveEventListenerで削除できません。私はこれがコンテキストバインディングと関係があると推測していますが、これを修正する方法を理解することはできません。

'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)に電話するたびに、新しい機能が返されます。したがって、addEventListener()に渡す関数は、removeEventListenter()に渡す関数と同じではないため、一致するものが見つからないため何も削除されません。削除が機能するためには、まったく同じ機能を両方に渡す必要があります。

同じ機能を追加したり削除したりできるように、使用している関数へのローカルに保存された参照を作成する必要があります。これを行うにはいくつかの方法がありますが、これはオブジェクト指向のコードなので、各オブジェクトが独自の参照を持つことができるように、オブジェクト自体に参照を格納することが必要になります。

'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()