title: Call a class function from a async class function
body: <p>I want to call a function inside a class from another function inside the same class. This works well with <code>this.myFunction()</code>. But when the calling function is for example triggered by a click eventhandler, <code>this</code> for the class is no longer available.</p>
  <p>Normally I would use <code>new MyClass().myFunction()</code>but in this case I am losing values and objects from &quot;the first&quot; instance.</p>
  <p>In my case I started an interval, that i want to clear after a button click. But when I create a new instance of my class, the interval is of course not longer available.</p>
  <p>How should I call <code>functionToCall()</code> from the <code>myButton.addEventListener(&quot;click&quot;, function () {</code>? Or is this a generally wrong approach?</p>
  <p><strong>MyClass.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class MyClass {
  
  constructor() {
   this.refreshIntervalId = 0;
  }
  
  functionToCall() {
  
   clearInterval(this.refreshIntervalId); // this has to be the instance
  
  }
  
  buttonFunction() {
  
   let myButton = document.getElementById(myButton);
  
   myButton.addEventListener(&quot;click&quot;, function () {
    this.functionToCall(); // doesn't work (of course)
   });
  
  }
  
  startInterval() {
   this.refreshIntervalId = setInterval(() =&gt; {
     this.buttonFunction()
   }, 1000);
  }
  
  }
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import {
    MyClass
  } from './MyClass';
  
  let myClass = new MyClass();
  myClass.startInterval();
  
  </code></pre>