为什么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的这个片段中看到这个:

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此函数的原型(并且因为第一个片段使用'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;

为什么需要这样做,这个论坛帖子很有帮助:

它为init()函数提供了与jQuery对象相同的原型.所以当你在"return new jQuery.fn.init(selector,context);"中调用init()作为构造函数时,声明,它将该原型用于它构造的对象.这使得init()可以替代jQuery构造函数本身.

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