Question

我试图使用构造函数来帮助创建DOM元素，但我想知道是否有一种首选方法。我知道我可以使用框架来处理这个问题，但我想使用vanilla 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将被忽略。）

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

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

用于创建DOM元素的构造函数

1 个答案: