Das Schlüsselwort this in JavaScript kann ziemlich schwierig sein, wenn es nicht verstanden wird. Es ist eines dieser Dinge, die selbst erfahrene Entwickler nur schwer verstehen können, aber wenn Sie es einmal geschafft haben, können Sie viel Zeit sparen.

In diesem Artikel werden wir sehen, was es ist, wie es in verschiedenen Situationen funktioniert und welche häufigen Fehler Sie bei der Verwendung nicht machen sollten.

Dies in JavaScript verstehen

Dies bezieht sich einfach auf das Objekt, das gerade in einem Javascript-Code verwendet wird. Aber hier ist der knifflige Teil: Worauf sich dies bezieht, kann sich auch ändern, je nachdem, wo und wie Sie es in Ihrem Code verwenden. man könnte fragen: „Warum ist das so?“ Nun, das ist dynamischer Natur =, was bedeutet, dass sein Wert bestimmt wird, wenn eine Funktion aufgerufen wird, nicht wenn sie geschrieben wird.

dies in globalen und funktionalen Kontexten

Wenn Sie dies in einem globalen Kontext verwenden, bezieht es sich oft auf ein globales Objekt, was durchaus Sinn macht, oder? Wenn Sie dies also einfach in die Konsole Ihres Browsers eingeben, zeigt es auf das Fenster.

Bei Verwendung innerhalb einer Funktion verhält es sich jedoch ganz anders. Beispiel: Wenn Sie beispielsweise eine Funktion „myFunction“ aufrufen, verweist diese immer noch auf das globale Objekt, wenn Sie jedoch den strikten Modus in Javascript verwenden, wird es innerhalb dieser Funktion undefiniert.

Ja, ich weiß, es ist ziemlich verwirrend, folge einfach mit. Ich werde es besser erklären.

dies in Objekte

Wenn Sie dies innerhalb einer Methode verwenden (einer Funktion, die eine Eigenschaft eines Objekts ist), bezieht sich dies auf das Objekt, zu dem die Methode gehört.

Beispiel:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

Hier bezieht sich this.name auf myObject.name, also „Alice“.

dies in Konstruktoren und Klassen

Konstruktoren: Wenn Sie ein Objekt mithilfe einer Konstruktorfunktion oder einer Klasse erstellen, bezieht sich dies auf das neu erstellte Objekt.

Beispiel:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

Im Code bezieht sich this.name auf die Namenseigenschaft des neuen Person-Objekts.

Häufige Fehler und wie man sie vermeidet

Ein häufiger Fehler dabei ist, dass der korrekte Wert in Rückrufen oder Ereignishandlern verloren geht. Wenn Sie beispielsweise eine Methode von einem Objekt als Callback übergeben, verweist diese möglicherweise nicht mehr auf das Objekt.

Lösung: Um dies zu vermeiden, können Sie eine Pfeilfunktion oder Bindung verwenden, um sicherzustellen, dass dieses auf das richtige Objekt zeigt.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

Abschluss

Das Schlüsselwort „this“ kann nervig sein, aber Sie müssen nur beachten, dass es sich ändert, je nachdem, wie und wo Sie es nennen. Um darin besser zu werden, üben Sie es anhand zahlreicher Beispiele, und im Handumdrehen werden Sie damit zum Profi.