daydreamer
daydreamer

Reputation: 91999

JavaScript Prototype property not added to its inherited objects

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.

enter image description here

Upvotes: 3

Views: 171

Answers (2)

ehab
ehab

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

adiga
adiga

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

Related Questions