Confused by this reference
<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>
