Der Unterschied zwischen Scope und Kontext in JavaScript-Funktionen

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

JavaScripts Funktions-Scope und -Kontext können sehr flexibel und leistungsstark sein — aber auch ziemlich verwirrend, gerade für Einsteiger:innen. Besonders für Einsteiger:innen. In diesem Blogpost gebe ich einen ersten Überblick und erkläre die grundlegende Funktionsweise beider Konzepte. Wichtig dabei: Scope und Context sind nicht das gleiche.

Der Scope bestimmt, auf welche Variablen und anderen Ressourcen (z. B. Funktionen oder Objekte) im Code zugegriffen werden kann. In JavaScript gibt es grundsätzlich zwei Typen von Scopes: den lokalen und den globalen Scope. Lokale Variablen werden innerhalb einer Funktion deklariert und können auch nur innerhalb dieser Funktion verwendet werden. Globale Variablen hingegen werden auf oberster Ebene definiert (also außerhalb jeglicher Funktionen) und sind dadurch für alle Funktionen einer Seite zugänglich.

Wird eine Funktion aufgerufen, erzeugt sie jedes Mal einen neuen Scope. Während globale Variablen so lange existieren, wie die Anwendung lebt, werden lokale Variablen beim Funktionsstart erstellt und verschwinden wieder, sobald keine Zeile Code mehr darauf zugreift (also meist nach return).

Globaler Scope:

Lokaler Scope:

Der Context einer Funktion ist das, was über this referenziert wird. Der Wert von this hängt davon ab, wie die Funktion aufgerufen wird — und auch davon, ob sie im strict mode läuft oder nicht. Im Non-strict mode verweist this auf das globale Objekt (window), im strict mode ist this undefined.

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, dann zeigt this auf das entsprechende Objekt.

Man kann den Kontext beim Funktionsaufruf auch bewusst steuern — mit den Methoden call(), apply() und bind(). Sowohl call() als auch apply() führen die Funktion mit dem übergebenen Wert als this aus. Der Unterschied: Bei call() werden die Argumente durch Kommas getrennt übergeben, bei apply() kommen sie als Array daher.

bind() hingegen ruft die Funktion nicht sofort auf. Stattdessen wird eine neue Funktion zurückgegeben, die denselben Code enthält, aber bei jedem Aufruf einen festgelegten Context (this) verwendet — nämlich den, der als erstes Argument übergeben wurde.

So viel zur grundlegenden Funktionsweise von Scope und Context in JavaScript. Als Fazit kann man sagen:

• Scope bestimmt, wo Variablen sichtbar sind.
• Context bestimmt, was this innerhalb einer Funktion ist.

Jessica hat 2019 eine Ausbildung bei Peerigon zur Webentwicklerin begonnen. Als Teil ihrer wöchentlichen Routine veröffentlicht sie Blogposts über das, was sie in dieser Zeit lernt.