javascript - js ES6多态性中如何使用this和super

Question

我想要 3 个相关的类(class)。一个Node类、一个DoorNode类和一个SisterDoorNode类。

节点有不同类型，它们都有 id、位置、连接和一些功能。

其中一种类型是门节点，它与姐妹门节点一样，具有节点类型“门”、相应的元素和一些功能。他们的 id 和位置以一种方式计算。

然后还有姐妹门节点。它们有不同的方式来计算 id 和位置，并且还有一个 bool 值表明它们是姐妹门节点。

这就是我想要的样子:

class Node {
    constructor(id, pos) {
        this.id = id;
        this.pos = pos;
        this.connections = [];
    }

    addConnection(c) {
        //A few functions all nodes need
    }
}

class DoorNode extends Node {
    constructor(door) {
        //Both of these are needed for all Nodes but are calculated in a different way for DoorNode and SisterDoorNode
        let id = this.getId(door);
        let pos = this.getPos(door);
        super(id, pos);

        //Both of these are needed in SisterDoorNode and DoorNode
        this.nodeType = "door";
        this.correspondingElement = door;
    }

    getId(door) {
        return door.id;
    }

    getPos(door) {
        return door.pos;
    }

    getDoorSize() {
        //Some calculations I need for both DoorNode + SisterDoorNode
    }
}

class SisterDoorNode extends DoorNode {
    constructor(door) {
        super(door);
        this.isSisterNode = true;
    }

    getId(door) {
        return door.id + ".2";
    }

    getPos(door) {
        return new Point(door.pos.x + 10, door.pos.y + 10);
    }
}

但是由于我不能在 super() 之前使用 this ，所以这不起作用。解决这个问题的最佳方法是什么？

Answer 1

因此，您肯定无法在“super”之前使用“this”，因为在基类的构造函数完成运行之前没有“this”可供引用。

对此有一些解决方案，但它们涉及重构您的代码。

1) 传入 id 和 pos 作为参数，就像基类所做的那样。

2) 创建getId 和getPos 静态方法。 (这将引入与使用静态变量有关的新复杂性)

3) 将 pos 和 id 设置为可选，并在 super 调用后的某个时间设置它们。

4) 你可以直接引用 props； super(door.id,door.pos)，但这在对 id 和 pos 执行逻辑的扩展类中不起作用>

更新以包括使用带有 super 调用的静态函数的示例。

class Foo {
    constructor(door) {
        super( Foo.GetNodeFromDoor( door ) );
        // can now use `this`
    }
    
    
    static GetNodeFromDoor( door ) {
      // `this` refers to the static namespace, and not to the instance of the class. 
      return {
        id: door.id + ".2",
        pos: new Point(
          door.pos.x + 10,
          door.pos.y + 10
        )
      }
    }
}