Hoisting ist ein Verhaltenskonzept von JavaScript. Hoisting (sprich Verschieben) ist ein Konzept, das erklärt, wie und wo Variablen deklariert werden sollten.
In JavaScript kann eine Variable deklariert werden, nachdem sie verwendet wurde, da Funktionsdeklarationen und Variablendeklarationen vom JavaScript-Interpreter immer unsichtbar an den Anfang des sie enthaltenden Bereichs verschoben werden.
In den meisten Fällen gibt es zwei Arten von Hebezeugen.
1.Variable Erklärung Heben
Lassen Sie uns dies anhand dieses Codes verstehen.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Hier wird die Deklaration der Variable a vom Javascript-Interpreter zum Zeitpunkt der Kompilierung unsichtbar nach oben verlagert. So waren wir in der Lage, den Wert von a zu erhalten. Aber dieser Ansatz der Deklaration von Variablen wird nicht empfohlen, da wir Variablen bereits wie diese nach oben deklarieren sollten.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
Betrachten Sie ein anderes Beispiel.
function foo() {
console.log(x)
var x = 1;
}
wird eigentlich so interpretiert:
function foo() {
var x;
console.log(x)
x = 1;
}
In diesem Fall wird x undefiniert sein
Es spielt keine Rolle, ob der Code ausgeführt wurde, der die Deklaration der Variablen enthält. Betrachten Sie dieses Beispiel.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
Diese Funktion sieht folgendermaßen aus.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
Bei der Variablendeklaration wird nur die Variablendefinition angehoben, nicht die Zuweisung.
- Funktionserklärung Heben
Im Gegensatz zum Variablenhub wird der Funktionsrumpf oder der zugewiesene Wert ebenfalls gehievt. Betrachten Sie diesen Code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Da wir nun sowohl das Hochziehen von Variablen als auch das Hochziehen von Funktionen verstanden haben, wollen wir nun diesen Code verstehen.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Dieser Code wird folgendermaßen aussehen.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
Die Funktion a() hat einen lokalen Geltungsbereich innerhalb von b(). a() wird bei der Interpretation des Codes mit seiner Definition nach oben verschoben (nur im Fall von Funktions-Hoisting), so dass a jetzt einen lokalen Geltungsbereich hat und daher den globalen Geltungsbereich von a nicht beeinflusst, während es seinen eigenen Geltungsbereich innerhalb der Funktion b() hat.
