JQuery source code questions

Question

I got two questions about following code snippet.

(1). What is the purpose of "return new jQuery.fn.init( selector, context, rootjQuery );"? Why does it return another instance inside the JQuery function?

(2). Why prototype.constructor is re-defined as JQuery?

// 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, rootjQuery );
    },

... ...

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        var match, elem, ret, doc;

Thank you!

James Montagne · Accepted Answer · 2013-11-03 22:34:16Z

4

When JQuery is called as an ordinary function, a new (class) instance of JQuery is created and returned using new JQuery.fn.init(...). In this way, developers don't have to add the new keyword before $(..).
JQuery.fn is a shortcut for JQuery.prototype. Writing JQuery.fn.customMethod = function(){...} is more convenient than writing JQuery.prototype.customMethod = .... Because JQuery is often also accessible through $ or $j, The shortesy way to refer to JQuery.prototype is $.fn.

edited Nov 3, 2013 at 22:34

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

answered Oct 4, 2011 at 6:56

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricky Over a year ago

Hi Rob, what is "rootjQuery" parameter for? Thanks.

Rob W Over a year ago

rootQuery is an internal parameter to refer to the JQuery-wrapped root of the document.

xpda · Accepted Answer · 2013-01-27 04:21:12Z

1

(2). Why prototype.constructor is re-defined as JQuery?

I think the reason is to keep a constructor reference inside each jQuery object, to actually itself (it creates a circular reference). In fact, by overriding the jQuery.prototype object with this piece of code

jQuery.fn = jQuery.prototype = { ... }

you lose the "automatically created" constructor (which points to the function it has been created from, in this case jQuery.fn.init), so you need to explicitly set it.

I've found this link very helpful to understand javascript prototype and contructor:

http://joost.zeekat.nl/constructors-considered-mildly-confusing.html

edited Jan 27, 2013 at 4:21

xpda

15.9k8 gold badges54 silver badges83 bronze badges

answered Jan 13, 2013 at 16:41

MaxC

94510 silver badges24 bronze badges

Collectives™ on Stack Overflow

JQuery source code questions

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related