ES6 类：将函数的返回设置为原型方法

Question

假设我需要一个用于窗口滚动事件的事件侦听器，并且我想将此侦听器作为方法存储在 ES6 类的原型上。这很容易。但我还需要一个去抖动函数来减少处理程序的执行次数（例如 _.debounce() 来自 lodash）。因此，我需要引用 _.debounce() 返回的方法作为侦听器，这样我就可以在需要时绑定和取消绑定它。使用 ES6 类执行此操作的最佳方法是什么？ 重点是：我们可以将表达式的结果设置为 ES6 语法的原型方法吗？

class MyClass {

   constructor () {
      this.prop1 = 0;
      window.addEventListener('scroll', this.myListener.bind(this));
   }

   // Is it possible?
   myListener = _.debounce(() => {
      this.prop1 = 1;
   }, 200);   

}

Answer 1

您需要将绑定和去抖动的函数存储为实例的属性：

class MyClass {
    constructor () {
        this.prop1 = 0;
        this.boundListener = _.debounce(this.myListener.bind(this), 200);
        window.addEventListener('scroll', this.boundListener);
    }
    myListener() {
        this.prop1 = 1;
    }
    something() { // called later
        window.removeEventListener('scroll', this.boundListener);
    }
}

您必须为每个实例绑定和去抖动方法，否则它将不知道this.prop1 指的是哪个对象，并且去抖动会干扰其他实例。您不能在原型上执行此操作。但是，您可以完全省略原型：

class MyClass {
    constructor () {
        this.prop1 = 0;
        this.myListener = _.debounce(() => {
            this.prop1 = 1;
        }, 200);   
        window.addEventListener('scroll', this.myListener);
    }
    something() { // called later
        window.removeEventListener('scroll', this.myListener);
    }
}