Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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(); //?
over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!