在 javascript 类中调用类方法

这是一个 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()但它不会!


翻阅古今
浏览 651回答 3
3回答

凤凰求蛊

将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()在一个类中定义了两个方法。

大话西游666

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

慕哥9229398

该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
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript