Javascript Class 并扩展

Question

我不太清楚如何表达这一点，所以我将继续深入并尽可能地解释它。

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

如果我们有 Message 的 class，其中包含一个名为 addMessage[=52] 的 method =].

我们想用这个方法。在名为 Magic.
的 class 中
我们具体是怎么做到的？

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())

这是行不通的，它为什么行不通似乎合乎逻辑，因为消息永远不会被使用，但我们如何使用 addMessage 方法魔术虽然？

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

有什么想法吗？

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 都可以使用属于它的对象属性。

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>

Javascript Class 并扩展

Javascript Class and extend

javascript

inheritance

class

subclass