20

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?

NilColor
  • 3,462
  • 3
  • 30
  • 44
  • I not sure what you mean by adding f1() into init.prototype? It's not adding "into" anything, it's assigning the prototype. – Milan Babuškov Nov 18 '09 at 10:36
  • Sure. I mean "assign" of course. Sorry for my english. And the question is about why not simply assign all function to the init.prototype? Why they assigned to the jQuery.prototype and than jQuery.prototype assigned to the jQuery.prototype.init.prototype – NilColor Nov 19 '09 at 09:54
  • related question about jQuery's design pattern: http://stackoverflow.com/q/12143590/1048572 – Bergi Feb 11 '13 at 19:15

2 Answers2

47

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.

Matt Ryall
  • 9,977
  • 5
  • 24
  • 20
  • This is the most revealing comment that I've read in so much time. Thank you. – asumaran Jul 10 '13 at 07:08
  • Sorry to inject a question in the answer/comments, but are we saying that adding a function to jQuery in this fashion makes that function available to every element on the page? And does it make that function available to things other than elements, like other jQuery objects and such? And, is "jQuery = window.jQuery = window.$ = function(..." merely a way of showing that all three are equivalent syntax? Or is this actually something you would do? – KWallace Jan 19 '16 at 18:29
21

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.

kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
  • Yes. I know that `.fn` is a shortcut for `.prototype`. But why they extend jQuery.prototype and that do `jQuery.fn.init.prototype = jQuery.fn`? Why not extend `jQuery.fn.init.prototype` directly? – NilColor Nov 18 '09 at 10:49