Maison > interface Web > js tutoriel > le corps du texte

Un examen plus approfondi de la portée et des variables en JavaScript

韦小宝
Libérer: 2018-03-14 15:57:44
original
1444 Les gens l'ont consulté

Cet article parle de la portée et des variables en JavaScript Si vous ne connaissez pas la portée et les variables en JavaScript ou si vous êtes intéressé par la portée et les variables en JavaScript, alors nous allons nous lever et. lisez cet article. Bon, arrêtons les bêtises et allons à l'essentiel

Portée variable


Portée : C'est la zone où les variables sont déclarées, et c'est également la portée accessible des variables et des fonctions. Les variables déclarées globalement sont globalement visibles et accessibles. Si les variables déclarées à l'intérieur d'une fonction ne sont accessibles qu'à l'intérieur de la fonction, elles sont appelées variables locales.

Quelques points à noter :

1.Il n'y a pas de portée au niveau du bloc en JavaScript (dans ES5 et avant ES6) , uniquement portée de la fonction et portée globale. Les variables définies à l'intérieur de la boucle for ont une portée au niveau de la fonction.

2. Les variables qui ne sont pas déclarées dans une fonction ou déclarées sans var sont des variables globales et ont une portée globale. Spécial : var a = b = c = 0 ; b et c sont des variables globales .

3.La portée d'une variable est basée sur l'heure à laquelle elle est déclarée, car la portée de la variable est dans l'analyse étape du code js La formulation des règles est terminée.

Cas simple :

	//变量的作用域
	var t = 90;  //全局作用域,在js代码中任何一个地方都可以访问

	function f1(){  //f1函数 在全局作用域中

		var t2 = 10;  //t2是f1函数内部变量,只有在f1内可访问
		console.log(t2);

		function f2(){ //f2函数  在f1函数的作用域中
			var t3 = 20;//只能在f2函数内部才能访问
			console.log(t3);
			return t2*t3;  // 访问了父级作用域中的t3
		}
		return f2();

	}
	var m = f1();

	console.log(m);
Copier après la connexion

2. Aucune portée au niveau du bloc

J'ai mentionné plus tôt qu'il n'y avait pas de portée au niveau du bloc en JavaScript. Ceci concerne es5 et es6 avant 9 (let const, etc.). La portée des variables définies dans la boucle for et la boucle while est la portée au niveau de la fonction.

Par exemple :

	//没有块级作用域
	function f1(){
		for(var i=0;i<10;i++){//i变量是在for中定义的
			console.log(i);//打印1-9
		}
		console.log(i);//可以访问到i变量  打印10   而在c++ Java等语言中是不行的
	}

	f1();
Copier après la connexion


3. Hébergement de variables


Lorsque le moteur js exécute le code js, il créera d'abord un EC global (contexte) Et l'EC de la fonction (s'il y a une fonction), lors de la création de l'EC, les variables déclarées dans le domaine

courant ont été initialisées à undefined. Comment l'initialiser ? Le moteur js recherchera d'abord la définition de variable de var dans la portée actuelle, s'il trouve cette définition, alors

la placera au premier plan de la portée et l'enregistrera en mémoire. (c'est-à-dire l'objet variable VO dans EC) , défini sur non défini.

Cas :

	var a = 10;

	function f1(){
		//在这里首先会创建f1的执行上下文  并把里面的变量初始化为undefined
		console.log(a);  //代码执行到这里的时候, js引擎会去当前作用域内存中问有没有这个变量的声明,发现有,那么就给他初始的undefined

		//假如说下面没有var变量进行定义a,那么js就会向父级作用域中去找这个变量,直到找到为止

		var a = 19;  //在这里给a赋值了19

		console.log(a); // 打印了19
	}

	f1();

	console.log(a);  //这里无疑是10 没什么问题
Copier après la connexion


Par conséquent, lorsque le moteur js crée un contexte, il favorise les variables en cas de besoin. On peut dire qu'il s'agit d'un mécanisme de protection de sécurité, qui est discuté en détail dans ES6.

Remarque : Lorsque la déclaration de variable et la déclaration de fonction ont le même nom, la fonction a une priorité plus élevée.

	console.log(b); //打印b(){}

	var b = 9;

	function b(){

	}

	console.log(b); //打印9
Copier après la connexion


Puisque la fonction est promue au premier plan, ce qui est imprimé au début est sans aucun doute b(){}, parce que js C'est un langage dynamique, réaffectez b à 9 et écrasez la fonction précédente.

Cas 1 :

	if ("a" in window) {
		var a = 1;
	}
	console.log(a);
Copier après la connexion


D'abord, j'ai vu votre code, votre réponse est Quoi ? Serait-ce Uncaught ReferenceError : a n'est pas défini?

Dites-vous, La réponse est 1

Tout d'abord, vous devez savoir que var a = 1 définit en fait une variable globale (appartenant aux attributs sous l'objet fenêtre), car if n'est pas une portée de bloc, et il n'y avait pas de portée de bloc en JavaScript avant es5. Ainsi ce jugement conditionnel est établi.

Regardez encore :

	if (!("a" in window)) {
		var a = 1;
	}
	console.log(a);
Copier après la connexion


Alors, qu'est-ce que cela devrait être ? La réponse est indéfinie, car la condition n'est pas établie et l'affectation à a n'a pas réussi. La valeur par défaut est indéfinie

.

案例二:

	fun();

	console.log(a);
	console.log(b);
	console.log(c);

	function fun(){
		var a = b = c = 10;
		console.log("fun中的a="+a);
		console.log("fun中的b="+b);
		console.log("fun中的c="+c);
	}
Copier après la connexion


你得答案是什么?

答案是:

由于a没有定义,所以直接报错,下面的两行代码被阻止执行了,假如把外面的console.log(a)注释掉呢?

	fun();

	//console.log(a);
	console.log(b);
	console.log(c);

	function fun(){
		var a = b = c = 10;
		console.log("fun中的a="+a);
		console.log("fun中的b="+b);
		console.log("fun中的c="+c);
	}
Copier après la connexion

输出的是:


为什么外面b c都会是10呢? 原因就是var a = b = c = 10 ;其中b c就是全局变量,如果你想定义三个内部变量,那么应该这样定义:

var a = 10 ,b = 10, c = 10;

弄懂了以上这些区别,基本上变量提升就没什么大问题了。以上就是本篇文章的所有内容,大家要是还不太了解的话,可以自己多实现两边就很容易掌握了哦!

相关推荐:

JS关于作用域的一个问题

js函数和变量的提升及闭包讲解

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!