Unterschied zwischen var und let in JavaScript

Unterschied zwischen var und let in JavaScript

Vorwort:

var ist ein Schlüsselwort für die Variablendeklaration, das seit dem ersten Erscheinen JavaScript existiert, während let ein Schlüsselwort für die Variablendeklaration ist, das erst in ES6 auftauchte. Es gibt zweifellos einen großen Unterschied zwischen den beiden. Was sind also die konkreten Unterschiede?

1. Bereiche werden in verschiedenen Formen ausgedrückt

var ist Funktionsumfang, let ist Blockumfang

{
  var Affe = "Xun Wukong";
  let pig='Schweinekotelett-Abdeckung';    
}
console.log(monkey); //Ausgabe undefiniert
console.log(pig); //Fehler: Pig ist nicht definiert


Wie aus dem obigen Code ersichtlich ist, sind mit let deklarierte Variablen nur in dem Codeblock gültig, in dem sie sich befinden, und außerhalb des Codeblocks ungültig und nicht zugänglich, während mit var deklarierte Variablen im Funktionsbereich gültig sind, in dem sich der Codeblock befindet.

2. Der Unterschied zwischen variabler Promotion und Nicht-Promotion

Mit var deklarierte Variablen werden angehoben, mit let deklarierte Variablen werden jedoch nicht angehoben.

console.log(Affe); //undefiniert
var Affe = "Xun Wukong";

console.log(pig); //Fehler: Pig ist nicht definiert
let pig='Schweinekotelett-Abdeckung'; 


Warum wird nach derselben Logik eine mit var deklarierte Variable als undefiniert angezeigt, wenn sie vor ihrer Deklaration aufgerufen wird, während eine mit let deklarierte Variable eine Ausnahme auslöst, wenn sie vor ihrer Deklaration aufgerufen wird? Dies ist der Unterschied zwischen den beiden bei der Variablenpromotion. Mit var deklarierte Variablen haben eine Variablenpromotion, während dies bei mit let deklarierten Variablen nicht der Fall ist.

Was ist also variable Promotion? Ich werde hier keine konzeptionelle Beschreibung geben. Ich werde nur mein persönliches Verständnis davon äußern, dass der obige Code tatsächlich dem Folgenden entspricht:

var Affe;

console.log(Affe); //undefiniert
Affe = „Xun Wukong“;

console.log(pig); //Fehler: Pig ist nicht definiert
let pig='Schweinekotelett-Abdeckung'; 

Sehen Sie den Unterschied? Die mit var deklarierte Variable wird zur Definition an den Anfang des Gültigkeitsbereichs extrahiert, aber es wird kein Wert zugewiesen. Die Zuweisungsoperation befindet sich noch in Ihrem Code. Wenn Sie also die mit var deklarierte Variable aufrufen, handelt es sich um eine Variable, die deklariert, aber nicht definiert wurde. Das Ergebnis des Aufrufs ist also undefined . Dies ist die sogenannte Variablenpromotion. Für durch let definierte Variablen gibt es jedoch keine solche Variablenförderung.

3. Unterschiede bei temporären toten Zonen

Temporäre Totzone: Wenn eine Variable in einen Bereich aufgenommen wird und es im äußeren Bereich eine Variable mit demselben Namen gibt, hat dies keine Auswirkungen auf den äußeren Bereich, selbst wenn die Variable im Bereich geändert wird.

Die spezifischen Leistungen sind wie folgt:

für(var i=0;i<5;i++){
    setzeTimeout(Funktion(){
        Konsole.log(i)
    },1000)
}
für (lass i = 0; i < 5; i++) {
  setzeTimeout(Funktion(){
     Konsole.log(i)          
  },1000)  
}


Was sind die Ergebnisse der Ausführung dieser beiden Codes?

Das Ergebnis des ersten Codes ist, dass nach 1 Sekunde 5 5er nacheinander gedruckt werden. Das Ergebnis des zweiten Codes ist, dass nach 1 Sekunde 0, 1, 2, 3, 4 nacheinander gedruckt werden.

Warum besteht dieser Unterschied?

Da die Variable i im ersten Code durch das Schlüsselwort var deklariert wird, gibt es keine kritische Totzone, d. h. die Variable i, auf die Sie in setTimeout nach 1 Sekunde zugreifen, ist das i, nachdem die for-Schleife im globalen Kontext beendet ist, sodass die gedruckten Ergebnisse alle 5 sind;

Die Variable i im zweiten Code wird durch das Schlüsselwort let deklariert, wodurch eine kritische Totzone entsteht. Die Variable i in setTimeout ist der Wert von i, als Sie sie zu diesem Zeitpunkt gespeichert haben. Das i in diesem Speicherintervall wird sich nicht ändern, da es außerhalb dieselbe Variable i gibt und ihr ein anderer Wert zugewiesen ist. Es ist immer noch der zuvor gespeicherte Wert. Dies ist die Manifestation einer temporären Totzone und auch der Grund, warum der zweite Code nach der Ausführung nacheinander 0, 1, 2, 3, 4 ausgibt.

4. Im selben Kontext kann var wiederholt deklariert werden, let jedoch nicht

lass monkey='Xun Wukong';
let monkey = '逼马吻'; //Fehler: Bezeichner 'a' wurde bereits deklariert
var pig = 'Schweinekotelett-Abdeckung';
var pig = 'pig anal fissure'; //Normaler Zugriff, der Wert der Variable pig wird ersetzt

Dies ist das Ende dieses Artikels über den Unterschied zwischen var und let in JavaScript. Weitere Informationen zu var und let in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Was sind die Unterschiede zwischen var let const in JavaScript
  • Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
  • Detaillierte Erklärung der Unterschiede und Verwendung von var in JavaScript und let und const in ES6-Spezifikationen
  • Verstehen Sie den Unterschied zwischen den Schlüsselwörtern let, var und const in JavaScript
  • Detaillierte Erklärung des Unterschieds zwischen let- und var-Deklarationsvariablen in js
  • Eine kurze Analyse der Unterschiede zwischen var, let und const in JavaScript

<<:  So finden und löschen Sie doppelte Zeilen in MySQL

>>:  Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen

Artikel empfehlen

Einige Tipps zur richtigen Verwendung des HTML-Titelattributs

Wenn Sie Inhalte vor Benutzern von Telefonen, Tabl...

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT

In den vorherigen Artikeln wurden die Ersetzungsf...

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Inhaltsverzeichnis 1. Schreiben Sie Webshell in d...

Vue Grundanleitung Beispiel grafische Erklärung

Inhaltsverzeichnis 1. v-on-Richtlinie 1. Grundleg...

So installieren und konfigurieren Sie Redis in CentOS7

Einführung Es ist nicht nötig, Redis im Detail vo...

Vue implementiert Video-Upload-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung des JS-Browserspeichers

Inhaltsverzeichnis Einführung Plätzchen Was sind ...

Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls

Ich habe node.js zum Erstellen des Servers gewähl...

Detaillierte Erklärung des Json-Formats

Inhaltsverzeichnis Ein JSON basiert auf zwei Stru...

Docker-Bereitstellung von Implementierungsschritten für Flask-Anwendungen

1. Zweck Schreiben Sie lokal eine Flask-Anwendung...

JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren

Canvas ist ein neues Tag in HTML5. Sie können js ...