为什么我会收到此错误：未捕获的类型错误：this.createLink 不是 <anonymous>1:9 处的新链接处的函数？答案

【问题标题】：Why am I getting this error: Uncaught TypeError: this.createLink is not a function at new Link at <anonymous>1:9?为什么我会收到此错误：未捕获的类型错误：this.createLink 不是 <anonymous>1:9 处的新链接处的函数？
【发布时间】：2020-03-05 23:44:04
【问题描述】：

我收到这个错误：Uncaught TypeError: this.createLink is not a function 在 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("Text","google.com");作为测试。

【问题讨论】：

约翰，你想达到什么目的？一个带有链接和段落的 dom

标签： javascript jquery dom

【解决方案1】：

所以你遇到这个问题的原因是构造函数的一个奇怪的属性。

这段代码：

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

导致 Link 构造函数中的“this”实际上是 createParagraph 的结果。

老实说，我不知道为什么父构造函数会这样，但是从两个构造函数中删除你的“返回”应该不会出错。

一般来说，构造函数不需要返回任何东西，你创建的实例默认是从new 操作符“返回”的。

【讨论】：

经过一些测试，构造函数似乎会在返回对象而不是字符串时执行此操作。这也很令人困惑。

【解决方案2】：

Link 构造函数中的super(text); 调用Paragraph 类的constructor。正在创建 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;
}

【讨论】：