javascriptgoogle-chrome-devtoolsedge-devtools

console.log and Object.getPrototypeOf confusing message


Look the code below:

class Person {
    constructor() {}
}
class Passenger extends Person {
    constructor() { super(); }
}
const john = new Passenger();

console.log(Object.getPrototypeOf(john));

What was printed into DevTools console in Chrome (111.0.5563.147) and Edge (111.0.1661.62) was:

enter image description here

Should not it be Passenger? with such a meaning like the prototype of Passenger?

Obviously, it's not a problem with the prototype itself because:

console.log(Object.getPrototypeOf(john) === Passenger.prototype) \\log true console.log(Object.getPrototypeOf(john) === Person.prototype) \\log false

I guess it's just a matter of what DevTools developers have chosen to print but if so... is not it a bit confusing?

Does Person make any sense or I'm missing something here?

BTW Firefox (111.0.1) prints just Object which is pretty fair and neutral

enter image description here


Solution

  • Should not it be Passenger?

    Well probably no. Logging john (a new Passenger()) would print an object that is "a Passenger". But printing Passenger.prototype? It's a hard question. The object you've logged is not an instanceof Passenger.

    Does Person make any sense or I'm missing something here?

    Yes it makes some sense, Passenger.prototype (the object you've logged) is an instanceof Person, as it does inherit from Person.prototype. Just as if you had logged a new Person() instance (except that Passenger.prototype was never initialised by the Person constructor).

    I guess it's just a matter of what DevTools developers have chosen to print but if so... is not it a bit confusing?

    Yes, it's their decision. In most circumstances, this approach is very useful. And yes, it is a bit confusing for prototype objects.