jQuery structure - clarification?

Question

I was reading this article about how jQuery works , and that article minified jquery structure into symbolic code:

/*1*/   var jQuery = (function ()
/*2*/   {
/*3*/   
/*4*/   
/*5*/       var jQuery = function (selector, context)
/*6*/       {
/*7*/   
/*8*/   
/*9*/           return new jQuery.fn.init(selector, context, rootjQuery);
/*10*/       },
/*11*/           rootjQuery;
/*12*/   
/*13*/   
/*14*/       jQuery.fn = jQuery.prototype = {
/*15*/           constructor: jQuery,
/*16*/           init: function (selector, context, rootjQuery)
/*17*/           {
/*18*/   
/*19*/               if (!selector)
/*20*/               {
/*21*/                   return this;
/*22*/               }
/*23*/           },
/*24*/           //I screwed with the core! 
/*25*/   
/*26*/           yo: function ()
/*27*/           {
/*28*/               alert("yo")
/*29*/           },
/*30*/       };
/*31*/   
/*32*/       jQuery.fn.init.prototype = jQuery.fn;
/*33*/   
/*34*/       // Expose jQuery to the global object
/*35*/       return jQuery;
/*36*/   })();

Line #32 is where the magic happens. so when I'm writing jQuery(..) it actually run new init() which has access to all jQuery.fn functions.

It's pretty clear (most of it) but I have 2 questions :

Question #1 Why does line #15 (constructor: jQuery,) exists ? all it does (imho) is to tell the prototype object that it's ctor function is jQuery. how does jQuery use that fact ?

Question #2 Looking at line #14 , it's obviously adding functions to jQUery.fn ( function yo in our example - line #26).

But why does jQuery.prototype (line #14 middle) also have these functions (it sets them to it's prototype...)? It's like we're going to do $.addClass() which is invalid.

possible duplicate of [Difference of the value, prototype and property](http://stackoverflow.com/questions/12143590/difference-of-the-value-prototype-and-property) — Bergi, Mar 07 '14 at 11:56
@Bergi Your answer does not answering question #1 of mine. you just describe the fact. nothing more. regarding Question #2 of mine , I dont understnad your wording there : "_for those who don't use the fn property_" - can u elaborate ? — Royi Namir, Mar 07 '14 at 12:03

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

Why does line #15 (constructor: jQuery,) exist? all it does (imho) is to tell the prototype object that it's ctor function is jQuery.

Yes. People do expect to find new jQuery().constructor == jQuery.

how does jQuery use that fact ?

For example, the pushStack internal method uses this.constructor() to create new instances - which also allows inheritance from jQuery.

But why does jQuery.prototype (line #14 middle) also have these [jQuery.fn] functions (it sets them to it's prototype...)?

To cite this answer:

One of the reasons behind this is certainly that they want to accomodate people that might modify jQuery.prototype instead of jQuery.fn.

However another valid reason is that they perhaps wanted somejQueryObj instanceof jQuery to returns true, while it normally wouldn't.

It's like we're going to do $.addClass() which is invalid.

No, how so? Are you confusing the standard .prototype property of every (constructor) function with the internal prototype chain?

edited May 23 '17 at 12:20

Community

1
1

answered Mar 07 '14 at 12:17

Bergi

630,263
148
957
1,375

Regarding your last reply here - I dont understand.What I mean is : If the object which has all the functions is being set to `jQuery.fn` - it's fine. but they also set this object which has all the functions into `jQuery.prototype.` - why ? `$(div).addClass()` should not work on `$.addClass()` - am I understood ? – Royi Namir Mar 07 '14 at 12:25
Why do you think that `jQuery.prototype.addClass = …` would make `$.addClass` work? – Bergi Mar 07 '14 at 12:26
I dont see which line responsible for your demo : `somejQueryObj instanceof jQuery`. I mean - `somejQueryObj` is like `$()` which inturn is like `new init()` . so where is the connection between `jQuery.fn.init.prototype` to `jQuery.prototype` ( prototype inheritance) - can you show me that path please? – Royi Namir Mar 07 '14 at 12:47
The connection is `jQuery.fn.init.prototype === jQuery.prototype`… – Bergi Mar 07 '14 at 12:54
Bergi - All I see in my code is `jQuery.fn.init.prototype=jQuery.fn`. I dont see `x.prototype=y.prototype`...Again , please , can you show me where is that line ? or is it the combination of #32 and #14 ? – Royi Namir Mar 07 '14 at 12:58
Yes, it's the combination. All those references point to the same object. – Bergi Mar 07 '14 at 13:04
thats the problem.... they do not reference. the object is cloned...no ? since js does not use reference but values – Royi Namir Mar 07 '14 at 13:07
All objects are [*reference values*](http://stackoverflow.com/questions/13266616/primitive-value-vs-reference-value). Nothing is cloned. – Bergi Mar 07 '14 at 13:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49239/discussion-between-royi-namir-and-bergi) – Royi Namir Mar 07 '14 at 13:22

jQuery structure - clarification?

1 Answers1