Why console don't show methods of jQuery object returned from selector?

Question

I know that if I type:

$('body');

I get a jQuery object. However on chrome's console I'll only see the internal array of the jQuery object, despite the fact that jQuery methods are accessible like

$('body').hide();

Why the console don't show me all the accessible methods and how did jQuery manage to do this magic?

If it's just because these methods are defined on a prototype, then how come when I write these lines:

function Person(){this.myProp = 'test'};
var person = new Person();
Person.prototype.proto = 'test2';

and then I inspect person in chrome I will see:

__proto__: Person constructor: Person() proto: "test2"

but when Inspecting $('body'); then no proto is shown on dev tools?

Answer 1

The methods are on the prototype of the object. Both the console and console.log() do not, by default, show items on the prototype.

If you examine a jQuery object in the Chrome debugger, you can expand the prototype and can then see all the methods there.

So, what you are seeing is just the chosen implementation of the console. It shows direct instance properties, not items on the prototype.

---

When I put this code into a page:

function Person(){this.myProp = 'test'};
Person.prototype.proto = 'test2';

var person = new Person();
var jq = $("body");

And, then examine both person and jq in the Chrome debugger, I see this:

which shows the `proto property on both objects. And, if I expand that property for the jQuery object, it does indeed show all the methods.