0
183
ViewsNavigating the Prototype chain in javascript
function Student(name, age) {
this.name = name;
this.age = age;
}
Student.prototype.showDetails = function () {
console.log(`${this.name}, ${this.age}`);
};
let Manish = new Student('Manish', 34);
console.log(Manish.__proto__.__proto__.__proto__);
console.log(Manish);
In the above code, the second last line
console.log(Manish.__proto__.__proto__.__proto__);
...logs null as expected. However when I manually navigate through the prototype chain using the object from the last line console.log(Manish), I have to go down 5-6 levels of the __proto__ property till I get a null value.
Is there some explanation for this difference?
1 answers
Answer question0
The __proto__ entry that you see in the third level in the console, is the getter function which you execute when you do Manish.__proto__. Realise that Manish does not have an own property with the name __proto__, it is by following the prototype chain that it makes access to the __proto__ getter that you see in the console output.
Note also that the console output executes that getter to show you the object which is the same object it shows at the [[Prototype]] entry at the top level.
Key here is that when you access __proto__ like you do, you execute a function (getter) that is defined higher up the prototype chain.
The [[Prototype]] entries are not JavaScript properties, but internal slots which are defined in the ECMA Script specification, but are not accessible as properties in JavaScript code. Console interfaces provide access to these slots to provide additional transparency, but it can also lead to confusion.