为什么 jQuery 这样做：jQuery.fn.init.prototype = jQuery.fn？

Question

小问题是为什么 jQuery 这样做

jQuery.fn = jQuery.prototype = {
init: function() {...},
    f1: function() {...},
    ...
};
jQuery.fn.init.prototype = jQuery.fn;

为什么不简单地将f1() 等添加到init.prototype 中呢？仅仅是审美还是有一些深刻的想法？

Answer 1

函数jQuery.fn.init 是在您调用jQuery(".some-selector") 或$(".some-selector") 时执行的函数。您可以在来自jquery.js 的这个 sn-p 中看到这一点：

jQuery = window.jQuery = window.$ = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );
}

所以，事实上，你提到的那一行对于 jQuery 如何允许向 jQuery 对象添加功能至关重要，无论是在 jQuery 本身内部还是从插件中。这是一行：

jQuery.fn.init.prototype = jQuery.fn;

通过将jQuery.fn 指定为该函数的原型（并且因为第一个sn-p 使用'new' 将jQuery.fn.init 视为构造函数），这意味着通过jQuery.fn.whatever 添加的功能立即可用在所有 jQuery 调用返回的对象上。

例如，可以像这样创建和使用一个简单的 jQuery 插件：

jQuery.fn.foo = function () { alert("foo!"); };
jQuery(".some-selector").foo();

当您在第一行声明“jQuery.fn.foo”时，您实际上是在将该函数添加到使用 jQuery 函数创建的所有 jQuery 对象的原型中，就像第二行中的那样。这允许您对 jQuery 函数的结果简单地调用 'foo()' 并调用您的插件函数。

简而言之，如果 jQuery 中不存在这一行，那么如果实现细节发生变化，那么编写 jQuery 插件会更加冗长，并且将来会受到破坏。

Answer 2

jQuery.fn 只是 jQuery.prototype 的别名。我想它是出于美观和减少打字的原因而定义的。

所以

jQuery.fn.init.prototype = jQuery.fn;

其实是

jQuery.prototype.init.prototype = jQuery.prototype;

为什么需要这样做，这个forum post很有帮助：

它赋予 init() 函数相同的功能 原型作为 jQuery 对象。所以 当您将 init() 作为构造函数调用时 在“返回新的 jQuery.fn.init( 选择器，上下文 );" 语句，它 将该原型用于它的对象 结构体。这让 init() 替换 jQuery 构造函数 自己。

您实现的是从 jQuery.fn.init 构造函数返回的对象可以访问 jQuery 方法。