Reputation: 91999
I am following MDN guide about adding property and this is what my code looks like
'use strict';
function Employee() {
this.name = '';
this.dept = 'general';
}
Employee.prototype.specialty = 'none';
function Manager() {
Employee.call(this);
this.reports = [];
}
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
function WorkerBee() {
Employee.call(this);
this.projects = [];
}
WorkerBee.prototype = Object.create(Employee.prototype);
WorkerBee.prototype.constructor = WorkerBee;
function SalesPerson() {
WorkerBee.call(this);
this.dept = 'sales';
this.quota = 10;
}
SalesPerson.prototype = Object.create(WorkerBee.prototype);
SalesPerson.prototype.constructor = SalesPerson;
function Engineer() {
WorkerBee.call(this);
this.dept = 'engineering';
this.machine = '';
}
Engineer.prototype = Object.create(WorkerBee.prototype);
Engineer.prototype.constructor = Engineer;
let mark = new WorkerBee;
console.log(mark);
mark.name = 'Doe, Mark';
mark.dept = 'admin';
mark.projects = ['navigator'];
console.log(mark);
mark.bonus = 3000;
console.log(mark);
When I run this, I do not see specialty
property for mark
object.
WorkerBee { name: '', dept: 'general', projects: [] }
WorkerBee { name: 'Doe, Mark', dept: 'admin', projects: [ 'navigator' ] }
WorkerBee {
name: 'Doe, Mark',
dept: 'admin',
projects: [ 'navigator' ],
bonus: 3000 }
What am I missing?
Thanks
UPDATE
As per @adiga answer, I was able to locate the specialty
property in the prototype chain.
Upvotes: 3
Views: 171
Reputation: 8054
This is because it's not an instance property but rather an inherited property. Its actually there, to check it just console.log(mark.specialty).
Edit to expand on the Answer
An inherited property means that the property exists at the prototype chain rather than the instance it self: when you assign something to this like
this.age = 13;
you are setting an instance property, when you assign something to the prototype that was used to create the instance you are setting an inheritance property something called static properties in other languages (and called so static in ES6).
When you try to read a property like object.someProperty
, the JS engine first looks at instance properties if its there, it returns it, else it looks at the prototype chain (going from one Prototype To its Parent Prototype) till it either finds the property or reaches the ultimate installed prototype which is null and returns undefined in that case)
Upvotes: 3
Reputation: 35222
The same reason you won't be able to see toString
or hasOwnProperty
properties even if you are able to call them from mark
object. specialty
is not an own property of the mark
object but it is inherited.
The browser's console displays only the own properties of an object. Expand the __proto__
of mark
object and you will be able to see the inherited properties.
Upvotes: 2