setInterval 调用类方法

Question

我无法让计时器调用我的类方法。这工作正常：

MyInput = class {
 constructor(params) {
  let input = params.input;
  input.addEventListener('focus', this.setTimer);
 }

 setTimer() {
  this.timer = window.setInterval(() => {
   console.log('yay');
  }, 300);
 }
};

但是这个：

MyInput = class {
 constructor(params) {
  let input = params.input;
  input.addEventListener('focus', this.setTimer);
 }

 setTimer() {
  this.timer = window.setInterval(this.lookupOptions, 300);
 }

 lookupOptions() {
  console.log('yay');
 }
};

不调用lookupOptions 方法，而是我在浏览器中的开发工具每 300 毫秒停止一次调试器（检查不同的值 - 始终与计时器同步）。过了一会儿，它打开了一些奇怪的文件VM[number]，编号不同。我不知道为什么它不起作用。当我以同样的方式在课堂外使用计时器时，它工作正常，调用类方法似乎有些问题，但我无法弄清楚问题可能是什么。你能帮忙吗？

Answer 1

当setInterval 调用该函数时，它会将this 的上下文更改为setInterval 的范围，即window 对象。

在setInterval 中使用arrow function expression 包装回调。这可以防止范围被更改。

MyInput = class {
    constructor(params) {
        let input = params.input;
        input.addEventListener("focus", () => {
            this.setTimer();
        });
    }

    setTimer() {
        this.timer = window.setInterval(() => {
            this.lookupOptions();
        }, 300);
    }
  
    lookupOptions() {
         console.log("yay");
    }
}

或者使用每个函数对象上存在的.bind() 方法手动设置this 的范围。

MyInput = class {
    constructor(params) {
        let input = params.input;
        const boundSetTimer = this.setTimer.bind(this)
        input.addEventListener("focus", boundSetTimer);
    }

    setTimer() {
        const boundLookupOptions = this.lookupOptions.bind(this)
        this.timer = window.setInterval(boundLookupOptions, 300);
    }
  
    lookupOptions() {
         console.log("yay");
    }
}

或者使用实验性的public fields，它的作用与箭头函数表达式有些相同，但作为对象的方法。

MyInput = class {
    constructor(params) {
        let input = params.input;
        input.addEventListener("focus", this.setTimer);
    }

    setTimer = () => {
        this.timer = window.setInterval(this.lookupOptions, 300);
    }
  
    lookupOptions = () => {
         console.log("yay");
    }
}