13

If you do console.log($('some selector')) in the browser, it returns what looks like an array (first line):

picture from latest version of chrome web console on Github project page

But notice that it's not an instanceof Array, but it's actually the jQuery object.

When you do console.dir($('h1')), it shows it's actually the jQuery object.

The question is, how are they making it look like it's an array in the web console? I noticed in the jQuery source here they add reference to a few Array and Object methods, and here they add toArray (and slice and others) to the jQuery object. Is the web console somehow checking for these methods and if it finds one (toArray, indexOf, slice, etc.), it prints it as an Array? I would like to get this behavior out of any custom object, such as the Ember.ArrayProxy. Currently when you log the Ember.ArrayProxy it shows > Object or whatever, but it would be nice to show it as an array.

Any ideas?

Lance
  • 75,200
  • 93
  • 289
  • 503

1 Answers1

15

You make your object inherit Array using the prototype, like so:

function SomeType() {
    this.push(16);
}

SomeType.prototype = [];
SomeType.prototype.constructor = SomeType; // Make sure there are no unexpected results

console.log(new SomeType()); // Displays in console as [16]

And, of course, all jQuery objects are instances of the jQuery function/constructor, so that's how jQuery does it. As a bonus, because of the inheritance, you get all the methods from Array, and the indexing that comes with it too!

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 2
    Nice! Well I just did some other tests, and if you do this: `var x = {length: 0, splice: Array.prototype.splice}`, then `x` will look like an Array. Strange... It requires specifically those 2 properties it looks like. – Lance May 26 '12 at 02:13
  • @LancePollard: Interesting, seems to work cross-browser too! Although the inheritance method does have the advantage of `new SomeType() instanceof Array` being `true`. – Ry- May 26 '12 at 02:16
  • Stoked to finally have a cross-browser way to extend the Array, thank you. – Lance May 26 '12 at 02:17
  • BTW how did you test this cross browser so quickly? – Lance May 26 '12 at 02:18
  • 7
    P.S. You're 14, hardcore! :) Going to change the world. – Lance May 26 '12 at 02:20
  • @LancePollard: I've actually known it for a while :) Used it in a library a few years ago. So I didn't actually test it now. (And thanks!) – Ry- May 26 '12 at 02:21
  • @minitech - How the heck did you make the tic tac toe on your profile??? *confused...* – Derek 朕會功夫 May 26 '12 at 02:25
  • 1
    @Derek: I just read the `Referer` header using PHP and take the `?add` parameter out of it, while keeping track of sessions. Don't tell anyone :) – Ry- May 26 '12 at 02:30
  • It still allows for user input after a win/loss, make it work with a win-tie-lose count and I'll spend a couple hours on it. :) (sorry for off-topic, nice answer btw) – Fabrício Matté May 26 '12 at 02:43
  • *league of legends account voice* Godlike! – Ohgodwhy May 26 '12 at 02:48
  • 1
    @minitech I don't think jQuery really inherits from the array prototype, it implements `length`, `splice` and maybe other methods. – bfavaretto May 26 '12 at 03:10