typescript parent class is calling derived function

Question

I have got a base class and a derived one, each has init function.

When i construct the derived one i want it to:

call its base constructor which:

1.1. calls its init function
call its own(derived) init function.

The problem is that the derived init function is called twice.

Code:

class Base{
    constructor() {
        this.init();
    }
    init(){
        console.log("Base init");
    }
}
class Derived extends Base{
    constructor() {
        super();
        this.init();
    }
    init(){
        console.log("Derived init");
    }
}
var obj = new Derived ();

Output:

Derived init
Derived init

init is overwritten that's what it's all about ... In derived can you do sth like base.init() or super.init(). I do not know the typescript keyword - anyways you have to call the Base method explictly. However while theoratically interestang this would be a bad design IMHO — Martin Meeser
– Martin Meeser, Commented Feb 16, 2015 at 12:43

Radim Köhler · Accepted Answer · 2015-02-16 12:53:55Z

5

In case, we want base init() to be called and then child init() we can solve it like this:

constructor() {
    super.init();
    super();        
}

Check the example here

Solution when firstly child and then base should be like this.

constructor() {
    super();
    //this.init();
    super.init();
}

A working example is in this playground. Click the RUN to see two buttons generated

If we want just our derived stuff to be used, we do not have to call init again:

constructor() {
    super();
    //this.init();
    // init will be called in super
}

This example just uses the child stuff

edited Feb 16, 2015 at 12:53

answered Feb 16, 2015 at 12:44

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

Dorad Over a year ago

Sorry I did not mention, but i wanted the order to be 1.parent.init,2.derived.init.

Radim Köhler Over a year ago

Make sense, then just call super.init(); super(); ;) ;). I also extended my answer and added another example...

Yiorgos · Accepted Answer · 2015-02-16 14:47:09Z

Another approach could be this (using also Radim's playground example) :

   class Base{
    constructor() {
        this.init();
    }
    init(){
        var button = document.createElement('button');      
        button.textContent = "base init";
        document.body.appendChild(button);
    }
}
class Derived extends Base{
    constructor() {
        super();

    }
    init(){
        super.init();
        var button = document.createElement('button');      
        button.textContent = "Derived init";
        document.body.appendChild(button);
    }
}
var obj = new Derived ();

By calling the ancestor's init function from the derived class you can get the wanted flow.

Consider the anscestor's init a virtual method that gets overridden in the derived class(-es).

Playground Example

Collectives™ on Stack Overflow

typescript parent class is calling derived function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related