I'm trying to understand inheritance in JavaScript and I've seen that in JavaScript there are different ways to accomplish inheritance. One such way is based off of an example from the Mozilla site which does something similar to the code below:
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
Person.prototype.setName = function(name) {
this.name = name;
}
function Employee(name, Id) {
Person.call(this, name);
this.Id = Id;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.getId = function() {
return this.Id;
}
Employee.prototype.setId = function(Id) {
this.Id = Id;
}
var andrew = new Employee("Andrew", "123");
I understand that this code is pretty basic and that I don't really need to define getters and setters. I only added them to show that I can add to each of the prototype objects. For the most part I understand what this code does.
Where I start to get confused is when I see the following line:
Employee.prototype.constructor = Employee;
I understand that we are setting the constructor property of the Employee.prototype
object to point to the Employee constructor function. I have read other posts from this site that say I can omit this line and indeed if I do, everything works as expected. But... When I do omit this line I see some changes to the prototype chain. The __proto__
property of the Employee object now points to a generic Object with the following methods: getId
and setId
. The __proto__
property of this object then points to the Person.prototype
object.
So my question is:
why is it that when I omit Employee.prototype.constructor = Employee
that the __proto__
property points to an generic object with the methods I set in the Employee.prototype
object and not the Employee.prototype
object itself? Further more, how are the getId
and setId
methods attached to this mysterious prototype and is there any performance hit because of this?
I have attached the console.logs from the Chrome console to show the __proto__
property when manually setting the constructor property and then when omitting it.