javascript removeEventListener không hoạt động bên trong một lớp học

Question

Tôi đã chơi xung quanh với các lớp học es6 và cố gắng thiết lập một lớp chuột đơn giản.

addEventListener hoạt động, nhưng vì một lý do nào đó, tôi không thể xóa chúng với removeEventListener. Tôi đoán điều này có liên quan đến bối cảnh ràng buộc, nhưng tôi không thể tìm ra cách sửa lỗi này.

'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

Mỗi lần bạn gọi this.clicked.bind(this), nó trả về một hàm mới và khác. Do đó, hàm bạn đang chuyển đến addEventListener() không giống với hàm bạn đang chuyển đến removeEventListenter() do đó việc xóa không tìm thấy kết quả phù hợp và không xóa bất kỳ thứ gì. Bạn phải vượt qua cùng một chức năng chính xác cho cả hai để loại bỏ để làm việc.

Bạn sẽ phải tạo tham chiếu được lưu trữ cục bộ cho hàm bạn đang sử dụng để bạn có thể chuyển cùng một chức năng để thêm và xóa. Có một số cách để làm điều đó, nhưng vì đây là mã hướng đối tượng, bạn sẽ muốn lưu trữ tham chiếu trong chính đối tượng để mỗi đối tượng có thể có tham chiếu riêng của nó.

Dưới đây là một cách để làm điều đó:

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