Hallo ,

In diesem Artikel werden wir versuchen, die Konzepte des Hebens und der zeitlichen Totzone in JavaScript zu erklären.

Hoisting ist ein in Javascript häufig verwendeter Begriff, der sich auf den Prozess bezieht, bei dem die Deklaration von Funktionen , Variablen oder Klassen vor der Ausführung des Codes an den Anfang ihres Geltungsbereichs verschoben zu werden scheint.

Entgegen der landläufigen Meinung ist der Begriff Heben kein in der ECMAScript-Spezifikation normativ definierter Begriff.

Betrachten Sie beispielsweise den folgenden Code:

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

Aufgrund von hoisting verschiebt die JavaScript-Engine jedoch die Deklaration von barund fooan den Anfang des globalen Gültigkeitsbereichs , sodass es effektiv so aussieht:

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

Lassen Sie uns nun über den Unterschied zwischen den Schlüsselwörtern var, let, und sprechen constund wie sie sich auf das Heben beziehen.

Var

Das varSchlüsselwort ist die erste Möglichkeit, Variablen in JavaScript zu deklarieren. Es unterliegt hoisting , was bedeutet, dass die Deklaration einer Variablen zur Laufzeit varautomatisch an den Anfang ihres jeweiligen Gültigkeitsbereichs (global oder Funktion) verschoben wird:

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

Die Schlüsselwörter letund constwurden in der Version ECMAScript 2015 (ES6) von JavaScript eingeführt, um blockbezogene Variablen und Konstanten zu deklarieren.

Entgegen der landläufigen Meinung werden auch die Schlüsselwörter letund gehisst .const

Betrachten Sie beispielsweise die folgenden Codebeispiele:

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

Deklarationen, die mit denlet Schlüsselwörtern und gemacht const werden, unterliegen ebenfalls dem Heben (dh sie werden an die Spitze ihres jeweiligen Gültigkeitsbereichs (global oder block) verschoben) , befinden sich aber angeblich in einer zeitlichen Totzone (TDZ) , was bedeutet, dass jeder Versuch, auf sie zuzugreifen, dies tun wird führt zu einem Referenzfehler .

Betrachten Sie die folgenden Beispiele:

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

Versuchen Sie als Übung, die Variablendeklaration im ifBlock zu entfernen. Können Sie jetzt auf die global gültige barVariable zugreifen?

Abschließend können Sie bei Ihrem nächsten Vorstellungsgespräch, wenn Ihnen die Frage gestellt wird: „Werden let und const gehisst?“, Folgendes sagen:

Deklarationen, die mit den Schlüsselwörtern letund gemacht wurden const, werden effektiv gehisst, aber mit der Einschränkung der zeitlichen Totzone (dh die JavaScript-Engine kennt die Variablen, aber sie können nicht verwendet werden, bis sie deklariert wurden). Darüber hinaus unterliegen Klassen der gleichen Form des Hebens wie letund const.