title: Why does the variable I attach `this` to in the constructor lose its binding?
body: <p>I'm really beating my head against this one. I cannot figure out how javascript's binding works. In the constructor of my class, I set <code>var self = this;</code>, which I thought would forever give me an absolute reference to my instance. However, that doesn't seem to be the case at all. </p>
  
  <p>Below is the primary structure of my class. </p>
  
  <pre><code>var MyClass = (function() {
      function MyClass(data) {
          var self = this; 
          this._element = $('.someSelector');   
      }
  
      MyClass.prototype.styleIt = function() {
          self._element.css('display', 'block'); 
      }
      return MyClass;
  
  })();
  </code></pre>
  
  <p>In another class, which holds instances of <code>MyClass</code>, I call the <code>styleIt</code> function as follows: </p>
  
  <pre><code>Class2:
  ...
      $('#id').click(function(evt) {
          evt.preventDefault(); 
          for (int i = 0; i &lt; self._objects.length; i++) {
              [i].styleIt(); 
          }
      }
  </code></pre>
  
  <p>However, confusingly (to me) the <code>self</code> inside of <code>styleIt</code> is bound to <code>window</code>! What is happening here? </p>