Verstehen, wie das Heben in JavaScript funktioniert

Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Hoisting ist ein JavaScript-Mechanismus, mit dem Sie auf Variablen und Funktionen zugreifen können, bevor Sie sie initialisieren. Das Heben einer solchen Erklärung bringt sie effektiv an die Spitze ihres Geltungsbereichs.

Erfahren Sie alles darüber, wie das Heben in JavaScript funktioniert und wie Sie es am besten verwalten, um Fehler in Ihrem Code zu vermeiden.

Heben von Variablen Mit var, let und const

Das Heben ist möglich, weil JavaScript das JIT-Kompilierungssystem (Just-in-Time) verwendet, das Ihren Code scannt, um alle Variablen in ihren jeweiligen Bereichen zu identifizieren.

Der JIT-Compiler hebt dann alle Instanzen von Variablendeklarationen bei der Kompilierung an die Spitze ihres Geltungsbereichs. JavaScript hisst nur Deklarationen von Variablen, nicht ihre Initialisierungen.

Das Verhalten von Variablen, wenn sie gehisst werden, hängt von dem Schlüsselwort ab, mit dem Sie sie deklarieren, da sich jedes Schlüsselwort anders verhält.

Var

Zugriff auf eine nicht initialisierte Variable, die mit deklariert ist Var Schlüsselwort wird zurückgegeben nicht definiert. Zum Beispiel:

Konsole.log (foo); // nicht definiert
Var foo = 2;

Die obigen Codeprotokolle nicht definiert weil es ruft Konsole.log bevor es die Variable initialisiert.

Der JavaScript-Compiler sieht den vorherigen Codeblock wie folgt:

Var foo;
Konsole.log (foo); // nicht definiert
foo = 2;

Während des Hebens gehorchen Variablen der Regeln des JavaScript-Bereichs. Javascript hebt eine Variable nur an die Spitze des Bereichs, in dem Sie sie deklariert haben. Der Versuch, den Wert einer Variablen außerhalb ihres deklarierten Geltungsbereichs zu protokollieren, führt zu a Referenzfehler. Wenn Sie beispielsweise eine Variable innerhalb einer Funktion deklarieren, ist sie außerhalb dieses Bereichs nicht sichtbar:

FunktionmeineFunktion() {
Konsole.log (foo); // nicht definiert
Var foo = 10;
}
meineFunktion();
Konsole.log (foo); // ReferenceError: foo ist nicht definiert

Der Versuch, auf eine Variable außerhalb ihres Gültigkeitsbereichs zuzugreifen, führt zu a Referenzfehler.

let und const

Entsprechend der MDN Dokumentation auf lassen Und konst Heben, JavaScript hebt auch Variablen, die mit deklariert sind lassen Und konst Schlüsselwörter. Im Gegensatz zu Variablen, die mit deklariert wurden Var Schlüsselwort, sie werden nicht mit einem initialisiert nicht definiert Wert.

Zum Beispiel:

FunktionmeineFunktion() {
Konsole.log (foo); // nicht definiert
Konsole.log (Balken); // ReferenceError: Zugriff auf 'bar' vor der Initialisierung nicht möglich
Konsole.log (baz); // ReferenceError: Zugriff auf 'baz' vor der Initialisierung nicht möglich
Var foo = 5;
lassen Balken = 10;
konst baz = 15;
}
meineFunktion();

Sie können nicht auf Variablen zugreifen, die mit den Schlüsselwörtern let und const deklariert wurden, bevor Sie sie mit einem Wert initialisiert haben.

Hebefunktionen

JavaScript-Hebezeuge funktionieren ähnlich wie Variablen. Wie bei Variablen hängt es davon ab, wie Sie sie deklarieren. Zum Beispiel hebt JavaScript Funktionsdeklarationen anders als Funktionsausdrücke auf.

Eine Funktionsdeklaration ist eine mit einem Namen deklarierte Funktion, während ein Funktionsausdruck eine Funktion ist, deren Name weggelassen werden kann. Zum Beispiel:

Funktionfoo() {
// Funktionsdeklaration
}
konst bar = () => {
// Funktionsausdruck
}

JavaScript enthält Funktionsdeklarationen, aber keine Funktionsausdrücke. Zum Beispiel:

foo(); // 5
Bar(); // TypeError: bar() ist keine Funktion
// Funktionsdeklaration
Funktionfoo() {
Konsole.Protokoll(5);
}
// Funktionsausdruck
Var Balken = FunktionAusdruck() {
Konsole.Protokoll(10);
};

Dieser Code ruft foo bevor es als Funktion deklariert und initialisiert wird, aber es protokolliert immer noch 5 zur Konsole. Versuche aber anzurufen Bar ergibt ein TypeError.

Heben verwalten

Wenn Sie sich des Hebens und der potenziellen Fehler bewusst sind, die bei falscher Handhabung auftreten können, können Sie sich viele Stunden der Fehlersuche ersparen. Hier sind einige Möglichkeiten, wie Sie das Heben handhaben können.

Deklarieren Sie Variablen innerhalb von Funktionen

Deklarieren Sie Variablen innerhalb der Funktionen, die auf sie zugreifen. Dies ist nicht immer möglich, da Sie möglicherweise eine globale Variable benötigen, auf die Sie in mehreren Funktionen zugreifen können. Stellen Sie also sicher, dass Sie Variablen nur dann global deklarieren, wenn dies wirklich erforderlich ist.

Deklarieren Sie Variablen mit let oder const

Sie sollten immer das l verwendenet und Const Schlüsselwörter anstelle von Var Schlüsselwort beim Deklarieren von Variablen. Diese Vorgehensweise ist vorteilhaft, wenn lokale Variablen innerhalb einer Funktion deklariert werden. Die richtigen Wege kennen Deklarieren Sie Variablen in JavaScript verringert die Wahrscheinlichkeit von Fehlern, die durch Heben in Ihrem Code verursacht werden.

Deklarieren Sie Variablen am oberen Rand ihres Geltungsbereichs

Deklarieren Sie alle Ihre Variablen am Anfang ihrer jeweiligen Gültigkeitsbereiche, vor allen anderen Anweisungen. Dadurch wird sichergestellt, dass der JavaScript-Compiler diese Variablen nicht hochziehen muss, um auf sie zuzugreifen.

Verwenden des strengen Modus

Der strikte Modus ist ein JavaScript-Modus die schlechte Syntax reguliert, die Laufzeit Ihres Codes optimiert und den Missbrauch der locker typisierten JavaScript-Syntax durch Fehler bei der Kompilierung verhindert.

Beispielsweise können Sie im „schlampigen Modus“ aufgrund von Heben auf eine Variable außerhalb der initialisierten Funktion zugreifen, obwohl sie nicht deklariert wurde:

meineFunktion();
Konsole.log (foo); // 20
FunktionmeineFunktion() {
 foo = 20; 
}

Im obigen Codeblock deklariert JavaScript automatisch foo und hebt es an die Spitze des globalen Geltungsbereichs, wobei der Geltungsbereich ignoriert wird, in dem Sie es initialisiert haben.

Sie können den strikten Modus verwenden, um dieses Verhalten zu beheben und einen Fehler auszugeben, wenn Sie versuchen, auf die Variable außerhalb ihres Funktionsbereichs zuzugreifen.

Der strenge Modus stoppt das Heben nicht vollständig. Stattdessen verhindert es die verwirrendsten und fehleranfälligsten Formen des Hebens. Es ist immer noch wichtig, das allgemeine Konzept und die Regeln hinter dem Heben zu verstehen, selbst wenn das Sicherheitsnetz im strengen Modus verwendet wird.

Um den strikten Modus auf globaler Ebene zu aktivieren, deklarieren Sie die Syntax am Anfang Ihrer Skriptdatei:

"verwendenstrikt"; // oder 'verwendenstrikt'

Um den strikten Modus auf Funktionsebene zu aktivieren, deklarieren Sie die Syntax am Anfang eines Funktionshauptteils vor allen Anweisungen:

FunktionmyStrictFunction() {
 "verwendenstrikt";
}

Wenn Sie den strikten Modus auf Funktionsebene deklarieren, gilt die Einstellung nur für Anweisungen innerhalb dieser Funktion.

Das Deklarieren des strikten Modus auf globaler Ebene verhindert, dass auf Variablen außerhalb ihrer jeweiligen Gültigkeitsbereiche zugegriffen wird:

"verwendenstrikt";
meineFunktion();
Konsole.log (foo); // ReferenceError: foo ist nicht definiert
FunktionmeineFunktion() {
 foo = 20; 
}

Wenn der strikte Modus aktiviert ist, wird der JavaScript-Compiler gehisst meineFunktion() ohne die nicht deklarierte Variable an den Anfang seines Gültigkeitsbereichs.

Verstehen Sie, was das Heben beeinflusst

Hoisting ist ziemlich einzigartig in JavaScript und kann ein sehr verwirrendes Verhalten sein, um Ihren Kopf herumzureißen. Es kann sich auf Variablen und Funktionen auswirken, aber es gibt Möglichkeiten, es zu verhindern, wenn Sie es müssen.

Mehrere Faktoren können das Heben beeinflussen, daher ist es am besten, jegliches Auftreten von Variablen- oder Funktionsheben in Ihrem Code zu vermeiden.