2

Possible Duplicate:
What makes a jQuery object show up as an array in Chrome's Developer Tools?

I am writing a very small, jQuery-like, DOM wrapper in JavaScript, containing only the (few) functions I need most. I have noticed that, when I log a jQuery object to the console of my browser, the object is actually an array. For example: [Document]. I would like to copy that behavior. Can anyone explain me how jQuery does this internally, or even better point me to some relevant lines in the jQuery source code? I know that objects and arrays in JavaScript have much in common, but jQuery seems to return true arrays for the $ selections, not objects. I have already read the following post on stackoverflow but it doesn't seem to answer my question:

Are javascript Arrays actually implemented as arrays?

Community
  • 1
  • 1
Jeroen
  • 839
  • 13
  • 20
  • Thank you both, both links contain the answer (somewhere). I had already followed Sergey's suggestion below and noticed that the presence of the length and splice prototype members makes the difference for Chrome (and apparently also for Firefox). Therefore I have marked that answer. – Jeroen Feb 23 '12 at 10:57

2 Answers2

3

The magic is in the presence of:

  • length
  • splice

prototyped object members. Development consoles print objects that implement these two members as if they were arrays.

var myArray = function() {};
myArray.prototype.length = 0;
myArray.prototype.splice = function(){};

console.log(new myArray)
Sergey Ilinsky
  • 31,255
  • 9
  • 54
  • 56
1

A jQuery object is just an ordinary JavaScript function object with a length property and properties with numeric names, plus other methods borrowed from Array.prototype (as well as many jQuery-specific methods). It does not inherit from Array.prototype. You can see this near the start of jQuery's uncompressed source (taken from http://code.jquery.com/jquery-latest.js):

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

Browser consoles check objects for being Array-like by checking for the presence of Array properties. Firebug, for example, checks for a length property and a splice() method, both of which a jQuery object has. You can see the splice() method further down in the source, probably only added to persuade browser consoles to display jQuery objects as arrays:

// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Having a length property is insufficient. See the answers to the duplicate questions. – Quentin Feb 23 '12 at 10:21
  • @Quentin Insufficient for appearing as an array in the console, yes. I hadn't really tried to address that, but I'll update. – Tim Down Feb 23 '12 at 10:27
  • Having numeric named properties is also insufficient. – Quentin Feb 23 '12 at 10:28
  • @Quentin: I know. That bit was in there before the recent update. As I said, initially I wasn't really trying to address the issue of it looking like an array in the console; I was rather trying to give an overview of why it looks array-like. Perhaps I shouldn't have bothered, given that there are duplicate questions with reasonably sensible answers. – Tim Down Feb 23 '12 at 10:32