title: How does "this" keyword work within a function?
body: <p>I just came across an interesting situation in JavaScript.  I have a class with a method that defines several objects using object-literal notation.  Inside those objects, the <code>this</code> pointer is being used.  From the behavior of the program, I have deduced that the <code>this</code> pointer is referring to the class on which the method was invoked, and not the object being created by the literal.  </p>
  
  <p>This seems arbitrary, though it is the way I would expect it to work.  Is this defined behavior?  Is it cross-browser safe?  Is there any reasoning underlying why it is the way it is beyond "the spec says so" (for instance, is it a consequence of some broader design decision/philosophy)?  Pared-down code example:</p>
  
  <pre><code>// inside class definition, itself an object literal, we have this function:
  onRender: function() {
  
      this.menuItems = this.menuItems.concat([
          {
              text: 'Group by Module',
              rptletdiv: this
          },
          {
              text: 'Group by Status',
              rptletdiv: this
          }]);
      // etc
  }
  </code></pre>