Help understanding jQuery's jQuery.fn.init Why is init in fn

Question

I was looking over the jQuery to better understand how it works. The constructor basically just calls

new jQuery.fn.init

I was wondering what is the point of having the init inside jQuery's prototype? Wouldn't defining init() as part of the jQuery object itself serve the same purpose?

---

Basically I would like to know why jQuery's init function is located at jQuery.fn.init() and not jQuery.init()

Are there people doing this:

jQuery('a').eq(0).hide().init('div').slideToggle(); //?

Answer 1

EDIT: Upon re-reading I don't think this answers your question, but it might be useful for someone's better understanding of how jQuery works anyway so I'm leaving it.

---

What is going on is that jQuery() is being defined as jQuery.fn.init() which is another way to say jQuery.prototype.init() which is the selector function! What this means is that no one would call jQuery.fn.init() or jQuery.init() because jQuery() IS .init()!

What?

Let's look at the piece of code you're talking about:

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

In the comments it says just what I said, but more briefly. But this is just the local copy of jQuery... however, if you go to line 908 (of version 1.4.4) at the end of the self-executing function you'll see:

// Expose jQuery to the global object
return (window.jQuery = window.$ = jQuery);

})();

...which means that this local jQuery becomes the global jQuery. So? So... this local jQuery was actually jQuery.fn.init() right? So what is init()? If you look from lines 100 to 208 you'll see that it's the selector method. What's the selector method? It's that method you use all the time to find tags, ids, classes... $('#id'), jQuery('.class'), $('ul li a')... the selector function!

So no one would ever call jQuery.init('div') because it's a verbose version of jQuery('div') after that assignment. And remember the jQuery.fn is exactly the same as saying jQuery.prototype so really all that part is doing is assigning .init() as a method of the prototype of the jQuery object. I.E. a jQuery plugin.

Phew, that was a mouthful. I hope this makes sense, and if anyone has any corrections in case I misinformed in any part of this lengthy explanation please let me know.

Answer 2

$() is an instanceof (new $()) is an instanceof (new $.fn.init())

The technique employed by jQuery is how you can achieve this. $() always returns as if it was called with the new keyword. However, instead of using a conditional switch on the this reference inside function jQuery() {...} it uses an external delegate object in all cases. This external delegate object, jQuery.fn.init() {...}, is given the jQuery prototype so that its object 'type' is of jQuery, and that all instances of it are actually instances of jQuery.