CODEWITHSUNDEEP
javascriptjquery
AnC
AnC

Reputation: 4201

How do jQuery objects imitate arrays?

jQuery objects act like arrays without polluting native prototypes. How is this achieved?

I know it's not just objects with numeric keys - so perhaps it's just a matter of providing the respective methods (something like jQuery.prototype.indexOf = Array.prototype.indexOf).

I've googled and looked at the source, but couldn't find a definitive answer.

Upvotes: 14

Views: 2954

Answers (2)

Alex Barrett
Alex Barrett

Reputation: 16465

Although jQuery objects act like arrays, they are actually only array-like objects. An array-like object is an object using numeric keys and having a length property - that is the minimum needed for compatibility with the native array methods.

Because jQuery objects are only array-like and not actual Array objects, native array operations (like indexOf or reverse) cannot be called directly. You can use Array.prototype though, or extend jQuery's functionality.

$('div').reverse(); // TypeError: $("div").reverse is not a function

// we can use Array.prototype though
Array.prototype.reverse.apply($('div'));

// or we can extend jQuery very easily
$.fn.reverse = Array.prototype.reverse;
$('div').reverse(); // now it works!

You are correct in your assumption that Firebug does not include any special-casing for formatting jQuery objects. A quick search reveals a relevant post on the Firebug mailing list. Assuming the information is still correct (the post is from January) Firebug will format an object as an array if it has a finite length and a splice method.

JQuery fulfils both of these criteria, but their implementation of splice is nothing more than a direct copy of the native Array method. It is undocumented, which means it's either only for internal use, or perhaps added solely for the purpose of tricking Firebug into formatting jQuery objects nicely.

Upvotes: 26

Anatoliy
Anatoliy

Reputation: 30073

Look in jquery code (development), line 139:

// Force the current matched set of elements to become
// the specified array of elements (destroying the stack in the process)
// You should use pushStack() in order to do this, but maintain the stack
setArray: function( elems ) {
    // Resetting the length to 0, then using the native Array push
    // is a super-fast way to populate an object with array-like properties
    this.length = 0;
    Array.prototype.push.apply( this, elems );
        return this;
},

This is because any result of jquery queries is array.

Upvotes: 5

Related Questions