在 javascript 类中调用类方法

Question

这是一个 Vue 类。该方法signOut()应在计时器滴答时触发。计时器工作，除了 call signOut()。问题在于访问类方法。我对this, self 和 access 修饰符感到困惑。我试过了，this.signOut()但它不起作用。我如何调用该方法signOut？"use strict";(async (globals, config, loader, application) => {    const storageLocal = await loader.services.storage.local.getAsync();    class HeaderComponent {        #foo = a;        constructor(tag) {            this.tag = tag;            this.timer();        }        signOut() {            storageLocal.delete('account');            window.location = '/signin.html';        }        timer() {            //document.getElementById("timer"),             var counter = -1;            var timeout;            var startTimer = function timer() {                counter++;                console.log(counter);                signOut(); //<- error can't call class method                timeout = setTimeout(timer, 10000);            };            function resetTimer() {                // here you reset the timer...                clearTimeout(timeout);                counter = -1;                startTimer();                //... and also you could start again some other action            }            document.addEventListener("mousemove", resetTimer);            document.addEventListener("keypress", resetTimer);            startTimer();        }        data() {            return { account: storageLocal.account };        }    }    const component = new HeaderComponent('component-header')    loader.components.set(component.tag, component);})(window, window.config, window.loader, window.application);请注意：        signOut() {            storageLocal.delete('account');            window.location = '/signin.html';        }        timer() {            //document.getElementById("timer"),             var counter = -1;            var timeout;            var startTimer = function timer() {如您所见，“signOut()”比活动函数低 2 个级别。逻辑说它会工作，this.parent.signOut()但它不会！

Answer 1

将function创建一个新的上下文。您需要切换到箭头功能并使用this.signOut(). 简化示例：

  timer() {

    var counter = -1;

    var timeout;

    var startTimer = () => {

      counter++;

      console.log(counter);

      this.signOut();

      timeout = setTimeout(startTimer, 1000);

    };

    setTimeout(startTimer, 1000);

  }

此外，您signOut()在一个类中定义了两个方法。

Answer 2

你需要this并称之为this.signOut()

Answer 3

该startTimer功能全不中的上下文中运行HeaderComponent的实例。 thisinstartTimer将指向window它作为 in 中的处理程序执行的时间setTimeout。

为了访问 的实例HeaderComponent，要么使用箭头函数（如之前的答案中所指出的那样。另见箭头函数表达式），它将指向this外部上下文（即HeaderComponent的实例）或定义一个标识符，timer其中指向到实例（例如const self = this;）并使用self而不是thisin startTimer。

将此应用于您的示例（为了保持一致性，我使用了var代替const）：

        timer() {

            var counter = -1;

            var timeout;

            var self = this;

            var startTimer = function() { // Don't use a named function here, it only leads to more confusion

                counter++;

                console.log(counter);

                self.signOut(); // Use `this` of the outer context

                timeout = setTimeout(startTimer, 10000);  // Use the declared identifier

            };

            // Rest of the method

        }

this对于那些来自不同编程语言的人来说，Javascript 可能有点混乱。如果您想了解更多细节，我建议您阅读MDN 参考资料this和Closures