title: jQuery/JavaScript "this" pointer confusion
body: <p>The behavior of "this" when function <code>bar</code> is called is baffling me. See the code below. Is there any way to arrange for "this" to be a plain old js object instance when bar is called from a click handler, instead of being the html element?</p>
  
  <pre><code>// a class with a method
  
  function foo() {
  
      this.bar();  // when called here, "this" is the foo instance
  
      var barf = this.bar;
      barf();   // when called here, "this" is the global object
  
      // when called from a click, "this" is the html element
      $("#thing").after($("&lt;div&gt;click me&lt;/div&gt;").click(barf));
  }
  
  foo.prototype.bar = function() {
      alert(this);
  }
  </code></pre>