Extend inherited prototype method in Javascript

Question

I have some classes (constructors) that are related as "parent-child":

// Abstract root SuperClass

function SuperClass() {
    this.CLASS_ID = "SUPER-CLASS";
    throw new Error('Failed to instantiate abstract class' + this.CLASS_ID);
}

SuperClass.prototype.sayHello = function() {
    alert('Hello, world!');
};

// Absctract ClassA inherits from SuperClass
// inherit() and extend() are generic functions from the David Flanagan`s 
// brilliand book "Definitive Guide"

function ClassA() {
    this.CLASS_ID = "CLASS-A";
    throw new Error('Failed to instantiate abstract class' + this.CLASS_ID);
}

ClassA.prototype = inherit(SuperClass.prototype);

// Concrete ClassB inherits from ClassA

function ClassB(initData) {
    this.CLASS_ID = "CLASS-B";
}

ClassB.prototype = inherit(ClassA.prototype);

extend(ClassB.prototype, {
    constructor: ClassB,

    welcomeNewDay: function() {
        this.sayHello();
        this.doSomethingElse();
    },

    doSomethingElse: function(){
        alert('Jumping');
    }
});

var classB = new ClassB();
classB.welcomeNewDay();

How can I correctly extend method .sayHello() of the abstract ClassA without overloading it?

I`ve tried to make it this way:

extend(ClassA.prototype, {
    sayHello: function() {
        this.__proto__.sayHello();
        this.sing();
    },

    sing: function() {
        alert('Lalala');
    }
});

The problem is that .sing() is invoked 3 times instead of 1.

If I try:

this.__proto__.sayHello.call(this);

It throws an exception:

Uncaught RangeError: Maximum call stack size exceeded

sayHello() is not method of the abstract ClassA .It is inherited from its prototype — RIYAJ KHAN
– RIYAJ KHAN, Commented Apr 8, 2016 at 7:03
Sometime you use inherit and sometime use prototype.Why?Is there any requirements ? — RIYAJ KHAN
– RIYAJ KHAN, Commented Apr 8, 2016 at 7:07
@RIYAJKHAN I use inherit() when I need to get (copy) all possible methods from the ancestor class prototype. I used prototype (here I guess? SuperClass.prototype.sayHello") just to quick type new method. — J.P.Remarg
– J.P.Remarg, Commented Apr 8, 2016 at 7:24

Dmitri Pavlutin · Accepted Answer · 2016-04-08 08:09:00Z

1

Try to access the initial class:

extend(ClassA.prototype, {
    sayHello: function() {
        SuperClass.prototype.sayHello.call(this);
        this.sing();
    },

    sing: function() {
        alert('Lalala');
    }
});

or just store the current sayHello() method:

var initialSayHello = ClassA.prototype.sayHello;
extend(ClassA.prototype, {
    sayHello: function() {
        initialSayHello.call(this);
        this.sing();
    },

    sing: function() {
        alert('Lalala');
    }
});

You need to have the reference to the original sayHello() method.

Uncaught RangeError: Maximum call stack size exceeded

It is thrown because you actually have an infinite recursion, calling the method itself in the method.

edited Apr 8, 2016 at 8:09

answered Apr 8, 2016 at 6:45

Dmitri Pavlutin

19.3k8 gold badges41 silver badges46 bronze badges

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

2 Comments

J.P.Remarg Over a year ago

Dmitri, thank you for yor help. I see you`ve suggested to hardcode the link to the ancestor prototype method and it works. Can I resolve the same problem without the explicit writing the class name in the first case?

Dmitri Pavlutin Over a year ago

@J.P.Remarg You need to access somehow the prototype, and using the Constructor is ok. But it would be something weird: this.__proto__.__proto__.sayHello.call(this).

Collectives™ on Stack Overflow

Extend inherited prototype method in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related