50

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(); //?
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Moshe K.
  • 700
  • 1
  • 6
  • 9

2 Answers2

64

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.

mVChr
  • 49,587
  • 11
  • 107
  • 104
  • 8
    +1 for just sheer effort. So is there any particular reason to use the prototype as **opposed** to just on the jQuery object itself. Is it faster or something like that (I can't imagine that it is) – Moshe K. Jan 21 '11 at 03:42
  • 1
    I don't have a good answer to that question, sorry. I can hack at an answer, but certainty on this one is above my pay grade. – mVChr Jan 21 '11 at 04:03
  • @MosheK. You don't need to use the prototyped version because when you make the call itself, it looks in the constructor (lets say for a method), and when it can't find it it looks deeper into the prototypes. – Mark Pieszak - Trilon.io Mar 12 '13 at 19:49
  • Keep in mind. Without `jQuery.fn.init.prototype = jQuery.fn;` `this` in `init` instance of `init()` function, not instance of `jQuery` object. – Artem P Sep 27 '13 at 17:58
10

$() 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.

orca
  • 717
  • 6
  • 12
  • In light of the answer provided by @mVchr, this answer impressive. It provides a verbal definition of what would otherwise be an abstruse piece of code that would appear to provide only ambiguity. Thanks very much! But I still wish you had gone a mile or two further. This is definitely worth at least a chapter in a book. – Stato Machino Apr 25 '17 at 23:33
  • While this is a great answer this [answer](https://stackoverflow.com/a/1051797) adds more context. If trying to resolve an error such as "Uncaught TypeError: Cannot read properties of undefined": adding `[0]` after the jquery might help, i.e. `$('#myId)` would become `$('#myId)[0]`. – SpeedCoder5 Mar 05 '23 at 22:10