Javascript 类和扩展

Question

我不太知道如何表达，所以我会继续深入并尽可能地解释它。

我不太清楚如何在不使用它们或类似的东西的情况下存储类属性。

如果我们有一个 Message 类，其中包含一个名为 addMessage 的方法。

我们想使用这种方法。在一个名为 Magic 的类中。

我们究竟是如何做到这一点的？

class Message {
    constructor(messageContainer) {
        this.message = messageContainer;
    }

    addMessage(msg) {
        this.message.innerText = msg;
    }
}

class Magic extends Message {
    constructor(magic) {
        super();
        this.magic = magic;
    }

    something() {
        this.addMessage('Some random message');
    }
}

我们这样做：

const message = new Message(document.getElementById('message-container'))

在代码中，但从不在任何地方使用 message。

相反，我们像这样使用 Magic：

const magic = new Magic(something)

然后：

element.addEventListener('click', () => magic.something())

这不起作用，它为什么不起作用似乎是合乎逻辑的，因为消息永远不会被使用，但是我们如何利用 MagicaddMessage 方法/em> 但是？

我已经尝试了一些东西，但除了在super() 内执行document.getElementById 之外似乎没有任何效果，但在我看来，如果我不能以某种方式调用它，这似乎违背了使用类的意义代码并让它保留对消息容器的引用...

有什么想法吗？

Answer 1

Magic 构造函数需要采用messageContainer 参数传递给Message 构造函数。

class Magic extends Message {
    constructor(messageContainer, magic) {
        super(messageContainer);
        this.magic = magic;
    }

    something() {
        this.addMessage('Some random message');
    }
}

const magic = new Magic(document.getElementById('message-container'), something)

如果您有很多参数并且不想在调用super() 时将它们全部列出，请使用对象来保存它们而不是使用单独的参数。每个类都可以使用与其相关的对象属性。

class Message {
  constructor(options) {
    this.message = options.messageContainer;
  }

  addMessage(msg) {
    this.message.innerText = msg;
  }
}

class Magic extends Message {
  constructor(options) {
    super(options);
    this.magic = options.magic;
  }

  something() {
    this.addMessage('Some random message');
  }
}

magic = new Magic({
  messageContainer: document.getElementById("message-container"),
  magic: something
});

Answer 2

您的用例不是继承，而是组合（Behavioral design patterns）。结合 2 个对象一起工作。这是解决这个问题的基本示例。

class MessageContainer {
  constructor(messageContainer) {
    this.message = messageContainer;
  }
  addMessage(msg) {
    this.message.innerHTML = msg;
  }
}
class Magic {
  constructor(msgContainer) {
    this.container = msgContainer;
  }
  something() {
    this.container.addMessage("Some random message"+ new Date().getTime());
  }
}
const container = new MessageContainer(
  document.getElementById("message-container")
);

const magic = new Magic(container);

document.addEventListener("click", () => {
  magic.something();
});

 <div style="height: 100px; color: red;">
        click here
        <br/>
        <span id="message-container"></span>
    </div>