title: How to create a JavaScript "class" that adds methods to prototype AND uses 'this' correctly
body: <p>I've always been taught the correct way to simulate a class in JavaScript is by adding methods to the prototype outside the function that will be your class, like this:</p>
  
  <pre><code>function myClass()
  {
      this.myProp = "foo";
  }
  
  myClass.prototype.myMethod = function()
  {
      console.log(this);
  }
  
  myObj = new myClass();
  myObj.myMethod();
  </code></pre>
  
  <p>I've been running into the issue that the <code>this</code> in my methods resolves to the global Window object, <a href="http://www.quirksmode.org/js/this.html" rel="nofollow">as explained best on quirksmode</a>.</p>
  
  <p>I've tried doing the <code>var that = this;</code> trick Koch mentions, but since my methods are outside my class, my <code>that</code> variable is no longer in scope.  Perhaps I'm just not understanding it completely.</p>
  
  <p>Is there a way I can create a class in JavaScript where methods are not recreated each implementation and <code>this</code> will always point to the object?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The simplified code above works but I've had many times where I declare a "class" exactly like above and when I call <code>myObj.myMethod()</code>, it comes back as a <code>Window</code> object.  I've read over every explanation of <code>this</code> that I could find, such as the one I linked to and still don't understand why this problem sometimes happens.  Any idea of a situation where the code could be written like above and <code>this</code> would refer to <code>Window</code>?</p>
  
  <p>Here's the implementation I'm currently having problems with, but when I simplify it down like above into a few lines, I no longer have the problem:</p>
  
  <p>HTML File:</p>
  
  <pre><code>&lt;script type="text/javascript" src="./scripts/class.Database.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./scripts/class.ServerFunctionWrapper.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./scripts/class.DataUnifier.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./scripts/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>class.DataUnifier.js:</p>
  
  <pre><code>function DataUnifier()
  {
      this._local = new Database();
      this._server = new ServerFunctionWrapper();
      this.autoUpdateIntervalObj = null;
  }
  
  DataUnifier.prototype.getUpdates = function()
  {
      this._server.getUpdates(updateCommands)
      {
          console.log(updateCommands);
          if (updateCommands)
          {
              executeUpdates(updateCommands);
          }
      }
  }
  //interval is in seconds
  DataUnifier.prototype.startAutoUpdating = function(interval)
  {
      this.stopAutoUpdating();
      this.autoUpdateIntervalObj = setInterval(this.getUpdates,interval * 1000);
  }
  DataUnifier.prototype.stopAutoUpdating = function()
  {
      if (this.autoUpdateIntervalObj !== null)
      {
          clearInterval(this.autoUpdateIntervalObj);
          this.autoUpdateIntervalObj = null;
      }
  }
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>var dataObj = new DataUnifier();
  
  $(document).ready(function ev_document_ready() {
      dataObj.startAutoUpdating(5);
  }
  </code></pre>
  
  <p>I've cut out some code that shouldn't matter but maybe it does.  When the page loads and dataObj.startAutoUpdating(5) is called, it breaks at the this.stopAutoUpdating(); line because <code>this</code> refers to the <code>Window</code> object.  As far as I can see (and according to the link provided), <code>this</code> should refer to the DataUnifier object.  I have read many sources on the <code>this</code> keyword and don't understand why I keep running into this problem.  I do not use inline event registration.  Is there any reason code formatted like this would have this problem?</p>
  
  <p><strong>EDIT 2:</strong> For those with similar issues, see "The <code>this</code> problem" half way down the page in this Mozilla docs page: <a href="http://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval" rel="nofollow">http://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval</a></p>