1. Detaillierte Erläuterung von var, let und const der neuen ES6-Funktionen
Scope steuert die Sichtbarkeit und Lebensdauer von Variablen und Parametern.
Die Bereiche in JS sind: globaler Bereich und Funktionsbereich. Es gibt kein Konzept für den Blockbereich. ECMAScript 6 (kurz ES6) hat einen Bereich auf Blockebene hinzugefügt.
Der Bereich auf Blockebene wird durch { } eingeschlossen, und das { } in der if-Anweisung und der for-Anweisung gehören ebenfalls zum Blockbereich.
var, let, const
- Durch var definierte Variablen sind im globalen Gültigkeitsbereich gültig , ohne das Konzept von Blöcken, und es kann über Blöcke hinweg zugegriffen werden , aber nicht über Funktionen hinweg .
Durch let definierte Variablen sind nur im Gültigkeitsbereich auf Blockebene gültig und es kann nicht über Blöcke oder Funktionen hinweg zugegriffen werden . const deklariert eine schreibgeschützte Konstante , die nur im Gültigkeitsbereich auf Blockebene gültig ist und beim Deklarieren initialisiert (d. h. zugewiesen werden muss) und der spätere Wert nicht geändert werden kann , da sonst ein Fehler gemeldet wird.
//var
var a=1;
if(true){
var b=2;
for(i=0;i<1;i++){
console.log(a);
console.log(b);
}
}
var c=function(){
var d=3;
}();
var e=function(){
console.log(d);//Uncaught ReferenceError: d is not defined
}();
//let
{
let i1=1;
console.log(i1);
{
let i2=1;
}
{
console.log(i2);//Uncaught ReferenceError: i2 is not defined
var fun1=function(){
let i3=3;
}();
var fun2=function(){
console.log(i3);//Uncaught ReferenceError: i3 is not defined
}();
}
}
2. var hat eine Variablenförderung, let und const haben keine Variablenförderung
//若在定义一个变量之前使用该变量则会抛出ReferenceError错误，而var则会将变量视为undefined
console.log(p);//Uncaught ReferenceError: p is not defined
p=3;//Uncaught ReferenceError: Cannot access 'p' before initialization
let p;
console.log(r);//Uncaught ReferenceError: r is not defined
r=2;//Uncaught TypeError: Assignment to constant variable.
const r=1;
//下面看var 的变量提升
//例1：
console.log(q);//undefined (var声明的变量有变量提升，在js的预处理阶段，将var q;声明提升到最前面，此时暂时还未赋值,所以打印出来的结果为undefined )
var q=2;
//例2：
s=1;
console.log(s);
var s=2;
- var kann dieselbe Variable wiederholt deklarieren, weder let noch const können dieselbe Variable wiederholt deklarieren
var c=2;
var c=3;
console.log(c);//3
let b;
let b;//Uncaught SyntaxError: Identifier 'b' has already been declared
const a=1;
const a=1;//Uncaught SyntaxError: Identifier 'a' has already been declared
- Bei Variablen vom zusammengesetzten Typ zeigt der Variablenname nicht auf die Daten, sondern auf die Adresse, an der sich die Daten befinden. Der Befehl const stellt nur sicher, dass die Adresse, auf die der Variablenname zeigt, unverändert bleibt, und garantiert nicht, dass die Daten an der Adresse unverändert bleiben
const a=[];
a.push('javascript');
console.log(a);//['javascript']
a=['java'];//Uncaught TypeError: Assignment to constant variable.
Ergänzung 1. Geltungsbereich auf Blockebene
Die Befehle let und const von ES6 stellen das Konzept des Gültigkeitsbereichs auf Blockebene und die Vorteile des Gültigkeitsbereichs auf Blockebene vor:
- Vermeiden Sie, dass innere Variablen äußere Variablen überschreiben
- Vermeiden Sie undichte Schleifenvariablen, die zum Zählen als globale Variablen verwendet werden
- Funktionsdeklarationen im Blockbereich zulassen
ES5 legt fest, dass Funktionen nur außerhalb des Geltungsbereichs der obersten Ebene und des Funktionsbereichs deklariert werden können und nicht im Geltungsbereich auf Blockebene deklariert werden können
if(true){
function func(){
}
}
try{
function func(){
}
}catch{
}
//上面两种函数声明在es5中都是非法的，但是浏览器没有遵守这一规定，还是支持在块级作用域中声明函数，因此以上两种情况实际都能运行，不会报错；但是在严格模式下，还是会报错；
'use strict'
if(true){
function func(){
}//报错
}
//ES6引入了块级作用域，明确允许在块级作用域中声明函数
'use strict'
if(true){
function func(){
}//不报错
}
//ES6还规定，在块级作用域中，函数声明的行为类似于let，在块级作用域之外不可引用；
//函数声明会提升到函数作用域头部；
//注意ES6的块级作用域允许函数只在使用大括号的情况下成立，如果未使用大括号，会报错
'use strict'
if(true){
function func1(){
}//不报错
}
if(true)
function func2(){
}//不报错
- ES6 erlaubt eine beliebige Verschachtelung von Bereichen auf Blockebene, und äußere Bereiche können keine Variablen in inneren Bereichen lesen
{
{
{
{
{
{
let i=1;}
console.log(i);//Uncaught ReferenceError: i is not defined
}}}}}
- Innere Gültigkeitsbereiche können Variablen mit demselben Namen wie äußere Gültigkeitsbereiche definieren, ohne dass dies Auswirkungen hat
- Machen Sie die sofortige Ausführungsfunktion unnötig und vereinfachen Sie den Code (ersetzen Sie ihn direkt durch den Gültigkeitsbereich auf Blockebene {}).
//立即执行函数
(function(){
var i=5;
})();
//块级作用域
{
let i=5;
}
Ergänzung 2. Warum meldet JavaScript keinen Fehler beim Zuweisen von Werten an nicht deklarierte Variablen?
1. L/R-Abfrage
L ist links und R ist rechts.
Betrachtet man var a = 2, führt die js-Engine LHS (die linke Seite der Zuweisungsoperation) auf a aus. Die andere ist RHS (die rechte Seite der Zuweisungsoperation)
Die RHS-Abfrage soll einfach den Wert einer Variablen finden. Wenn sie gefunden wird, wird eine Ausnahme ausgelöst, wenn sie sie nicht finden kann. Die
LHS-Abfrage soll versuchen, den Container selbst der Variablen zu finden, damit ihr ein Wert zugewiesen werden kann Es wird im globalen Geltungsbereich erstellt.
2. Für var a = 2 wird die JavaScript-Engine sie in ihrem Umfang kompilieren, und dabei wird sie in zwei Schritte unterteilt
1. Zunächst deklariert var a eine neue Variable in ihrem Gültigkeitsbereich, die ganz am Anfang steht, also bevor der Code ausgeführt wird 2. Als
nächstes fragt a = 2 die (linke) Variable a ab und weist ihr beide zu
LHS und RHS Beginnen mit der Suche im aktuellen Geltungsbereich, bis der globale Geltungsbereich erreicht ist. Unabhängig davon, ob sie gefunden wird, wird sie angehalten.
Erfolglos RHS löst eine Ausnahme (ReferenceError) aus.
Erfolglos LHS erstellt automatisch und implizit eine globale Variable