title: Confused by this reference
body: <pre><code>(function($)
  {
  $.vari = "$.vari";
  $.fn.vari = "$.fn.vari";
  
  // $.fn is the object we add our custom functions to
  $.fn.DoSomethingLocal = function()
  {
      return this.each(function()
      {
          alert(this.vari);    // would output `undefined`
          alert($(this).vari); // would output `$.fn.vari`
      });
  };
  })(jQuery);
  
  // $ is the main jQuery object, we can attach a global function to it
  $.DoSomethingGlobal = function()
  {
      alert("Do Something Globally, where `this.vari` = " + this.vari);
  };
  
  $(document).ready(function()
  {
      $("div").DoSomethingLocal();
      $.DoSomethingGlobal();
  });
  </code></pre>
  
  <p>I am confused why in the <code>$.fn.DoSomethingLocal</code> function, <code>$(this).vari</code> is the string "$.fn.vari" and not "$.vari". I thought that the <code>this</code> reference in the <code>each</code> call gives a dom object, so calling <code>$(this)</code> returns a standard jquery object with prototype <code>$</code>, not <code>$.fn</code>. </p>
  
  <p>How does this happen?</p>