I'm trying to create a simple inheritance structure using the class syntax in ES6. I have a parent class with a method, say update(), and a child class which also needs an update() method. I would like a call to child.update() to contain a call to parent.update(), as well as containing some additional functionality specific to the child class.

I find that creating this method in the child class seems to overwrite the reference to that method in the parent class, meaning I can't call both.

Here is an example:

class Xmover {
    constructor(x, speedX) {
        this.x = x;
        this.speedX = speedX;
    }

    update() {
        this.x += this.speedX;
    }
}

class XYmover extends Xmover {
    constructor(x, y, speedX, speedY) {
        super(x, speedX);
        this.y = y;
        this.speedY = speedY;
    }

    update() {
        this.y += this.speedY;
        // *** I would like this to also update the x position with a call
        //    to Xmover.update() so I don't have to repeat the code ***
    }
}

testXY = new XYmover(0, 0, 10, 10);
console.log(`Start pos: ${textXY.x}, ${testXY.y}`);
testXY.update();
console.log(`End pos: ${textXY.x}, ${testXY.y}`);

This produces the output:

Start pos: 0, 0
End pos: 0, 10

As you can see, the y position is correctly updated with the call to XYmover.update(), but this new definition overrides any calls to Xmover.update(). If both functions were being called, we'd expect to see an end position of 10, 10.

I have seen people who don't use this class syntax get around this by creating a copy of the original super function in a way similar to this:

var super_update = this.update;
update() {
    // ... other functionality
    super_update();
}

However, this doesn't feel ideal to me, and it also doesn't work with the class syntax (unless you define this super_update in the child class constructor, which seems like it would create other issues of having a full copy of the parent.update() function in each instance of the child object).

I am new to Javascript so I haven't fully gotten my head around the mechanics of using prototypes yet - perhaps the best solution involves these somehow? At my level of understanding, these would work similarly however, in that even if a prototype function was defined, creating a function with that name would mean that the prototype never gets called either.

I'm trying to create a simple inheritance structure using the class syntax in ES6. I have a parent class with a method, say update(), and a child class which also needs an update() method. I would like a call to child.update() to contain a call to parent.update(), as well as containing some additional functionality specific to the child class.

I find that creating this method in the child class seems to overwrite the reference to that method in the parent class, meaning I can't call both.

Here is an example:

class Xmover {
    constructor(x, speedX) {
        this.x = x;
        this.speedX = speedX;
    }

    update() {
        this.x += this.speedX;
    }
}

class XYmover extends Xmover {
    constructor(x, y, speedX, speedY) {
        super(x, speedX);
        this.y = y;
        this.speedY = speedY;
    }

    update() {
        this.y += this.speedY;
        // *** I would like this to also update the x position with a call
        //    to Xmover.update() so I don't have to repeat the code ***
    }
}

testXY = new XYmover(0, 0, 10, 10);
console.log(`Start pos: ${textXY.x}, ${testXY.y}`);
testXY.update();
console.log(`End pos: ${textXY.x}, ${testXY.y}`);

This produces the output:

Start pos: 0, 0
End pos: 0, 10

As you can see, the y position is correctly updated with the call to XYmover.update(), but this new definition overrides any calls to Xmover.update(). If both functions were being called, we'd expect to see an end position of 10, 10.

I have seen people who don't use this class syntax get around this by creating a copy of the original super function in a way similar to this:

var super_update = this.update;
update() {
    // ... other functionality
    super_update();
}

However, this doesn't feel ideal to me, and it also doesn't work with the class syntax (unless you define this super_update in the child class constructor, which seems like it would create other issues of having a full copy of the parent.update() function in each instance of the child object).

I am new to Javascript so I haven't fully gotten my head around the mechanics of using prototypes yet - perhaps the best solution involves these somehow? At my level of understanding, these would work similarly however, in that even if a prototype function was defined, creating a function with that name would mean that the prototype never gets called either.

• javascript
• class

1 Answer 1

 super.update();

isn't that super? That will look up the update function in the superclass, and call it with the correct this.