Was ist der Unterschied zwischen ES5- und ES6-Bereichen?

Unterschied: In es5 gibt es nur zwei Arten von Bereichen: globalen Bereich und Funktionsbereich, während es in es6 drei Arten von Bereichen gibt: globalen Bereich, Funktionsbereich und Bereich auf Blockebene. Ein neuer Bereich auf Blockebene wird hinzugefügt. . Die Rolle des Bereichs auf Blockebene: Er kann das Problem des Überschreibens äußerer Variablen aufgrund der Heraufstufung innerer Bereichsvariablen lösen und verhindern, dass Variablen, die für die Schleifenzählung verwendet werden, in globale Variablen gelangen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer

Der Unterschied zwischen es5 und es6 in Bezug auf den Umfang:

• Es gibt nur zwei Arten von Bereichen in es5: globaler Bereich Domäne und Funktionsumfang

• In es6 gibt es drei Arten von Bereichen: globaler Bereich, Funktionsbereich und Bereich auf Blockebene

In es5 werden in ES5 nur globaler Bereich und Funktionsbereich verwendet

Variablen werden mit var deklariert. Variablen, die mit var deklariert werden, können im globalen Bereich oder im lokalen Bereich vorhanden sein. Die spezifischen Situationen sind wie folgt:

Drei Situationen mit einem globalen Bereich

a. Variablen, die außerhalb der Funktion deklariert wurden, haben einen globalen Gültigkeitsbereich.

b. Variablen, die nicht für die direkte Zuweisung definiert sind, werden automatisch als globale Variablen deklariert Umfang ( Funktionsumfang)

Der Umfang der Variablen im Funktionskörper

Auf innerhalb der Funktion definierte Variablen kann nur innerhalb der Funktion zugegriffen werden

Beispiel

  var a = 1;
  console.log(a);// 1                  此处a为全局变量，在全局作用域下都可访问得到

  b = 2
  console.log(b); // 2                 此处b未被var定义，而是被直接赋值，自动声明为全局变量
  
  function fun() {
    var c = 3;
    console.log(c);//3                 此处c存在在函数作用域中，仅在函数fun中可访问
  }
  fun()
  console.log(c);// undefined         全局作用域下访问函数作用域中的变量c，得到undefined

Neuer Bereich auf Blockebene in Es6

• 
  Der Bereich auf Blockebene kann einfach verstanden werden als: der in geschweifte Klammern {} eingeschlossene Inhalt, der einen eigenen Bereich bilden kann. Variablen im Bereich auf Blockebene werden durch let und const deklariert

Warum brauchen wir den Bereich auf Blockebene?

1. Lösen Sie das Problem der Variablenheraufstufung im inneren Bereich, die dazu führt, dass äußere Variablen überschrieben werden.

var i = 5;
function fun(){
  console.log(i);//undefined
  if(true){
    var i = 6
    console.log(i);//6
  }
}
fun()

. Ausführungsergebnisse. Die Variable i in der Funktion fun wird mit var deklariert. Das sogenannte Variablen-Hoisting bedeutet, dass Funktionsdeklarationen und Variablendeklarationen vom Interpreter immer stillschweigend an den Anfang des Methodenkörpers „gehievt“ werden. Das i hier ist also gleichbedeutend mit dem Erreichen der Spitze des Funktionsspaßes im Voraus, aber die Zuweisung wird immer noch ausgeführt, wenn i = 6 ausgeführt wird. Der obige Code entspricht tatsächlich:

var i = 5;
function fun(){
  var i;
  console.log(i);
  if(true){
    i = 6
    console.log(i)
  }
}
fun()

Wenn das erste i gedruckt wird, ist i gerade Deklariert, aber noch nicht zugewiesen (i wird in der if-Anweisung der Wert 6 zugewiesen), daher ist das erste gedruckte i undefiniert und das zweite gedruckte i ist 6

var i = 5;
function fun(){
  console.log(i);//5
  if(true){
    let i = 6
    console.log(i);//6
  }
}
fun()

Wenn Sie let verwenden, um die Variable i in der if-Anweisung zu deklarieren, Dann bilden die geschweiften Klammern {}, an denen sich die if-Anweisung befindet, einen Bereich auf Blockebene, und die in diesem Bereich deklarierten Variablen werden in diesem Bereich „gebunden“ und werden nicht mehr von äußeren Einflüssen beeinflusst (d. h. vorübergehende Totzone). ). Daher ist die erste i-Ausgabe beim Ausführen der Fun-Funktion var i=5 im globalen Bereich, und die i-Ausgabe in der if-Anweisung ist let i=6 im Blockebene-Bereich. Verhindern Sie dies von der Verwendung für die Schleifenzählung Die Variable wird als globale Variable durchgesickert

for(var i = 0; i < 3; i++){
  doSomething()
}
console.log(i)//3

Der obige Code verwendet var, um die i-Variable für die Schleife zu deklarieren. Idealerweise sollte i nur innerhalb des Schleifenkörpers gültig sein, aber hier ist i verfügbar und befindet sich im globalen Bereich, sodass nach dem Ende der Schleife immer noch global auf den Wert von i zugegriffen werden kann

for(let i = 0; i < 3; i++){
  console.log(i)
}
console.log(i)//undefined

Wenn Sie let mit einem Bereich auf Blockebene verwenden, um i zu deklarieren, ist die hier deklarierte i-Variable nur innerhalb von for gültig Schleife in geschweiften Klammern {}. Der Zugriff auf Variablen im Bereich auf Blockebene im globalen Bereich führt zu undefinierten Merkmalen des Bereichs auf Blockebene. Mit let deklarierte Variablen sind nur im Bereich gültig ( derzeit innerhalb der geschweiften Klammern), ermöglicht also eine beliebige Verschachtelung, jede Ebene ist ein separater Bereich

2 Der innere Bereich kann denselben Namen wie die äußere Bereichsvariable haben (es werden keine Bereiche verwendet, ohne sich gegenseitig zu beeinträchtigen)
3. let kann nur im aktuellen Bereich der obersten Ebene existieren

Hinweis: Wenn es in { } in if-Anweisungen und for-Anweisungen Variablen/Konstanten gibt, die durch let oder const deklariert wurden, gehört der Bereich von { } auch zum Blockbereich

Beispiele zum Umfang

<script type="text/javascript">
	{
		var a = 1;
		console.log(a); // 1
	}
	console.log(a); // 1
	// 可见，通过var定义的变量可以跨块作用域访问到。

	(function A() {
		var b = 2;
		console.log(b); // 2
	})();
	// console.log(b); // 报错，
	// 可见，通过var定义的变量不能跨函数作用域访问到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循环结束i已经是4，所以此处i为4)
	console.log(d); // 5
	// if语句和for语句中用var定义的变量可以在外面访问到，
	// 可见，if语句和for语句属于块作用域，不属于函数作用域。

	{
		var a = 1;
		let b = 2;
		const c = 3;	
		
		{
			console.log(a);		// 1	子作用域可以访问到父作用域的变量
			console.log(b);		// 2	子作用域可以访问到父作用域的变量
			console.log(c);		// 3	子作用域可以访问到父作用域的变量

			var aa = 11;
			let bb = 22;
			const cc = 33;
		}
		
		console.log(aa);	// 11	// 可以跨块访问到子 块作用域 的变量
		// console.log(bb);	// 报错	bb is not defined
		// console.log(cc);	// 报错	cc is not defined
	}
</script>

【Verwandte Empfehlungen: Javascript-Video-Tutorial,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen ES5- und ES6-Bereichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!