JavaScript inheritance not working as I expected

Question

What are the details why pe.getName() is working and pe.getSalary() is not?

var Employee = function(name) {
  this.name = name;
}

Employee.prototype.getName = function() {
  return this.name;
}

var PermanentEmployee = function(annualSalary) {
  this.annualSalary = annualSalary;
}

PermanentEmployee.prototype.getSalary = function() {
  return this.annualSalary;
}

var employee = new Employee("Mark");

PermanentEmployee.prototype = employee;

var pe = new PermanentEmployee(5000);

document.write(pe.getName());
document.write(pe.getSalary());

curveball · Accepted Answer · 2017-04-30 13:30:04Z

2

By doing this later in your code

PermanentEmployee.prototype = employee;

you might override this

PermanentEmployee.prototype.getSalary = function()

Try this instead:

function Employee(name) {
  this.name = name;
}

Employee.prototype.getName = function() {
  return this.name;
}
   
function PermanentEmployee(name, annualSalary) {
  Employee.call(this, name);  // calling parent's "constructor"
  this.annualSalary = annualSalary;
}
PermanentEmployee.prototype = Object.create(Employee.prototype); // setting "inheritance"
PermanentEmployee.prototype.getSalary = function() {
  return this.annualSalary;
}
var pe = new PermanentEmployee("Mark", 5000);

console.log(pe.getName());
console.log(pe.getSalary());

edited Apr 30, 2017 at 13:30

answered Apr 30, 2017 at 13:19

curveball

4,51515 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AhMed RaXa Over a year ago

but what is actually happening behind the scenes of my code.. Please explain.

curveball Over a year ago

you reset _ proto _ ref. of PermanentEmployee object to employee object and function getSalary() that was there (in an object accessible through _ proto _ ref. of PermanentEmployee object) before just became unaccessible. Since getSalary() is no longer accessible within PermanentEmployee object, JS tries to find it in a chain of prototypes and goes to employee object that doesn't have such a method nor have reference to an object with getSalary() method itself through its _ proto _ and finally an error is thrown because getSalary() method isn't found anywhere.

curveball Over a year ago

This is quite essential, core part of Javascript and you would like to get it right from the start. I tried my best with the explanation above which is pretty accurate to my taste, but it may sound confusing to newbies, so, you should find additional material that cover this topic in more detail. That is my advice.

AhMed RaXa Over a year ago

Well thank u sir it helped me a bit... i think i have to learn more about prototype and inhertance

AhMed RaXa Over a year ago

So of i declare getSalary() method inside the constructor function will it work then.?

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

This is actually the expected behavior. If you want to understand why, here we go...

Consider the following schema, available in the excellent book Exploring ES6 by Dr. Axel Rauschmayer.

Before to go on, here is an important rule: in JavaScript, when you create an instance of a "class", this instance will reference the prototype property of its constructor through its dunder proto (__proto__ or [[Prototype]]).

Top left

In your example, Employee and PermanentEmployee are constructor functions. Like any function in JavaScript, they are instances of Function and they use Function.prototype.

var Employee = function(name) {
  this.name = name;
}

var PermanentEmployee = function(annualSalary) {
  this.annualSalary = annualSalary;
}

console.log(typeof Object.getPrototypeOf(Employee)); // ES5
console.log(typeof PermanentEmployee.__proto__); // ES6

console.log(Object.getPrototypeOf(Employee).constructor); // ES5
console.log(PermanentEmployee.__proto__.constructor); // ES6

Top right

When you write Employee.prototype.getName or PermanentEmployee.prototype.getSalary, you are actually adding new properties to the prototype property of Employee and PermanentEmployee. But Employee.prototype and PermanentEmployee.prototype are instances of Object and use Object.prototype.

var Employee = function(name) {
  this.name = name;
}

Employee.prototype.getName = function() {
  return this.name;
}

var PermanentEmployee = function(annualSalary) {
  this.annualSalary = annualSalary;
}

PermanentEmployee.prototype.getSalary = function() {
  return this.annualSalary;
}

console.log(typeof Employee.prototype);
console.log(typeof PermanentEmployee.prototype);

console.log(Employee.prototype);
console.log(PermanentEmployee.prototype);

Since PermanentEmployee.prototype is a simple object, this is not reasonable to do so: PermanentEmployee.prototype = employee.

When you do that, you override the prototype. To make a basic comparison, look at this example with an object literal:

var obj = {
  foo: 'Foo'
};

obj.bar = 'Bar';

console.log(obj);

obj = 'Baz';

console.log(obj);

obj = {
  foo: 'Foo',
  bar: 'Bar',
  baz: 'Baz'
};

console.log(obj);

You should keep this in mind when you play with prototypes...

Bottom right

In JavaScript, there are several strategies to create a "pure" object (functions and arrays are objects too...). You can:

Use an object literal: {}
Use a constructor: new Object()
Use Object.create()

In your example, you are using constructors. Therefore, your instances will use the prototype properties of your constructors, which themselves use the prototype property of Object. This is how the prototype chain works!

var Employee = function(name) {
  this.name = name;
}

Employee.prototype.getName = function() {
  return this.name;
}

var PermanentEmployee = function(annualSalary) {
  this.annualSalary = annualSalary;
}

PermanentEmployee.prototype.getSalary = function() {
  return this.annualSalary;
}

var employee = new Employee("Mark");

console.log(Object.getPrototypeOf(employee)); // ES5
console.log(employee.__proto__.constructor); // ES6
console.log(Object.getPrototypeOf(Object.getPrototypeOf(employee))); // ES5
console.log(employee.__proto__.__proto__.constructor); // ES6

But of course, if you have completely overriden your prototype somewhere, you break the prototype chain and it will not work as expected...

Collectives™ on Stack Overflow

JavaScript inheritance not working as I expected

2 Answers 2

7 Comments

Top left

Top right

Bottom right

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Top left

Top right

Bottom right

Comments

Your Answer

Sign up or log in

Post as a guest

Related