Question

让我说我需要一个窗口滚动事件的事件监听器，我想将这个监听器作为方法存储在ES6类的原型上。这很容易。但是我还需要一个去抖动函数来减少处理程序的执行次数（例如来自lodash的例如_.debounce（））。所以，我需要引用_.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);
    }
}

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

1 个答案: