Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?

Question

Little extended question is why jQuery do

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

Why not simply add f1() etc into init.prototype? Is it only aesthetic or there are some deep ideas?

Answer 1

The function jQuery.fn.init is the one that is executed when you call jQuery(".some-selector") or $(".some-selector"). You can see this in this snippet from 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 );
}

So, in fact, the line you mention is critical to how jQuery allows the addition of functionality to jQuery objects, both inside jQuery itself and from plugins. This is the line:

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

By assigning jQuery.fn as the prototype of this function (and because the first snippet uses 'new' to treat jQuery.fn.init as a constructor), this means the functionality added via jQuery.fn.whatever is immediately available on the objects returned by all jQuery calls.

So for example, a simple jQuery plugin might be created and used like this:

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

When you declare 'jQuery.fn.foo' on the first line what you're actually doing is adding that function to the prototype of all jQuery objects created with the jQuery function like the one on the second line. This allows you to simple call 'foo()' on the results of the jQuery function and invoke your plugin functions.

In short, writing jQuery plugins would be more verbose and subject to future breakage if the implementation details changed if this line didn't exist in jQuery.

Answer 2

The jQuery.fn is just an alias for jQuery.prototype. I suppose it is defined for aesthetic and less typing reasons.

So

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

is actually

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

As why this needs to be done, this forum post is helpful:

It gives the init() function the same prototype as the jQuery object. So when you call init() as a constructor in the "return new jQuery.fn.init( selector, context );" statement, it uses that prototype for the object it constructs. This lets init() substitute for the jQuery constructor itself.

What you achieve is that the object returned from a jQuery.fn.init constructor has access to jQuery methods.