title: Calling class methods inside javascript class
body: <p>This is a Vue class. The method <code>signOut()</code> should fire when the timer ticks. The timer works, except the call <code>signOut()</code>.</p>
  
  <p>The problem is with accessing the class method. I'm confused with <code>this</code>, self and access modifiers.
  I tried with <code>this.signOut()</code> but it does not work.</p>
  
  <p>How can I call the method <code>signOut</code>?</p>
  
  <pre class="lang-js prettyprint-override"><code>"use strict";
  
  (async (globals, config, loader, application) =&gt; {
  
      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(); //&lt;- 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);
  </code></pre>
  
  <p>Please note:</p>
  
  <pre class="lang-js prettyprint-override"><code>        signOut() {
              storageLocal.delete('account');
              window.location = '/signin.html';
          }
  
          timer() {
              //document.getElementById("timer"), 
              var counter = -1;
              var timeout;
              var startTimer = function timer() {
  </code></pre>
  
  <p>as you can see 'signOut()' is 2 levels below active functions. The logic says it would work like <code>this.parent.signOut()</code> but it DOES NOT !</p>
  
  <p>EDIT3: <code>this.signOut();</code> will produce</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'signOut' of undefined
      at timer (header.js:30)
      at HTMLDocument.resetTimer
  </code></pre>