javascript - 对此引用感到困惑

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”。我认为 each 调用中的 this 引用给出了一个 dom 对象，因此调用 $(this) 返回一个标准的 jquery 对象，其原型(prototype) $，而不是 $.fn。

这是怎么发生的？

Answer 1

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

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

$.fn 具有原型(prototype)继承，这就是所有的魔法。

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

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

注意

在$.fn 的范围内，this 引用了一个jQuery 对象!

在 .each() 的范围内，this 引用了一个 DOM 节点!

为什么？

Javascript 的 .apply() 函数允许您指定要在其中执行函数的上下文。 “Resig & the boys”使用该原则来“取消引用”this。