如何在子类方法中调用与父类同名的父类方法?

6

我正在尝试使用ES6类语法创建一个简单的继承结构。我有一个父类和一个名为update()的方法,还有一个需要一个update()方法的子类。我希望调用child.update()时包含对parent.update()的调用,同时也包含一些特定于子类的其他功能。

我发现在子类中创建这个方法似乎会覆盖父类中该方法的引用,这意味着我无法同时调用两个方法。

以下是一个示例:

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}`);

这将产生以下输出:
Start pos: 0, 0
End pos: 0, 10

正如您所看到的,通过调用 XYmover.update(),y位置已经正确更新,但是这个新的定义会覆盖任何对 Xmover.update() 的调用。如果两个函数都被调用,我们期望看到的结束位置是 10, 10

我见过一些没有使用这种类语法的人通过类似以下方式创建原始超级函数的副本来解决这个问题:

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

然而,这对我来说并不理想,也与类语法不兼容(除非在子类构造函数中定义此“super_update”,但这似乎会创建其他问题,即每个子对象实例中都有一个完整的“parent.update()”函数副本)。 我是Javascript新手,所以我还没有完全掌握使用原型的机制-也许最好的解决方案某种程度上涉及这些? 在我的理解水平上,这些将类似地工作,即使定义了原型函数,创建具有该名称的函数也意味着原型永远不会被调用。
1个回答

8
 super.update();

那不是很 超级 吗?这将查找超类中的 update 函数,并使用正确的 this 调用它。


我不确定我是怎么错过了这个,但你是对的。谢谢。 - DylanJaide
1
@HG- 它是ES6中未被充分利用的伟大新功能之一,因此很多教程/文档都没有提到它并不奇怪。 - Jonas Wilms
这很公平 - 尽管它似乎几乎与我过去广泛使用的Java的语法完全相同。看来我有点生疏了。谢谢你的帮助! - DylanJaide
是的,class 语法主要是为了让从其他编程语言转来的开发者更容易使用 JavaScript,因此它看起来与 Java 相似。 - Jonas Wilms

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接