title: this.interval is undefined inside a class function
body: <p>in summarize I want to blink an object material in BJS, so I create two functions <code>blink()</code> and <code>stopBlink()</code>:</p>
  
  <pre><code>function blink(obj, delay, box) {
    var changeMaterial = function(obj, newMaterial) {
      {
        obj.material = newMaterial;
      }
    };
    oldMaterial = obj.material;
    interval = (function() {
      var Toggle = true;
      return setInterval(function() {
        if (Toggle) changeMaterial(obj, box);
        else {
          changeMaterial(obj, OriginalStairMaterial);
        }
        Toggle = !Toggle;
      }, delay);
    })();
  }
  
  function stopBlink(obj, duration) {
    setTimeout(function() {
      obj.material = oldMaterial;
      clearInterval(interval);
    }, duration);
  }
  </code></pre>
  
  <p>So I called my function inside JQuery Ready function :</p>
  
  <pre><code>$(document).ready(function() {
      $("#btn1").click(function() {
          if(Toggle1)
               blink(stairMesh,100,boxMaterial[0]);
          else 
              stopBlink(stairMesh,500);
        Toggle1=!Toggle1;    
      }
  );
  </code></pre>
  
  <p>until now everything works good :), I decided to creat a class and implement my functions inside it (because I want to use polymorphism to redefine <code>blink()</code> and <code>stopBlink()</code> functions).</p>
  
  <pre><code>class A {
    blink() {}
    stopBlink() {}
  }
  class B extends A {
    constructor(oldMaterial) {
      super();
      this.oldMaterial = oldMaterial;
      this.interval = null;
    }
  
    blink(obj, delay, box, duration) {
      var changeMaterial = function(obj, newMaterial) {
        {
          obj.material = newMaterial;
        }
      };
  
      //var oldMaterial=obj.material;
  
      this.interval = (function() {
        var Toggle = true;
        return setInterval(
          function() {
            if (Toggle) changeMaterial(obj, box);
            else {
              changeMaterial(obj, OriginalStairMaterial);
            }
  
            Toggle = !Toggle;
          },
  
          delay
        );
      })();
  
      console.log(this.interval);
    }
  
    stopBlink(obj, duration) {
      setTimeout(function() {
        obj.material = oldMaterial;
        console.log(this.interval);
  
        clearInterval(this.interval);
      }, duration);
    }
  }
  </code></pre>
  
  <p>and I create a new object inside ready function: </p>
  
  <pre><code>
  $(document).ready(function() {
    var a = new B();
    $("#btn1").click(function() {
        if(Toggle1)
              a.blink(stairMesh,100,boxMaterial[0]);
  
        else 
          a.stopBlink(stairMesh,500);
  
      Toggle1=!Toggle1;  
    }
  );
  </code></pre>
  
  <p>The problem is, when I click the button the <code>blink()</code> function works goos and my object blinks, but when I click again in order to stop blining it continues to blink!</p>
  
  <p>I tried to <code>console.log(this.interval)</code> in <code>blink()</code>, it gives me a number (11), but when I console it in <code>stopBlink()</code> it is undefined!</p>