title: Javascript object property is reported as undefined by method called with setInterval
body: <p>I'm trying to wrap my head around Javascript and want to make a simple web applet that can be enabled and disabled via buttons, and while enabled, draws stuff. To write clean(er) code, I wanted to use an object for this. The setup of the page with the buttons is</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;input type="button" name="runbutton"   value="Run"   onclick="game.run();"/&gt;
      &lt;input type="button" name="resetbutton" value="Reset" onclick="game.reset();"/&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      //...
  &lt;/script&gt;
  </code></pre>
  
  <p>and the javascript code is</p>
  
  <pre class="lang-js prettyprint-override"><code>function Game() {
      this.runs = false;
      this.run = function() {console.log('run...'); this.runs = true;};
      this.reset = function() {console.log('reset...'); this.runs = false;};
      this.update = function() {console.log('updating... runs:', this.runs);};
  };
  var game = new Game();
  game.reset();
  setInterval(game.update, 300);
  </code></pre>
  
  <p>So it's an object definition (Game) with one instance (game) that has one boolean property (runs), and three methods. One that runs it, one that stops running, and an update() method that reports whether it runs. update() is repeated every 300 ms using setInterval.</p>
  
  <p><strong>The problem</strong>: the console logs from the update() report the value of this.runs as undefined, instead of false or true. When I open the console and pause it to check the variables, it reports game.runs as false or true correctly. Also, when I add console.log() calls to the run() and reset() reporting the value of this.runs before and after setting it, it seems to report true and false correctly. So the problem seems to be somewhere in update(). It's as if it's using the wrong "this". Maybe setInterval cannot be used on methods?</p>
  
  <p>I tried two other syntaxes for the code, but they seem to have the exact same problem:</p>
  
  <pre class="lang-js prettyprint-override"><code>var game = {
      runs: false,
      run: function() {console.log('run...'); this.runs = true;},
      reset: function() {console.log('reset...'); this.runs = false;},
      update: function() {console.log('update... runs:', this.runs);}
  };
  game.reset();
  setInterval(game.update, 300);
  </code></pre>
  
  <p>and a version that sets setInterval within the object:</p>
  
  <pre class="lang-js prettyprint-override"><code>var game = {
      runs: false,
      i: undefined,
      run: function() {console.log('run...'); this.runs = true; this.i = setInterval(this.update, 300);},
      reset: function() {console.log('reset...'); this.runs = false; clearInterval(this.i);},
      update: function() {console.log('update... runs:', this.runs);}
  };
  game.reset();
  </code></pre>
  
  <p>Same problem.</p>
  
  <p>What's happening? Why does the update() report this.runs as undefined? Am I correct that "this" within the methods indeed refers to the game instance in all cases? Shouldn't I be using setInterval on a method, and instead call a global function?</p>