JavaScript ist eine Sprache, deren Verhalten Neulinge oft verwirren kann. Ein solches Verhalten ist Hoisting, ein Konzept, das jeder JavaScript-Entwickler verstehen sollte, um vorhersehbareren Code zu schreiben. In diesem Artikel erfahren Sie, was Heben ist, wie es mit Variablen und Funktionen funktioniert und wie Sie die damit verbundenen Fallstricke vermeiden können.
Was ist Heben?
Hoisting bezieht sich auf das Standardverhalten von JavaScript, Deklarationen (jedoch keine Initialisierungen) an den oberen Rand ihres Gültigkeitsbereichs zu verschieben. Dies geschieht während der Kompilierungsphase, bevor der Code ausgeführt wird. Das bedeutet, dass Sie Variablen und Funktionen verwenden können, bevor sie tatsächlich in Ihrem Code deklariert werden.
Beispiel:
console.log(myVar); // undefined
var myVar = 5;
Nach dem Login kopieren
In diesem Beispiel erwarten Sie möglicherweise einen ReferenceError, da myVar verwendet wird, bevor es deklariert wird. Aufgrund des Hochziehens wird jedoch tatsächlich die Deklarationsvariable myVar an die Spitze ihres Gültigkeitsbereichs verschoben, während die Zuweisung (myVar = 5) bestehen bleibt. Intern interpretiert JavaScript es als:
var myVar;
console.log(myVar); // undefined
myVar = 5;
Nach dem Login kopieren
Aus diesem Grund ist myVar definiert, aber noch nicht zugewiesen, wenn console.log ausgeführt wird, weshalb es undefiniert ausgibt.
Heben und Variablen
Lassen Sie uns zusammenfassen, wie das Hochziehen mit verschiedenen Arten von Variablen funktioniert: var, let und const.
1. var Heben
Mit var werden sowohl die Deklaration als auch die Variable angehoben. Allerdings wird nur die Deklaration verschoben, nicht die Zuordnung.
console.log(a); // undefined
var a = 10;
Nach dem Login kopieren
Die Deklaration var a wird angehoben, aber die Zuweisung erfolgt später, sodass a bei der Protokollierung undefiniert ist.
2. let und const Heben
Mit let und const deklarierte Variablen werden ebenfalls angehoben, aber nicht wie var auf undefiniert initialisiert. Stattdessen betreten sie die Temporal Dead Zone (TDZ) vom Beginn ihres Wirkungsbereichs bis zum Auftreffen auf die Deklaration.
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
Nach dem Login kopieren
Hier wird b angehoben, ist aber erst verfügbar, wenn die eigentliche Deklarationszeile ausgeführt wird, was zu einem ReferenceError führt.
Das gleiche Verhalten gilt für const, mit der zusätzlichen Regel, dass const-Variablen zum Zeitpunkt der Deklaration initialisiert werden müssen.
Heben und Funktionen
Funktionsdeklarationen werden vollständig angehoben, was bedeutet, dass sowohl der Funktionsname als auch der Hauptteil an den oberen Rand des Gültigkeitsbereichs verschoben werden. Dadurch können Sie Funktionen aufrufen, bevor sie deklariert werden.
Beispiel für eine Funktionsdeklaration:
greet(); // "Hello, World!"
function greet() {
console.log("Hello, World!");
}
Nach dem Login kopieren
Hier ist das Greet der Funktionsdeklaration vollständig hochgezogen, sodass die Funktion aufgerufen werden kann, noch bevor der Code seine Definition erreicht.
Funktionsausdrücke und Heben
Funktionsausdrücke werden jedoch nicht auf die gleiche Weise angehoben. Da sie als Zuweisungen behandelt werden, wird nur die Variablendeklaration hochgehoben – nicht die Funktionsdefinition.
greet(); // TypeError: greet is not a function
var greet = function() {
console.log("Hello, World!");
};
Nach dem Login kopieren
In diesem Fall wird die Variable „greet“ gehisst, sie wird jedoch während des Hebevorgangs undefiniert zugewiesen. Aus diesem Grund löst der Aufruf von „greet()“ vor der Zuweisung einen TypeError aus.
Vermeidung von Fallstricken beim Heben
Um Verwirrung durch das Heben zu vermeiden, befolgen Sie diese Best Practices:
Variablen am Anfang ihres Gültigkeitsbereichs deklarieren – Obwohl durch das Hochziehen Deklarationen an den Anfang verschoben werden, empfiehlt es sich, sie am Anfang ihres jeweiligen Gültigkeitsbereichs zu deklarieren. Dadurch wird Ihr Code lesbarer und vorhersehbarer.
Verwenden Sie let und const anstelle von var – Mit let und const deklarierte Variablen haben einen Blockbereich, wodurch das Hebeverhalten klarer und weniger fehleranfällig wird. Es verringert auch die Wahrscheinlichkeit, versehentlich auf Variablen vor ihrer Initialisierung zu verweisen.
Funktionsdeklarationen organisieren – Deklarieren Sie Ihre Funktionen, bevor Sie sie verwenden, um zu vermeiden, dass Sie sich auf das Hebeverhalten verlassen.
Fazit
Das Hochziehen ist eine der vielen Eigenheiten von JavaScript, aber wenn Sie verstehen, wie es funktioniert, können Sie saubereren und weniger fehleranfälligen Code schreiben. Denken Sie daran, dass sich sowohl Funktionsdeklarationen als auch Variablen beim Hochziehen unterschiedlich verhalten. Bleiben Sie bei let und const über var und halten Sie Ihren Code gut organisiert, um Überraschungen zu vermeiden.
Indem Sie auf das Heben achten, können Sie Ihren JavaScript-Code vorhersehbarer und einfacher zu warten machen.
Das obige ist der detaillierte Inhalt vonJavaScript-Hebung erklärt, um Ihre Programmierfähigkeiten zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
