Quelle est la différence entre les oscilloscopes es5 et es6

Différence : il n'y a que deux types de portée dans es5 : la portée globale et la portée de la fonction, alors qu'il existe trois types de portée dans es6 : la portée globale, la portée de la fonction et la portée au niveau du bloc. Une nouvelle portée au niveau du bloc est ajoutée. . Le rôle de la portée au niveau du bloc : elle peut résoudre le problème de l'écrasement des variables externes en raison de la promotion des variables de portée interne et empêcher les variables utilisées pour le comptage de boucles de s'infiltrer dans les variables globales.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3

La différence entre es5 et es6 en termes de portée :

• Il n'y a que deux types de portée dans es5 : portée globale Portée du domaine et de la fonction

• Il existe trois types de portée dans es6 : portée globale, portée de la fonction et portée au niveau du bloc

Dans es5, seules la portée globale et la portée de la fonction sont utilisées dans ES5

Les variables sont déclarées avec var. Les variables déclarées avec var peuvent exister dans la portée globale ou dans la portée locale. Les situations spécifiques sont les suivantes

1. Portée globale

Trois situations d'avoir une portée globale.

a. Les variables déclarées en dehors de la fonction ont une portée globale

b. Les variables qui ne sont pas définies pour une affectation directe sont automatiquement déclarées comme variables globales
c. Les propriétés de l'objet fenêtre ont une portée globale

2. scope (Portée de la fonction)

La portée des variables dans le corps de la fonction

• Les variables définies à l'intérieur de la fonction ne sont accessibles que dans la fonction

  
  

Exemple

  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

Nouvelle portée au niveau du bloc dans Es6

La portée au niveau du bloc peut être simplement comprise comme : le contenu entre accolades {}, qui peut former sa propre portée. Les variables dans la portée au niveau du bloc sont déclarées par let et const

Pourquoi avons-nous besoin d'une portée au niveau du bloc ?

1. Résolvez le problème de l'écrasement des variables externes en raison de la promotion des variables de portée interne

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

Résultats de l'exécution

La variable i dans la fonction fun est déclarée à l'aide de var. La promotion. Ce que l'on appelle le levage de variables signifie que les déclarations de fonctions et les déclarations de variables sont toujours "hissées" discrètement en haut du corps de la méthode par l'interpréteur. Donc le i ici équivaut à atteindre le sommet de la fonction fun à l'avance, mais l'affectation est toujours effectuée lorsque i = 6 est en cours d'exécution. Le code ci-dessus est en fait équivalent à :

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

Lorsque le premier i est imprimé, i est. juste déclaré mais pas encore attribué (i reçoit une valeur de 6 dans l'instruction if), donc le premier i imprimé n'est pas défini et le deuxième i imprimé est 6

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

Si vous utilisez let pour déclarer la variable i dans le if , Ensuite, les accolades { } où se trouve l'instruction if formeront une portée au niveau du bloc, et les variables déclarées dans cette portée seront "liées" dans cette zone et ne seront plus affectées par des influences externes (c'est-à-dire des morts temporaires zone). Par conséquent, la première sortie i lors de l'exécution de la fonction fun est var i=5 dans la portée globale, et la sortie i dans l'instruction if est let i=6 déclarée dans la portée au niveau du bloc

2. il ne doit pas être utilisé pour le comptage de boucles. La variable est divulguée en tant que variable globale

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

Le code ci-dessus déclare la variable i avec var pour une utilisation dans la boucle. Idéalement, je ne devrais être valide que dans le corps de la boucle, mais ici, je suis. exposé et est dans la portée globale, donc dans Une fois la boucle terminée, la valeur de i est toujours accessible globalement

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

Si vous utilisez let avec une portée au niveau du bloc pour déclarer i, la variable i déclarée ici n'est valide que dans le for loop accolades { }. L'accès aux variables dans la portée au niveau du bloc dans la portée globale entraînera un résultat non défini

Caractéristiques de la portée au niveau du bloc

1. (actuellement entre accolades), permet donc une imbrication arbitraire, chaque niveau est une portée distincte

2. La portée interne peut avoir le même nom que la variable de portée externe (aucune portée n'est utilisée sans interférer les unes avec les autres)

3. . let ne peut exister que dans la portée actuelle de niveau supérieur

Remarque : s'il y a des variables/constantes déclarées par let ou const dans { } dans les instructions if et for, la portée de { } appartient également à la portée du bloc

Exemples sur la portée

<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>

【 Recommandations associées :

tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!