Heben in JavaScript verstehen: Ein umfassender Leitfaden

Heben in JavaScript

Heben ist ein Verhalten, bei dem Variablen- und Funktionsdeklarationen an den Anfang ihres enthaltenden Bereichs (entweder des globalen Bereichs oder des Funktionsbereichs) davor verschoben (oder „angehoben“) werden Der Code wird ausgeführt. Das bedeutet, dass Sie Variablen und Funktionen verwenden können, bevor sie tatsächlich im Code deklariert werden.

Heben in Variablen

var

• Mit var deklarierte Variablen werden an die Spitze ihres Gültigkeitsbereichs gehoben, ihre Werte werden jedoch erst an der Stelle im Code initialisiert, an der die Zuweisung erfolgt.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

let und const

• Mit let und const deklarierte Variablen werden ebenfalls angehoben, befinden sich jedoch in einer „zeitlichen Totzone“, bis ihre Deklarationen erreicht werden. Der Zugriff auf sie vor ihrer Deklaration führt zu einem ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Heben in Funktionen

Traditionelle Funktion

• Funktionsdeklarationen werden vollständig angehoben, was bedeutet, dass sowohl die Deklaration als auch der Funktionskörper an den oberen Rand des Gültigkeitsbereichs verschoben werden. Dadurch können Sie eine Funktion aufrufen, bevor sie im Code deklariert wird.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Im Gegensatz dazu werden Funktionsausdrücke (bei denen eine Funktion einer Variablen zugewiesen wird) nur als Variablen gehisst, sodass ein Aufruf vor der Initialisierung der Variablen zu undefiniert oder einem TypeError führt.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Pfeilfunktion

• Im Gegensatz dazu werden Funktionsausdrücke (bei denen eine Funktion einer Variablen zugewiesen wird) nur als Variablen gehisst, sodass ein Aufruf vor der Initialisierung der Variablen zu undefiniert oder einem TypeError führt.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Temporale Totzone (TDZ)

Die temporale Totzone (TDZ) besteht für Variablen, die mit let und const deklariert wurden, da JavaScript so konzipiert ist, dass Sie nicht auf diese Variablen zugreifen, bevor sie deklariert und initialisiert werden.

Warum verhalten sich var und let, const beim Heben unterschiedlich?

• Das liegt an der historischen Entwicklung von JavaScript.
• JavaScript wurde ursprünglich für Benutzer entwickelt, die keine Entwickler sind, und die Hauptverwendung von JavaScript bestand darin, der Webseite kleine interaktive Elemente hinzuzufügen.
• Var unterstützt also nur den Funktionsumfang. Auch damals gab es keinen Blockumfang.
• Aber in der späteren Entwicklung von JavaScript wurde es komplizierter, mit var zu arbeiten und Fehler zu beheben.
• Um JavaScript mit anderen modernen Sprachen konkurrenzfähig zu machen, wurden weitere Funktionen wie let, const, Pfeilfunktionen, ES6-Methoden usw. hinzugefügt.

Warum var nicht wie let und const aktualisiert wird

• Das liegt an der Abwärtskompatibilität.
• Zu dieser Zeit wurde JavaScript von vielen Unternehmen weit verbreitet verwendet, sodass Aktualisierungen oder Änderungen an vorhandenen Funktionen dazu führten, dass die Codebasis beschädigt wurde.
• Daher wurden moderne Features individuell hinzugefügt.

Häufige Fragen im Vorstellungsgespräch

• Was ist Hochziehen in JavaScript?
• Was wird in JavaScript gehisst und was nicht?
• Was ist der Unterschied zwischen var, let und const in Bezug auf das Heben?
• Was ist die zeitliche Totzone (TDZ) in JavaScript?
• Können Sie das Heben mit Funktionsdeklarationen im Vergleich zu Funktionsausdrücken erklären?
• Was ist Heben in ES6-Modulen?
• Warum sollten wir uns nicht auf das Heben in realem Code verlassen?

Zusammenfassung

• Hoisting ist das Standardverhalten in JavaScript, bei dem Variablen- und Funktionsdeklarationen während der Kompilierungsphase an den Anfang ihrer jeweiligen Bereiche verschoben werden.
• Das Hochziehen funktioniert nur für Variablen, die mit var und herkömmlichen Funktionen deklariert wurden, nicht für let-, const- und Pfeilfunktionen.
• Nur ​​die Funktionsdeklaration wird angehoben, sodass herkömmliche Funktionen funktionieren. Wenn die Funktion jedoch einer Variablen zugewiesen wird, kann sie erst aufgerufen werden, wenn sie definiert ist.
• Der Grund, warum var- und traditionelle Funktionen hochgezogen werden, let-, const- und Pfeilfunktionen jedoch nicht, liegt darin, dass JavaScript in der Anfangsphase hauptsächlich für kleine UI-Interaktionen verwendet wurde.
• Aber später, als JavaScript in großem Umfang von Unternehmen zum Erstellen von Anwendungen verwendet wurde, wurde es schwieriger, Fehler nur mit globalem Geltungsbereich zu beheben.
• Daher wurden in zukünftigen Updates weitere Sicherheitsbedenken berücksichtigt.
• Außerdem hätte die Aktualisierung bestehender Funktionen zu einer Beschädigung der Codebasis geführt, sodass neue Funktionen separat hinzugefügt wurden.

Das obige ist der detaillierte Inhalt vonHeben in JavaScript verstehen: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!