Inheritance in Javascript - parent method calls from child methods

Question

I am learning prototype inheritance in Javascript and I tried to write an example which calls a parent method from a child method's prototype. However, I do not get the results which I expected.

Person.js

function Person(name, age) {
    this.name = name;
    this.age = age;
}


Person.prototype.greeting = function() {
    console.log("Hello, My name is " + this.name + " and I am " + this.age + " years old.")
}

module.exports = Person;

Employee.js

var Person = require('./Person');

var Employee = function(name, age, salary) {
    Person.call(this, name, age);
    this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.greeting = function() {
    Person.prototype.greeting.call(this);
    console.log("My salary is " + this.salary)
}

module.exports = Employee;

Test.js

var Person = require('./Person');
var Employee = require('./Employee');

var p = new Person("Rob", 24);

p.greeting();

var e = new Employee("Jim", 25, 1200000);

e.greeting();

So basically what I have is an Person class which has name and age and a greeting method attached to its prototype which print some data. The Employee class extends Person and has an additional attribute salary. It also overrides the greeting method by printing the salary. However, before printing the salary, it calls the super class' greeting method and then prints the salary.

My expected output was :

Hello, My name is Rob and I am 24 years old.
Hello, My name is Jim and I am 25 years old.
My salary is 1200000

But Actual Output was:

Hello, My name is Rob and I am 24 years old.
Hello, My name is Person and I am 25 years old.
My salary is 1200000

I know that the call() method needs to be passed arguments along with the context this. And it is the name of this (Person) that is being replaced as the name which tells that the classes are not purely inherited since I am calling the method inside. I should be able to use super.methodName() inside but super does not work here.

Please tell me if what I have done is how Inheritance in JS is achieved or if I'm doing something wrong.

PS: I tried to use a super call to greeting like in Java but it gave me an error. Does that mean the Employee class has not extended the Person class ?

Rename the property this.name in Person, it conflicts with Function.name property. — Teemu
– Teemu, Commented Jul 29, 2017 at 8:37

marzelin · Accepted Answer · 2017-07-29 09:19:58Z

1

Employee.prototype = Object.create(Person)

assigned Employee.prototype to a Person function. Functions have a name property, that's why it logged the name of that particular function: Person.

The Employee instance has three pools it can look for properties:

First is Employee instance that has 3 properties:

name
age
salary

Second is Employee prototype (if prop is not found on Employee instance, js looks here) that has 1 method:

greeting

Third is Person prototype (if prop is not found on previous objects, js looks here) that has 1 method:

greeting

Since greeting is both on Employee.prototype and Person.prototype, you can't access Person.prototype.greeting from Employee instance - it will always be blocked by Employee.prototype.greeting that is closer in the chain. That's why in:

Employee.prototype.greeting = function() {
    Person.prototype.greeting.call(this);
    console.log("My salary is " + this.salary)
}

you have to call Person.prototype.greeting directly (this inside the function is an instance of Employee)

edited Jul 29, 2017 at 9:19

answered Jul 29, 2017 at 8:37

marzelin

11.7k5 gold badges38 silver badges50 bronze badges

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

4 Comments

v1shnu Over a year ago

I've changed Object.create(Person) to Object.create(Person.prototype). Is this right or it is always Object.create(Person) to enable inheritance ?

marzelin Over a year ago

@v1shnu it should be Object.create(Person.prototype). You've changed the code in your answer to the correct one (it returns what you wanted), so i didn't included it in my answer for brevity.

v1shnu Over a year ago

I want to know why Person.prototype.greeting.call(this) is used to call a parent class method. If inheritance is enabled, then should it not be called directly ? Why should I pass this again in the call method if I have already set it in the first line of the Employee function.

marzelin Over a year ago

@v1shnu If you call Person.prototype.greeting() directly, this will point to Person.prototype not a class instance. If you call this.greeting() in Employee.prototype.greeting it will call itself again and again.

Collectives™ on Stack Overflow

Inheritance in Javascript - parent method calls from child methods

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related