JavaScript Prototype property not added to its inherited objects

Question

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.

score 3 · Answer 1 · edited Sep 06 '19 at 17:09

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)

Thank you @ehab for the answer. It definitely helps. – daydreamer Sep 06 '19 at 17:09 — daydreamer, Sep 06 '19 at 17:09

adiga · Accepted Answer · 2019-09-06T15:31:51.673

2

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.

edited Sep 06 '19 at 15:31

answered Sep 06 '19 at 15:18

adiga

34,372
9
61
83

interesting, so the `name` property in mark has nothing to do with `Employee.name`? – daydreamer Sep 06 '19 at 15:25
@daydreamer sorry, I removed that bit. `Employee.call(this)` will directly add the property `name` to the `mark` object. But if you set `mark.specialty = "some value"`, it will directly add a property to the `mark` object. The `specialty` in the prototype chain will still stay `"none"` – adiga Sep 06 '19 at 15:29

JavaScript Prototype property not added to its inherited objects

2 Answers2