Проблема при наследовании методов и свойств класса

Question

Имеется такой код:

class Parent {
  constructor() {
    this.element = document.querySelector(".parent");
    this.element.addEventListener("click", this.click.bind(this));
  }
  click(e) {
    let action = e.target.dataset.action;
    if (action) {
      this[action](e.target);
    }
  }
}

class Child extends Parent {
  constructor() {
    super();
  }
  doSmth() {
    console.log("do something");
  }
  doSmth1() {
    console.log("do something1");
  }
}

new Parent();
new Child();

.parent {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  padding: 10px;
}

.child1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
}

<div class="parent" data-action="doSmth">
  Parent
  <div class="child1" data-action="doSmth1">
    Child1
  </div>
</div>

Возможно ли сделать так, чтобы информация о элементе и функция прослушивателя событий хранилась в родителе, а методы, которые будет запускать функция, уже в потомках. На данный момент код выше будет работать только если передавать отдельно каждому классу элемент для прослушивания событий. При этом появляется ограничение, они должны быть на одном уровне вложенности.

Answer 1

У вас всё работает насколько я вижу, единственное вам вместо if(action) надо проверять if(this[action]):

class Parent {
  constructor() {
    this.element = document.querySelector(".parent");
    this.element.addEventListener("click", this.click.bind(this));
  }
  click(e) {
    let action = e.target.dataset.action;
    if (this[action]) {
      this[action](e.target);
    }
  }
}

class Child extends Parent {
  constructor() {
    super();
  }
  doSmth() {
    console.log("do something");
  }
  doSmth1() {
    console.log("do something1");
  }
}

new Parent();
new Child();

.parent {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  padding: 10px;
}

.child1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
}

<div class="parent" data-action="doSmth">
  Parent
  <div class="child1" data-action="doSmth1">
    Child1
  </div>
</div>

БЛОГ НА HUSL

Проблема при наследовании методов и свойств класса

Ответы (1 шт):