javascript: class inheritance method call

Question

I am new to JS, I am particularly confused by following code:

class One{
    constructor(num){
        this.num = num;
    }

    add(){
        this.num += 1;
    }

    showInfo(){
        this.add();
        console.log(`The result is ${this.num}`);
    }
}

class Ten extends One{
    constructor(num){
        super(num);
    }

    add(){
        this.num += 10;
    }
}

let t = new Ten(1);
t.showInfo();
// The result is 11

I thought the result should be 2, because showInfo is executed in One so add should be executed in One as well, furthermore, showInfo is only defined in One, but why is One.showInfo calling Ten.add instead of One.add?

I will be so glad if someone offer some explanation.

Try console.log(this) in your showInfo - you'd not be surprised anymore. — choz
– choz, Commented Nov 20, 2020 at 6:59
For any Ten instance Ten's prototypal add method shadows the one implemented by One. If one wants to support the latter for any Ten instance one needs to implement another (prototypal) method which does a super delegation ... e.g. addOne() { return super.add(); }. Then one can do e.g. const t = new Ten(1); t.add() /* 11 */; t.addOne() /* 12 */; — Peter Seliger
– Peter Seliger, Commented Nov 20, 2020 at 13:02

Aber Abou-Rahma · Accepted Answer · 2020-11-21 07:58:43Z

1

The showInfo () is inherited by the Ten class and it is executed on the Ten class calling the add () of the Ten class; Yielding 11;

To return 2 add () implementation in Ten Class should call super.add() instead

answered Nov 21, 2020 at 7:58

Aber Abou-Rahma

1741 silver badge9 bronze badges

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

Comments

AdamKniec · Accepted Answer · 2020-11-21 08:30:20Z

0

add(){
        return super.add();
    }

Go through the below :)

https://javascript.info/class-inheritance

answered Nov 21, 2020 at 8:30

AdamKniec

1,72514 silver badges28 bronze badges

Collectives™ on Stack Overflow

javascript: class inheritance method call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related