title: Avoid losing this reference and why it's happening
body: <p>I have this fiddle which has an error --> <a href="http://jsfiddle.net/Osoascam/AkZZr/6/" rel="nofollow">http://jsfiddle.net/Osoascam/AkZZr/6/</a>
  (This is the version without the error) --> <a href="http://jsfiddle.net/Osoascam/AkZZr/7/" rel="nofollow">http://jsfiddle.net/Osoascam/AkZZr/7/</a></p>
  
  <p>In it, there is a Module (like the main application), a <code>Module.AjaxInterface</code> which deals with Ajax calls, a <code>Module.Modules.Inbox</code> (which performs tasks related to email inbox), and a  <code>Module.Pages.Gmail</code> which deals with several modules to show a page. All of this is done using the Module Pattern.</p>
  
  <p>Now, you can see there are a LOT of callbacks. I'd like to know what happens to <code>this</code> on these calls...</p>
  
  <p>What I don't get is what is happening to <code>this</code> reference and how can I preserve it:</p>
  
  <pre><code>getMessages: function(params) {
                  var parameters = params || {};
                  params = {
                      // Please note I'm using this, which equals the module
                      successCallback: this.pretendRender,
                      successCallbackParameters: parameters,
                      json: params.json
                  };
                  var test = new Module.AjaxInterface(params);
                  test.ajaxCall();
              },
  </code></pre>
  
  <p>So, the call to a function inside the module itself works... Then, it calls <code>test.ajaxCalls</code>, which in return calls <code>pretendRender()</code>. Now, on <code>pretendRende</code>r I have this:</p>
  
  <pre><code> pretendRender: function(data, parameters) {
                  // LINE 106 that is causing the ERROR
                  // It says "this.addColor() is not defined and THIS = window now
                  data.color = this.addColor();
                  parameters.successCallback(data);
              },
  
              addColor: function() {
                return "#AD9";
             }
  </code></pre>
  
  <p>My question is... What is happening to <code>this</code> reference? Why is it changing to <code>window</code>? How can I fix it? I know I could use <code>call</code> or <code>apply</code>, but the function <code>pretendRender</code> is being called on <code>AjaxInterface</code>, and the reference to <code>Modules.Inbox</code> has been lost (unless I use <code>caller</code>, which I can't under <code>"strict"</code>). I know I can pass <code>this</code> to <code>AjaxInterface</code> to preserve it, but what I really want is to truly understand what is going on and create an elegant solution.</p>