Heim > Web-Frontend > js-Tutorial > Zielfernrohre und Hebevorgänge in JavaScript – umfassend erklärt

Zielfernrohre und Hebevorgänge in JavaScript – umfassend erklärt

Barbara Streisand
Freigeben: 2024-09-27 22:42:03
Original
978 Leute haben es durchsucht

Scopes and Hoisting in JavaScript - Comprehensively Explained

Bereiche in JavaScript

Bereich bedeutet in JavaScript den Bereich in Ihrem Code, in dem bestimmte Variablen oder Funktionen verwendet oder angezeigt werden können. Es definiert, wo Sie Zugriff auf bestimmte Werte oder Aktionen haben. In JavaScript gibt es hauptsächlich zwei Arten von Bereichen:

  1. Globaler Geltungsbereich

  2. Lokaler Geltungsbereich (Funktions- und Blockumfang)

Globaler Geltungsbereich

Wenn eine Variable außerhalb einer Funktion oder eines Blocks deklariert wird, wird sie Teil des globalen Gültigkeitsbereichs. Es kann von überall im Code darauf zugegriffen werden.

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global
Nach dem Login kopieren

In diesem Beispiel wird globalVar außerhalb einer Funktion deklariert, was es zu einer globalen Variablen macht. Dies bedeutet, dass überall im Code darauf zugegriffen werden kann, sowohl innerhalb als auch außerhalb von Funktionen. Wenn die Funktion printGlobalVar() aufgerufen wird, protokolliert sie den Wert von globalVar, da die Funktion auf den globalen Bereich zugreifen kann. Wenn wir danach globalVar direkt außerhalb der Funktion protokollieren, wird immer noch derselbe Wert ausgegeben, da er im gesamten Programm als globale Variable verfügbar ist. Im Wesentlichen ermöglicht der globale Gültigkeitsbereich, dass diese Variable überall im Code verwendet und darauf zugegriffen werden kann.

Lokaler Bereich (Funktions- und Blockbereich)

In Funktionen oder Blöcken definierte Variablen (wie Schleifen oder if-Anweisungen) sind auf diese Funktion oder diesen Block beschränkt. Sie sind von außerhalb dieses Bereichs nicht zugänglich.

Funktionsbereich: Innerhalb einer Funktion deklarierte Variablen sind nur innerhalb dieser Funktion zugänglich.

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined
Nach dem Login kopieren

Blockbereich: Der mit let und const eingeführte Blockbereich gilt für Variablen, die innerhalb eines Blocks ({}) deklariert wurden, wie Schleifen, Bedingungen und Try-Catch-Blöcke. Auf diese Variablen kann nur innerhalb dieses Blocks zugegriffen werden.

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined
Nach dem Login kopieren

Im Gegensatz dazu sind mit var deklarierte Variablen funktionsbezogen, was bedeutet, dass sie an die Spitze der Funktion oder global gehoben werden, selbst wenn sie innerhalb eines Blocks deklariert werden.

Heben in JavaScript

Hoisting ist das Standardverhalten von JavaScript, bei dem Deklarationen während der Kompilierungsphase an den Anfang ihres enthaltenden Bereichs verschoben werden. Das bedeutet, dass Variablen und Funktionsdeklarationen verarbeitet werden, bevor Code ausgeführt wird.

Heben von Variablen

Bei Variablendeklarationen mit var wird die Variable gehisst, ihre Initialisierung jedoch nicht. Dies führt zu dem berüchtigten „undefinierten“ Verhalten, wenn Sie versuchen, auf eine Variable zuzugreifen, bevor sie initialisiert ist.

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello
Nach dem Login kopieren

Hinter den Kulissen macht die JavaScript-Engine Folgendes:

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello
Nach dem Login kopieren

In diesem Beispiel hebt JavaScript die var myVar-Deklaration nach oben, sodass sich der Code so verhält, als ob er oben geschrieben wäre. Das erste console.log gibt undefiniert aus, da die Variable deklariert (gehisst), aber noch kein Wert zugewiesen ist. Nach der Zuweisung gibt das zweite console.log 5 aus. Dies zeigt, wie das Hochziehen mit var funktioniert – die Deklaration wird hochgezogen, der Wert wird jedoch später zugewiesen.

Für let und const werden sie beim Hochziehen der Deklaration nicht initialisiert, bis der Code diese Zeile erreicht, und der Versuch, vor der Deklaration auf sie zuzugreifen, führt zu einem ReferenceError.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";
Nach dem Login kopieren

Heben von Funktionen

Funktionsdeklarationen sind vollständig hochgezogen, was bedeutet, dass Sie eine Funktion vor ihrer Deklaration aufrufen können.

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}
Nach dem Login kopieren

Die Funktion wird nach oben verschoben, sodass sie vor der Deklaration aufgerufen werden kann.

Allerdings werden Funktionsausdrücke, die var, let oder const verwenden, nicht auf die gleiche Weise wie Funktionsdeklarationen angehoben. Sie verhalten sich hinsichtlich des Hebens wie reguläre Variablen, was bedeutet, dass die Funktion erst nach der Zuweisung verfügbar ist.

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};
Nach dem Login kopieren

Im obigen Beispiel wird „greet“ als var-Variable gehisst, ist jedoch zunächst undefiniert. Daher führt der Versuch, es vor der Zuweisung aufzurufen, zu einem Fehler.

Umfang und Heben in der Praxis

  • Globaler GültigkeitsbereichVariablen sind im gesamten Skript zugänglich.

  • Lokaler Gültigkeitsbereich Variablen sind auf den Block oder die Funktion beschränkt, in dem sie deklariert werden.

  • Hoisting ermöglicht Ihnen die Verwendung von Funktionen und Variablen vor ihrer Deklaration, jedoch mit Einschränkungen für let-, const- und Funktionsausdrücke.

Diese Konzepte sind grundlegend für das Verständnis, wie sich Variablen und Funktionen in JavaScript verhalten, und ihre Beherrschung ist für das Schreiben von klarem und fehlerfreiem Code unerlässlich.

Das obige ist der detaillierte Inhalt vonZielfernrohre und Hebevorgänge in JavaScript – umfassend erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage