Was ist `this`? Eine kleine Cartoon-Erklärung für JavaScript

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht's zum Originaltext.

Jedes Mal, wenn ich auf das Schlüsselwort this in JavaScript gestoßen bin, fand ich es wirklich verwirrend. Also beschloss ich, das Konzept des Aufrufkontexts während meiner Ausbildung bei Peerigon endlich zu meistern. Und wie sich herausstellte, war this einen zweiten Blick wert. Und einen dritten. Und so weiter.

Bildunterschrift: "Hey JS... Was ist this?"

Wenn etwas schwer zu verstehen ist, ist es wahrscheinlich eine gute Idee, einen Schritt zurückzutreten, tief durchzuatmen und ganz von vorne zu beginnen. Um die Bedeutung von JavaScripts this zu verstehen, lohnt es sich, einen kurzen Blick darauf zu werfen, was passiert, wenn JavaScript ausgeführt wird.

JavaScript ist eine Sprache, die Anweisung für Anweisung von oben nach unten ausgeführt wird. Wann immer der Computer auf einen Funktionsaufruf stößt, findet er den Funktionscode, führt ihn aus und gibt den Funktionswert direkt an die Stelle zurück, an der die Funktion aufgerufen wurde. Um diese Sprünge durchführen zu können, muss sich der Computer den Aufrufkontext merken.

Bildunterschrift: Wenn die Funktion etwas zurückgibt, gibt der Computer ihren Wert an den Punkt zurück, an dem die Funktion aufgerufen wurde.

Hier kommt das Schlüsselwort this ins Spiel... Und hier wird es interessant. this ist eine Referenz auf den Aufrufkontext einer Funktion. Wenn wir innerhalb einer Funktion auf this zugreifen, greifen wir eigentlich auf den spezifischen Ausführungskontext der Funktion zu. Wir müssen also nicht die Funktion selbst betrachten, sondern wie die Funktion aufgerufen wurde. Das Problem ist, dass es verschiedene Möglichkeiten gibt, wie eine Funktion aufgerufen werden kann, und alle bieten einen anderen Kontext für this. Klingt kompliziert? Es ist ein bisschen knifflig, da es tatsächlich fünf verschiedene Arten gibt, eine Funktion aufzurufen. Wenn wir wissen, worauf wir achten müssen, werden die Dinge einfacher. Also schauen wir uns diese fünf Anwendungsfälle genauer an.

Zuerst erstellen wir eine Funktion, die this (oder ihren Kontext) zurückgibt. Dann rufen wir diese Funktion auf.

Bildunterschrift: Eine spezielle Funktion, die einfach ihren Kontext zurückgibt.

Dann rufen wir diese Funktion auf. Hier ist der erste und "normale" Anwendungsfall: Standardmäßig zeigt this auf undefined.

Nebenbemerkung: Im nicht-strikten Modus zeigt this auf das "globale Objekt". Im Browser ist das "globale Objekt" window. Dies ist ein etwas unerwartetes Verhalten, also bleiben wir vorerst beim strikten Modus.

Zweiter Fall: Wenn die Funktion als Objekteigenschaft aufgerufen wird, zeigt this auf das Objekt.

Dritter Fall: Wenn die Funktion über die Methoden .call() oder .apply() aufgerufen wird, wird der explizite Kontext (derjenige, der als Argument übergeben wird) verwendet.

• Fall: Die Methode .bind() erstellt eine neue Funktion mit einem gebundenen Kontext (sie bleibt an dem Kontext haften, der als Argument übergeben wurde)**.

• Fall: Das Schlüsselwort new erstellt immer ein neues Objekt mit eigenem Kontext.

Herzlichen Glückwunsch, du hast es so weit geschafft und die fünf Aufrufkontexte gemeistert! Dies sind die Fälle, die wir prüfen müssen, wenn wir den Wert von this in JavaScript wissen wollen. Immer noch verwirrt? Hier ist ein Überblick über die Aufrufarten und ihren spezifischen Kontext.

Bildunterschrift: Die fünf Aufrufarten und ihre spezifischen Regeln für this

Es hat mich eine Weile und viele Beispiele gekostet, um das zu verstehen. Noch länger hat es gedauert, bis ich Johannes' Aufrufkontext-Rätsel lösen konnte. Für diejenigen unter euch, die von this einfach nicht genug bekommen können: Warum testest du nicht dein JavaScript-Wissen und findest heraus, was der Wert von x ist?

Bis nächste Woche! Danke für deine coolen Lektionen, Johannes Ewald. :)

Judith begann 2018 eine Ausbildung bei Peerigon, um professionelle Webentwicklerin zu werden. Im Rahmen ihrer wöchentlichen Routine veröffentlicht sie jede Woche einen Blogbeitrag darüber, was sie getan hat und was sie gelernt hat.