Javascript Class and extend

Question

I don't quite know how to phrase this so I'll just dive ahead and try to explain it as best as I can.

I don't quite know how to store class properties without using them, or something like that.

If we have a class of Message that contains a method called addMessage .

We want to use this method. inside of a class called Magic .

How exactly do we do this?

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

We do:

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

in the code but never use message anywhere.

Instead we use Magic like so:

const magic = new Magic(something)

and then:

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

This does not work, it does seem logical to why it doesn't, its because message never gets used, but how could we make use of the addMessage method inside of Magic though?

I've tried a few things but nothing seems to work except for doing document.getElementById inside of the super() , but that seems to me like it defeats the point of using classes if I can't call it somehow in the code and have it keep the reference to the message container...

Any ideas?

Answer 1

The Magic constructor needs to take a messageContainer parameter to pass along to the Message constructor.

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)

If you have lots of parameters and don't want to have list them all when calling super() , use an object to hold them instead of using seperate parameters. Each class can use the object properties that pertain to it.

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

Instead of inheritance, your use case is composed( Behavioral design patterns ). Combining 2 objects to work together. here is basic sample to solve this.

 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>