Inheritance in JavaScript: Calling parent's method

Question

The way I implement inheritance in JavaScript is shown in the example below. I am trying to call from the child class a method of the parent class. I have seen many examples online, that add the parent method to the prototype, and the use the call or apply function (but my implementation is not doing that). Is there a way to make this type of call?

function classM() //parent class
{
    this.myName = function()
    {
        console.log('parent');
    }
}

function classEM ()
{
    classM.call(this);

    this.myName = function()
    {
        console.log('child');
        //HOW DO I CALL myName() of the parent class?
    }

}


classEM.prototype = Object.create(classM.prototype);
classEM.prototype.constructor = classEM;




var rm = new classEM();
rm.myName(); //should print child and then parent

You're not using prototypal inheritance on `classM`, so `Object.create(classM.prototype)` returns an object with no `myName` method. When you do `classM.call(this)`, the object gets the method, but then you overwrite it, so no, you can't call it. — cookie monster, Jul 10 '14 at 14:16
@cookiemonster I understand that, but is there a way to fix it? — FranXh, Jul 10 '14 at 14:18
If you want to call both `myName` methods, why not create a new instance of `classM` inside `classEM` and call the darn method ? — adeneo, Jul 10 '14 at 14:20
Given that you don't want to use prototypal inheritance on `classM`, no, there's no way to fix it since a property on an object can't reference two different values at the same time. If you put the `myName` method on `classM.prototype`, then you could do `classM.prototype.myName.call(this)`. Overall, I don't know why you're setting the `.prototype` of the constructor, but not using prototypal inheritance. — cookie monster, Jul 10 '14 at 14:21
@adeno Because I am trying to learn and understand how to call a parent method that I have overridden in the child class — FranXh, Jul 10 '14 at 14:22
Without inheritance, you don't really have a parent with a child class, so any solution will be a hack, and you could just as well create an instance of the "parent" inside the "child" and call the method directly, and if you want it to first log `child` and then `parent` when calling `myName` once, overwriting the function isn't going to work, as then it would no longer log `child` etc. — adeneo, Jul 10 '14 at 14:30
The following answer explains in detail how constructor functions and prototype can be used for inheritance: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Jul 11 '14 at 03:14

score 2 · Accepted Answer · answered Jul 10 '14 at 14:38

2

When you do this.myName = ... in classEM, you are replacing the old myName function created by the parent with the one in classEM. So only one function exists now. Instead, you can add the myName function in the classM's prototype and inherit from it.

So the program becomes like this

function classM() {}

// Add myName to the parent
classM.prototype.myName = function() {
    console.log('parent');
}

function classEM() {
    this.myName = function() {
        // Get the parent prototype object and invoke the myName in it.
        Object.getPrototypeOf(this).myName();
        console.log('child');
    }
}

classEM.prototype = Object.create(classM.prototype);
classEM.prototype.constructor = classEM;

var rm = new classEM();
rm.myName();

Output

parent
child

answered Jul 10 '14 at 14:38

thefourtheye

233,700
52
457
497

1

I came up with the same solution, but instead of the Object.getPrototypeOf(this).myName(); I call classM.prototype.myName.call(this);. Do you know if there is a difference between your way and this one? – FranXh Jul 10 '14 at 14:40
1

@FranXh Well, my approach will have the flexibility with the `this`. We can dynamically change the `this` object :-) – thefourtheye Jul 10 '14 at 14:41
I see. The reason I was asking is mostly because of the "this" and "that" usage in JavaScript. I use "that" inside functions – FranXh Jul 10 '14 at 14:42
1

@FranXh Normally, when we define inner functions, if they need to retain the `this` of the outer function, we store it in a conventional variable `that` as `var that = this`. Apart from that we don't have to worry much about `that` – thefourtheye Jul 10 '14 at 14:47

Inheritance in JavaScript: Calling parent's method

1 Answers1