JavaScript übernimmt die Kontrolle über Neues

So starten Sie schnell mit VUE3.0: Geben Sie das Lernvorwort ein

.

Was ist new ?

Der new Operator erstellt eine Instanz eines benutzerdefinierten Objekttyps oder eines der integrierten Objekttypen, der über einen Konstruktor verfügt.

Es ist immer noch etwas unklar, wenn man sich nur die Definition ansieht. Schauen wir uns ein konkretes Beispiel an, um die Funktion von new in JavaScript zu verstehen.

Zum Beispiel

// Im wirklichen Leben kann man nicht abnehmen, aber man muss schlank bleiben. Online-Funktion Thin_User(name, age) {
    this.name = Name;
    this.age = Alter;
}

Thin_User.prototype.eatToMuch = function () {
    // Tagträumen und dicke Tränen hinterlassen console.log('Ich esse so viel, aber ich bin sehr dünn!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // true
// Ich esse so viel, aber ich bin sehr dünn!!!
xiaobao.eatToMuch();

Anhand des obigen Beispiels können wir feststellen xiaobao :

• auf die Eigenschaften im Konstruktor Thin_User
• auf die Eigenschaften in Thin_User.prototype zugreifen

und es einfacher beschreiben kann. new kann Folgendes tun:

• ein leeres Objekt erstellen, Der __proto__->Thin_User.prototype des Objekts
• führt den Konstruktor aus und this auf das neue Objekt
,
• um das neue Objekt zurückzugeben.

Ergänzende Anweisungen:

Da new ein Schlüsselwort ist, können wir es nicht wie die höherwertige Methode zur Simulation von Arrays überschreiben, also schreiben wir eine Funktion createObject zum Simulieren new Effekts. Die Verwendung ist wie folgt:

function Thin_User(name, age) {}

const u1 = new Thin_user(...)
const u2 = createObject(Thin_User, ...a)

Vorläufige Simulation

Gemäß der obigen Analyse sind die allgemeinen Schritte zum Schreiben createObject :

• Erstellen Sie ein neues Objekt obj
• und legen Sie obj.__proto__->constructor.prototype fest ( JavaScript wird jedoch nicht empfohlen Durch direktes Ändern von __proto__-Attributen wird die setPrototypeOf-Methode bereitgestellt, um den Prototyp gezielt zu ändern .
• Verwenden Sie constructor.call/apply(obj, ...) um Attribute zu obj hinzuzufügen und
• obj

__proto__和prototype zurückzugeben. Für ein vollständiges Verständnis können Sie sich JavaScript ansehen Prototypen und Prototypenketten.
call/apply können Sie sich das JavaScript-Tutorial zu call und apply ansehen.

Nachdem wir diese gelernt haben, können wir die erste Version des Codes schreiben:

function createObject(Con) {.
    //Neues Objekt erstellen obj
    // var obj = {}; kann auch sein var obj = Object.create(null);

    // Obj.__proto__ -> Konstruktor-Prototyp konvertieren // (nicht empfohlen) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Führe den Konstruktor aus Con.apply(obj, [].slice.call(arguments, 1));

    // Ein neues Objekt zurückgeben return obj;}

Rückgabewerteffekt

Wie wir alle wissen, haben Funktionen Rückgabewerte. Wenn der Konstruktor also einen Rückgabewert hat, welches Ergebnis wird nach der endgültigen Ausführung von new zurückgegeben?

Der Rückgabewert ist ein Basistyp.

Unter der Annahme, dass der Konstruktorrückgabewert ein Basistyp ist, werfen wir einen Blick auf das endgültige Rückgabeergebnis:

function Thin_User(name, age) {
    this.name = Name;
    this.age = Alter;
    Rückkehr „Ich werde für immer dünn bleiben“;
}

Thin_User.prototype.eatToMuch = function () {
    console.log('Ich esse so viel, aber ich bin sehr dünn!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // true
// Ich esse so viel, aber ich bin sehr dünn!!!
xiaobao.eatToMuch();

Das endgültige Rückgabeergebnis scheint keinen Störungen zu unterliegen. Verarbeitet der Konstruktor den Rückgabewert nicht?

Machen Sie sich keine Sorgen, testen wir weiterhin die Situation, in der der Rückgabewert ein Objekt ist.

Der Rückgabewert ist die Objektfunktion

Thin_User(name, age) {
    this.name = Name;
    this.age = Alter;
    zurückkehren {
        Name: Name,
        Alter: Alter * 10,
        fett: stimmt
    }
}

Thin_User.prototype.eatToMuch = function () {
    // Tagträumen und dicke Tränen hinterlassen console.log('Ich esse so viel, aber ich bin sehr dünn!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Fehler: xiaobao.eatToMuch ist keine Funktion
xiaobao.eatToMuch();

Als ich eatToMuch ausführte, meldete die Konsole direkt einen Fehler und es gab keine aktuelle Funktion, also habe ich das xiaobao -Objekt gedruckt:

Es wurde festgestellt, dass sich age des xiaobao Objekts geändert hat und fat hinzugefügt wurde, das genau dem Rückgabewert des Konstruktors entspricht.

Nachdem Sie diese beiden Beispiele gelesen haben, können Sie grundsätzlich die Situation klären, in der der Konstruktor einen Wert zurückgibt: Wenn der Konstruktor ein Objekt zurückgibt, wird das Objekt direkt zurückgegeben.

Endgültige Simulationsfunktion

createObject(Con) {
    //Neues Objekt erstellen obj
    // var obj = {}; kann auch sein var obj = Object.create(null);

    // Obj.__proto__ -> Konstruktor-Prototyp konvertieren // (nicht empfohlen) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //Führe den Konstruktor aus und akzeptiere den Rückgabewert des Konstruktors const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // Wenn der Rückgabewert des Konstruktors ein Objekt ist, geben Sie das Objekt direkt zurück. // Andernfalls geben Sie obj zurück
    return typeof(ret) === 'object' ? ret: obj;}