Javascript Класс и продление - PullRequest
Новая
       11

Javascript Класс и продление

1 голос
/ 09 апреля 2020

Я не совсем знаю, как это сформулировать, поэтому я просто углублюсь и попытаюсь объяснить это как можно лучше.

Я не совсем знаю, как хранить свойства класса без использования их, или что-то в этом роде.

Если у нас есть класс Сообщение , которое содержит метод с именем addMessage .

Мы хотим использовать этот метод. внутри класса под названием Волхвы c.

Как именно мы это делаем? 

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

в коде, но никогда не используйте сообщение в любом месте.

Вместо этого мы используем Волхвы c примерно так: 

const magic = new Magic(something)

и затем: 

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

Это не работает, кажется логичным, почему это не так, потому что сообщение никогда не используется, но как мы можем использовать метод addMessage внутри Волхвы c хотя?

Я пробовал несколько вещей, но ничего не работает, кроме выполнения document.getElementById внутри super(), но мне кажется, что это побеждает смысл использования классов, если я не могу как-то вызвать его в коде и оставить в нем ссылку на контейнер сообщений ...

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

Конструктор 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
});
1 голос
/ 09 апреля 2020

Вместо наследования составляется ваш вариант использования (Behavioral design patterns). Объединение 2 объектов для совместной работы. Вот базовый c образец для решения этой проблемы. 

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>
...