How can jQuery return an array and still have it be a jQuery object?

Question

I am attempting to reproduce jQuery's (1.7.1) object structure, to better understand how it it works. I have the following code:

(function (window, undefined) {

    var document = window.document,
        navigator = window.navigator,
        location = window.location;

    window.myclass = (function () {
        var __con = function () {
            return new __con.fn.init();
        }

        __con.fn = __con.prototype = {
            'init' : function () {
                return this;
            },
            'test' : function () {
                console.log('test1');
                return this;
            }
        }

        __con.fn.init.prototype = __con.fn;

        __con.test = function () {
            console.log('test2');
            return this;
        }

        return __con;
    })();

})(window);

My console looks like this:

> myclass().test();
  test1
< __con.fn.__con.init
> myclass.test();
  test2
< function () {

            return new __con.fn.init();

        }

My confusion is how jQuery is able to return an array and still have it be a jQuery object? jQuery being executed from the console might look something like:

> $(document.body)
  [<body>…</body>]
> $(document.body).css('width');
  "1263px"

In fact, one thing that I definitely noticed is the lack of < for the return object. So what exactly is going on here? I've searched all over Google to explain how jQuery works, to no avail. Maybe I'm just getting the terminology wrong, I'm not sure. It seems I can't find any detailed source explaining this.

Perhaps my code is just incomplete, but the basic structure that I have so far is what I've been able to extract so far. Please correct what I have so far if it is wrong, incomplete, or inefficient, and by all means please feel free to provide good reading about:

Javascript best practices
How jQuery works
Efficient Javascript classes
Things all about Javascript object structures
- Singletons
- Prototypes
- Anything else related to whatever this type of structure is called

I'm not sure I understand your question entirely, but have a look at this answer I posted a while back and see if it helps: stackoverflow.com/questions/7651404/… — davin
– davin, Commented Feb 22, 2012 at 8:49
I've found these talks to be incredibly helpful: yuiblog.com/crockford — romario333
– romario333, Commented Feb 22, 2012 at 9:13
Not quite sure how community wikis work. I understand I will no longer be able to obtain reputation from it, and from what I can tell all you need to form one is to close the question. If that's correct, please vote to close this. Through my inability to successfully answer my own question using Google, I would like this to be the place to learn all about jquery-internals. Yea or nay to form a community wiki? — Shea
– Shea, Commented Feb 22, 2012 at 10:28
Maybe I don't quite get the community wiki concept yet. I may have misunderstood what I've read about it so far. — Shea
– Shea, Commented Feb 22, 2012 at 10:36
Community wiki is a tool that lets you make a post editable by users with 100+ reputation, a much lower threshold. It's designed to make posts accessible for curating to a much larger audience. One of the side effects of CW is no reputation gain or loss, but that should not be the primary motivation for using it. See Community wiki is dead, long live community wiki! — user50049
– user50049, Commented Feb 22, 2012 at 10:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

9

jQuery objects are array-like, so look and behave a lot like arrays, but are in fact just custom objects made to roughly equate to a collection of DOM nodes (except with added functionality). All the array-like functionality - length, slice() etc.. - is in fact added manually to the jQuery prototype (for which jQuery.fn is an alias), sometimes by calling an array function with the jQuery object as context

  slice = Array.prototype.slice,
  ...
  slice: function() {
    return this.pushStack( slice.apply( this, arguments ),
      "slice", slice.call(arguments).join(",") );
  },

and sometimes by writing it from scratch. Look at the annotated code (probably a very useful resource for you - it covers v1.6.2 but I don't think anything too drastic has changed since then, except maybe the addition of $.callbacks) to see that this.length is set manually e.g.

if ( selector === "body" && !context && document.body ) {
  this.context = document;
  this[0] = document.body;
  this.selector = selector;
  this.length = 1;
  return this;
}

the jQuery.buildFragment() method is also fundamental to how jQuery objects containing larger collections of DOM nodes are constructed.

So to sum up, jQuery doesn't use arrays, it just looks like it does because much native array functionality has been replicated as properties of the jQuery prototype.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 22, 2012 at 9:34

wheresrhys

23.7k21 gold badges97 silver badges165 bronze badges

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

1 Comment

beatgammit Over a year ago

Is it really added manually? Other frameworks I've seen (ender) just create an array and add properties to it.

Collectives™ on Stack Overflow

How can jQuery return an array and still have it be a jQuery object?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related