Question

(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();
});

我很困惑为什么在$.fn.DoSomethingLocal函数中，$(this).vari是字符串“$ .fn.vari”而不是“$ .vari”。我认为this调用中的each引用提供了一个dom对象，因此调用$(this)会返回一个标准的jquery对象，其原型为$，而不是$.fn。

这是怎么发生的？

Answer 1

jQuery.fn命名空间由jQuery对象继承。因此，如果您撰写$.fn.somewhat，现在可以通过$().somewhat访问此内容。这就是为什么任何jQuery插件都必须扩展jQuery.fn对象/命名空间。

模式jQuery.somewhat只会使用somewhat扩展普通对象。这与window.somewhat或anyobject.somewhat一样好。

$.fn具有原型继承，这就是魔法。

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

在此上下文中，this始终引用调用对象，即jQuery object。由于所有jQuery对象都继承自jQuery.fn，因此您将获得$.fn.vari。

注意

在$.fn范围内，this引用 jQuery对象！

在.each()范围内，this引用 DOM节点！

为什么？

Javascript的.apply()函数允许您指定要执行函数的上下文。 “Resig＆amp; the boys”使用该原则来“derefer”this。

Answer 2

当使用.each（）迭代jquery对象时，这将引用未包装在jquery对象中的元素。方法jQuery.vari（）在jquery对象上，而不是元素，所以你必须先将元素包装在jquery对象中，然后才能调用$ .vari（）方法。

对此引用感到困惑

2 个答案: