Почему я получаю эту ошибку: Uncaught TypeError: this.createLink не является функцией на новом Link в <anonymous>1: 9?

Question

Я получаю эту ошибку: Uncaught TypeError: this.createLink не является функцией при новом Link в JavaScript, класс Paragraph работает отлично.

class Paragraph {
constructor(text) {
  this.text = text;
  return this.createParagraph();
}
createParagraph() {
  var paragraph = document.createElement('p');
  paragraph.appendChild(document.createTextNode(this.text));
  return paragraph;
    }
}

class Link extends Paragraph {
constructor(text, link) {
    super(text);
    this.link = link;
    return this.createLink();
}
createLink() {
    var aLink = document.createElement('a');
    aLink.appendChild(document.createTextNode(this.text));
    aLink.href = this.link;
    return aLink;
    }
}

Я пытаюсь выполнить следующая команда: var a = new Link ("Текст", "google.com"); в качестве теста.

Answer 1

Итак, причина, по которой вы столкнулись с этой проблемой, заключается в странном свойстве конструктора.

Этот код:

constructor(text) {
    this.text = text;
    return this.createParagraph();
}

вызывает «this» в конструкторе Link чтобы быть на самом деле результатом createParagraph.

Я, честно говоря, понятия не имею, почему родительский конструктор ведет себя так, но удаление вашего «возврата» из обоих конструкторов должно сделать это не ошибка.

В общем случае конструкторам не нужно ничего возвращать, создаваемый вами экземпляр «возвращается» по умолчанию из оператора new.

Answer 2

super(text); в вашем конструкторе Link вызывает constructor класса Paragraph. Создается новый экземпляр Paragraph, но вместо возврата экземпляра возвращается значение из метода createParagraph().

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

Но, как ни странно, перестройка его с помощью регулярных объявлений функций (старый способ skool) действительно позволяет работать. Я озадачен этим.

function Paragraph(text) {
  this.text = text;
  return this.createParagraph();
}

Paragraph.prototype.createParagraph = function() {
  var paragraph = document.createElement('p');
  paragraph.appendChild(document.createTextNode(this.text));
  return paragraph;
}

function Link(text, link) {
  Paragraph.call(this, text);
  this.link = link;
  return this.createLink();
}

Link.prototype = Object.create(Paragraph.prototype);
Link.prototype.constructor = Link;

Link.prototype.createLink = function() {
  var aLink = document.createElement('a');
  aLink.appendChild(document.createTextNode(this.text));
  aLink.href = this.link;
  return aLink;
}

var link = new Link('hello', 'http://google.com');
console.log(link);

Хотя то, как вы используете class, не имеет никакого смысла. Почему бы не поместить все просто в function, если вы хотите только вернуть значение, но не экземпляр.

В приведенном ниже примере будет гораздо больше смысла построить то, что вы сейчас пытаетесь.

function createParagraph(text) {
  var paragraph = document.createElement('p');
  paragraph.appendChild(document.createTextNode(text));
  return paragraph;
}

function createLink(text, link) {
  var aLink = document.createElement('a');
  aLink.appendChild(document.createTextNode(text));
  aLink.href = link;
  return aLink;
}