0

I'm learning Javascript and trying to understand the jQuery code as an exercise. I'm looking at the un-minified development version of jQuery.js (a recent version). It's around 10,000 lines long and I am just attempting to understand the basic structure and what is done when the jQuery object is created upon every invocation of $(...).

There is an answer here that provides a "simple structure that resembles the architecture of jQuery." This is fantastic and it helped me a lot. However, there seems to be a crucial difference between it and the actual code, and this difference relates to the part I don't understand. In the simple example, we have:

var foo = function ...
return new foo ...

There is nothing strange about that. However, in the actual jQuery, we have:

var jQuery = function ...
return new jQuery.fn.init ....

In the definition of jQuery, we need a prototype, but that prototype is (I supposed) only created when new jQuery has finished execution. We need to add the init method to that prototype as well. But all this is seemingly getting done out of order in the statements above.

The other questions I have found on this topic do not answer my specific question. For example, this one may seem similar, but it doesn't address my question.

So how does this work?

Here are a few of the code fragments I'm looking at:

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

and

jQuery.fn = jQuery.prototype ...

and

init = jQuery.fn.init = function( selector, context ) { ...

and 

window.jQuery = window.$ = jQuery;
return jQuery;
BugBuddy
  • 576
  • 2
  • 5
  • 19
  • `new jQuery.fn.init(...)` is a call to `jQuery.fn.init`, not `jQuery`. – Pointy Feb 17 '19 at 01:49
  • Also, `jQuery.fn` is an alias of `jQuery.prototype` so don't let that confuse you – andrew Feb 17 '19 at 01:53
  • 1
    It is possible to review each part of jQuery without reading all 10,000 lines, for example, "core" https://github.com/jquery/jquery/blob/master/src/core.js – guest271314 Feb 17 '19 at 02:13
  • @andrew - yes, I put that info into my question. However, I still do not understand how to answer my question. – BugBuddy Feb 17 '19 at 02:40
  • @Pointy - that's kinda my point. How do you get to jQuery.fn.init without going through jQuery? You can't, as far as I know. Hence my question. BTW, I've only been learning javascript for a couple weeks. – BugBuddy Feb 17 '19 at 02:43
  • 1
    That's the way JavaScript works. `new a.b.c` is not `(new a).b.c`, it's `new (a.b.c)`. – Pointy Feb 17 '19 at 03:01
  • @Pointy - thanks, but where can I find an explanation of `new (a.b.c)`? I want to understand how that works more deeply. That's really what my question is about, and simply saying "that's the way javascript works" isn't enough information for me. – BugBuddy Feb 17 '19 at 04:21
  • The expression `a.b.c` is evaluated to determine the value of `c`. That's the function that the `new` operation will call. – Pointy Feb 17 '19 at 04:33
  • @Pointy `a.b.c` can't be evaluated if `a` is undefined. So how can `a` be defined already when the function defining it has not finished? – BugBuddy Feb 17 '19 at 05:49
  • ??? `jQuery` doesn't have to be defined for that to work until the function is actually *called*. – Pointy Feb 17 '19 at 06:14
  • Trying to understand jQuery source code as a learning project before you've really gotten used to JavaScript programming may not be the best idea. It's like trying to copy a Da Vinci painting when you're first learning art. – Pointy Feb 17 '19 at 06:15

0 Answers0