Javascript setInterval调用类方法

我无法使计时器调用我的类方法。这很好：

MyInput=class{
构造函数（参数）{
让输入=参数输入；
input.addEventListener（'focus'，this.setTimer）；
}
setTimer（）{
this.timer=window.setInterval（（）=>{
console.log（'yay'）；
}, 300);
}
};

但这是：

MyInput=class{
构造函数（参数）{
让输入=参数输入；
input.addEventListener（'focus'，this.setTimer）；
}
setTimer（）{
this.timer=window.setInterval（this.lookupOptions，300）；
}
查找选项（）{
console.log（'yay'）；
}
};

---

不调用

lookupOptions

方法，而是浏览器中的“我的开发人员工具”每隔300ms停止一次调试器（使用不同的值进行检查-始终与计时器同步）。过了一会儿，它打开了一个奇怪的文件

VM[number]

，文件编号不同。我不知道为什么它不起作用。当我以同样的方式在类外使用计时器时，它工作得很好，调用类方法似乎有问题，但我无法找出问题所在。您能帮忙吗？

当

setInterval

调用函数时，它会将

此

的上下文更改为

setInterval

的范围，这将是

窗口

对象

在

setInterval

中用一个。这可以防止范围被更改

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");
    }
}

或者使用每个函数对象上的方法手动设置

此

的范围

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");
    }
}

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

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");
    }
}

---

当

setInterval

调用函数时，它会将

此

的上下文更改为

setInterval

的范围，该范围将是

窗口

对象

在

setInterval

中用一个。这可以防止范围被更改

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");
    }
}

或者使用每个函数对象上的方法手动设置

此

的范围

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");
    }
}

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

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");
    }
}

---

setInterval（this.lookupOptions.bind（this），300）@enno.void Uncaught TypeError:无法读取未定义的箭头函数的属性“bind”以将实例保留为上下文：

input.addEventListener（“focus”，e=>this.setTimer（e））

和

this.timer=window.setInterval（（）=>this.lookupOptions（），300）这是否回答了您的问题？setInterval（this.lookupOptions.bind（this），300）@enno.void Uncaught TypeError:无法读取未定义的箭头函数的属性“bind”以将实例保留为上下文：
input.addEventListener（“focus”，e=>this.setTimer（e））
和
this.timer=window.setInterval（（）=>this.lookupOptions（），300）这是否回答了您的问题？不幸的是，绑定方法给了我“ncaught TypeError:无法读取HTMLInputElement.setTimer（clinput.js:44）中未定义的属性“bind”的错误，而arrow方法“不是函数”错误。您还需要
this.setTimer.bind（this）
为什么
input.addEventListener（“焦点”，this.setTimer）
在没有绑定的构造中工作？因为在构造函数中，
this
引用实例，所以
this.setTimer
正确地指向方法。但是，如果没有绑定，
这个
内部的
setTimer
指向输入。@ChrisG非常感谢您的解释！现在我明白它是如何工作的了。它正在工作！不幸的是，绑定方法给了我“ncaught TypeError:无法读取HTMLInputElement.setTimer（clinput.js:44）中未定义的属性“bind”的错误，而arrow方法“不是函数”错误。您还需要
this.setTimer.bind（this）
为什么
input.addEventListener（“焦点”，this.setTimer）
在没有绑定的构造中工作？因为在构造函数中，
this
引用实例，所以
this.setTimer
正确地指向方法。但是，如果没有绑定，
这个
内部的
setTimer
指向输入。@ChrisG非常感谢您的解释！现在我明白它是如何工作的了。它正在工作！