javascript - 创建 DOM 元素的构造函数

Question

我正在尝试使用构造函数来帮助创建 DOM 元素，但我想知道是否有更好的方法来做到这一点。我知道我可以使用框架来完成此任务，但我想使用普通 JavaScript 来实现它。

下面显示的两种方法似乎都有效，但我没有经常使用带有函数的 new 运算符。这两种方式有什么区别吗？在这种情况下，我最好使用普通的旧函数而不是使用 new 吗？

// First way
function Title(text){
  this.element = document.createElement('h2');
  this.element.innerText = text;
  return this.element;
}

// Second way
function Title(text){
  var element = document.createElement('h2');
  element.innerText = text;
  return element;
}

var title = new Title("Hello");
document.body.appendChild(title);

Answer 1

你的第一种方法似乎不正确。虽然它有效，但您似乎还没有理解 new 在 JavaScript 中的工作原理。当您将 new 与函数一起使用时，将执行以下步骤:

• 创建一个空对象，类似于 {}。
• 函数内的所有 this 引用都引用该空对象。
• this 用于根据需要填充该空对象。
• 隐式返回this。 (如果您明确返回，此将被忽略。)

请注意，在构造函数中，如果您显式返回 this 以外的内容，则返回值不是该构造函数的instanceof。只有 this 是构造函数的 instanceof。

因此，第一种方式与new的逻辑无关。逻辑上与第二个相同。