Дочерний класс со своим конструктором

116

25 ноября 2020, 22:00

Код:

<div id="container"></div>

class Parent {
  constructor(){
    this.elem = document.createElement("span");
    this.elem.textContent= " Имя";
    container.appendChild(this.elem);
  };
   func = function(){
      console.log(this.elem.textContent);
   };
};

class Child extends Parent {
  constructor(){
    this.elem = document.createElement("span");
    this.elem.textContent= " Фамилия";
    container.appendChild(this.elem);
  }
}

При попытке создать экземпляр дочернего класса возникает ошибка:

child = new Child(); 
child.func();
//Uncaught ReferenceError: Must call super constructor 
//in derived class before accessing 'this' or returning from derived constructor

Проблема заключалась в том, что нужно вызвать super(); в конструкторе потомка

class Child extends Parent {
    constructor(){
        super();
        this.elem = document.createElement("span");
        this.elem.textContent= " Фамилия";
        container.appendChild(this.elem);
  }
}

Но тогда При создании new Child создается как элемент "Имя" так и элемент "Фамилия". Мне нужно чтобы у потомка был свой конструктор, но чтобы он наследовал методы родителя. Как это можно сделать?

Answer 1

class Child extends Parent {
  constructor(){
    super();
    //this.elem = document.createElement("span");
    this.elem.textContent = " Фамилия";
    //container.appendChild(this.elem);
  }
}

Сделать полностью собственный конструктор для потомка

Смысл этой фразы от меня ускользает.

class Parent {
  constructor() {
    this.elem = null;
  }
   func = function() {
      console.log(this.elem.textContent);
   }
}
class Child_Name extends Parent {
  constructor() {
    super();
    this.elem = document.createElement("span");
    this.elem.textContent= " Имя";
    container.appendChild(this.elem);
  }
}
class Child_Surname extends Parent {
  constructor() {
    super();
    this.elem = document.createElement("span");
    this.elem.textContent = " Фамилия";
    container.appendChild(this.elem);
  }
}