开发者

Confused by this reference

(function($)
{
$.va开发者_运维百科ri = "$.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();
});

I am confused why in the $.fn.DoSomethingLocal function, $(this).vari is the string "$.fn.vari" and not "$.vari". I thought that the this reference in the each call gives a dom object, so calling $(this) returns a standard jquery object with prototype $, not $.fn.

How does this happen?


The jQuery.fn namespace is inherited by jQuery objects. So if you write $.fn.somewhat you now can access this by $().somewhat. That is why any jQuery plugin has to extend the jQuery.fn object/namespace.

The pattern jQuery.somewhat would just extend the plain object with somewhat. That is as good as window.somewhat or anyobject.somewhat.

$.fn has a prototypal inheritance, that is all the magic.

return this.each(function()
{
    alert(this.vari);    // would output `undefined`
    alert($(this).vari); // would output `$.fn.vari`
});

In this context, this always refers to the object of invocation, that is, a jQuery object. Since all jQuery objects inherit from jQuery.fn you are getting $.fn.vari here.

note

Within the scope of $.fn, this references to a jQuery object !

Within the scope of .each(), this references to a DOM node !

Why?

Javascript's .apply() function allows you to specify the context in which you want to execute a function. That principle is used by "Resig & the boys" to "derefer" this.


when iterating through a jquery object with .each(), this referes to the element NOT wrapped in a jquery object. The method jQuery.vari() is on the jquery object, not the elements, so you have to wrap the element in a jquery object before you can call the $.vari() method.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜