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?

Improve this question
1

1 Answer 1

Reset to default
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!

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

11 Comments

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.
@LancePollard: Interesting, seems to work cross-browser too! Although the inheritance method does have the advantage of new SomeType() instanceof Array being true.
P.S. You're 14, hardcore! :) Going to change the world.
@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 :)
@minitech I don't think jQuery really inherits from the array prototype, it implements length, splice and maybe other methods.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.