javascript - 在 javascript 类中调用类方法

Question

这是一个 Vue 类。方法 signOut() 应在计时器计时时触发。计时器工作，除了调用 signOut()。

问题在于访问类方法。我对 this、self 和访问修饰符感到困惑。我尝试使用 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() 一样工作，但事实并非如此!

EDIT3:this.signOut(); 将产生

Uncaught TypeError: Cannot read property 'signOut' of undefined
    at timer (header.js:30)
    at HTMLDocument.resetTimer

Answer 1

函数创建一个新的上下文。您需要切换到箭头函数并使用 this.signOut()。简化示例:

  timer() {
    var counter = -1;
    var timeout;
    var startTimer = () => {
      counter++;
      console.log(counter);

      this.signOut();
      timeout = setTimeout(startTimer, 1000);
    };

    setTimeout(startTimer, 1000);
  }

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