在 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(). 简化示例：&nbsp; timer() {&nbsp; &nbsp; var counter = -1;&nbsp; &nbsp; var timeout;&nbsp; &nbsp; var startTimer = () => {&nbsp; &nbsp; &nbsp; counter++;&nbsp; &nbsp; &nbsp; console.log(counter);&nbsp; &nbsp; &nbsp; this.signOut();&nbsp; &nbsp; &nbsp; timeout = setTimeout(startTimer, 1000);&nbsp; &nbsp; };&nbsp; &nbsp; setTimeout(startTimer, 1000);&nbsp; }此外，您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）：&nbsp; &nbsp; &nbsp; &nbsp; timer() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var counter = -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var timeout;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var self = this;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var startTimer = function() { // Don't use a named function here, it only leads to more confusion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(counter);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.signOut(); // Use `this` of the outer context&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timeout = setTimeout(startTimer, 10000);&nbsp; // Use the declared identifier&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Rest of the method&nbsp; &nbsp; &nbsp; &nbsp; }this对于那些来自不同编程语言的人来说，Javascript 可能有点混乱。如果您想了解更多细节，我建议您阅读MDN 参考资料this和Closures