Konstruktor-Funktion zum Erstellen von DOM-Elementen

Question

Ich versuche, eine Konstruktorfunktion zu verwenden, um DOM-Elemente zu erstellen, aber ich frage mich, ob es einen bevorzugten Weg dazu gab. Ich weiß, dass ich dafür ein Framework verwenden könnte, aber ich möchte es mit JavaScript von Vanilla implementieren.

Beide unten gezeigten Möglichkeiten scheinen zu funktionieren, aber ich habe den Operator new mit Funktionen nicht sehr verwendet. Gibt es einen Unterschied zwischen den beiden Möglichkeiten? Wäre es besser, in dieser Situation einfach eine alte Funktion zu verwenden und nicht new zu verwenden?

// 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

Ihr erster Weg scheint nicht korrekt zu sein. Obwohl es funktioniert, scheinst du nicht zu verstehen, wie new in JavaScript funktioniert. Wenn Sie new mit einer Funktion verwenden, werden die folgenden Schritte unternommen:

• Ein leeres Objekt erstellt wird, so etwas wie {}.
• Alle this Referenzen innerhalb der Funktion beziehen sich auf dieses leere Objekt.
• this wird verwendet, um dieses leere Objekt nach Bedarf aufzufüllen.
• implizitthis zurückgegeben wird. (Wenn Sie ausdrücklich Gegenzug wird this ignoriert.)

Beachten Sie, dass in einem Konstruktor Funktion, wenn Sie explizit Rückkehr etwas anderes als this, der zurückgegebene Wert nicht instanceof ist, dass die Konstruktorfunktion. Nur this ist instanceof die Konstruktorfunktion.

Daher hat der erste Weg nichts mit Logik von new zu tun. Es ist logisch das gleiche wie das zweite.