Heim > Web-Frontend > js-Tutorial > Ein genauerer Blick auf Umfang und Variablen in JavaScript

Ein genauerer Blick auf Umfang und Variablen in JavaScript

韦小宝
Freigeben: 2018-03-14 15:57:44
Original
1493 Leute haben es durchsucht

In diesem Artikel geht es um den Umfang und die Variablen in JavaScript Wenn Sie nichts über den Umfang und die Variablen in JavaScript wissen oder sich für den Umfang und die Variablen in JavaScript interessieren, dann werden wir uns informieren Lesen Sie diesen Artikel. Okay, genug Unsinn, kommen wir zum Punkt

Variabler Umfang


Bereich: Dies ist der Bereich, in dem Variablen deklariert werden, und es ist auch der zugängliche Bereich von Variablen und Funktionen. Global deklarierte Variablen sind global sichtbar und zugänglich. Wenn innerhalb einer Funktion deklarierte Variablen nur innerhalb der Funktion zugänglich sind, werden sie lokale Variablen genannt.

Ein paar Punkte, die Sie beachten sollten:

1.In JavaScript gibt es keinen Bereich auf Blockebene (in ES5 und vor ES6) , nur Funktionsumfang und globaler Umfang. Innerhalb der for-Schleife definierte Variablen haben einen Gültigkeitsbereich auf Funktionsebene.

2. Variablen, die nicht innerhalb einer Funktion oder ohne Variable deklariert sind, sind globale Variablen und haben einen globalen Gültigkeitsbereich. Besonderes: var a = b = c = 0; b und c sind globale Variablen .

3.Der Gültigkeitsbereich einer Variablen basiert auf dem Zeitpunkt ihrer Deklaration, da der Gültigkeitsbereich der Variablen im Parsing liegt Stadium des js-Codes Die Formulierung der Regeln ist abgeschlossen.

Einfacher Fall:

	//变量的作用域
	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);
Nach dem Login kopieren

2. Kein Bereich auf Blockebene

Ich habe bereits erwähnt, dass es in JavaScript keinen Bereich auf Blockebene gibt. Dies gilt für es5 und es6 vor 9 (sei es const usw.). Der Gültigkeitsbereich der in der for-Schleife und der while-Schleife definierten Variablen ist der Gültigkeitsbereich auf Funktionsebene.

Zum Beispiel:

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

	f1();
Nach dem Login kopieren


3. Variablen Hositing


Wenn die js-Engine js-Code ausführt, erstellt sie zunächst einen globalen EC (Kontext) und den EC der Funktion (falls vorhanden) wurden beim Erstellen der EC die in der aktuellen

-Domäne deklarierten Variablen auf undefiniert initialisiert. Die js-Engine sucht zunächst nach der Variablendefinition von var im aktuellen Bereich. Wenn sie diese Definition findet, wird sie von

an den Anfang des Bereichs verschoben und im Speicher gespeichert (das heißt, das variable Objekt VO in EC) , auf undefiniert gesetzt.

Fall:

	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 没什么问题
Nach dem Login kopieren


Wenn die js-Engine einen Kontext erstellt, fördert sie daher bei Bedarf Variablen. Dies kann als Sicherheitsschutzmechanismus bezeichnet werden, der in ES6 ausführlich erläutert wird.

Hinweis: Wenn die Variablendeklaration und die Funktionsdeklaration denselben Namen haben, hat die Funktion eine höhere Priorität.

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

	var b = 9;

	function b(){

	}

	console.log(b); //打印9
Nach dem Login kopieren


Da die Funktion nach vorne befördert wird, ist das, was am Anfang gedruckt wird, zweifellos b(){}, weil js Es ist eine dynamische Sprache, weisen Sie b auf 9 neu zu und überschreiben Sie die vorherige Funktion.

Fall 1:

	if ("a" in window) {
		var a = 1;
	}
	console.log(a);
Nach dem Login kopieren


Als ich Ihren Code sah, lautete Ihre Antwort „Was?“ Könnte es sein: Uncaught ReferenceError: a ist nicht definiert?

Ich sage Ihnen, Die Antwort ist 1

Zuallererst müssen Sie wissen, dass var a = 1 tatsächlich eine globale Variable definiert (die zu den Attributen unter dem Fensterobjekt gehört), denn wenn es sich nicht um einen Blockbereich handelt und es keinen Blockbereich gab in JavaScript vor es5. Damit ist dieses bedingte Urteil etabliert.

Schau noch einmal:

	if (!("a" in window)) {
		var a = 1;
	}
	console.log(a);
Nach dem Login kopieren


Was soll das also sein? Die Antwort ist undefiniert, da die Bedingung nicht erfüllt ist und die Zuordnung zu a nicht erfolgreich ist. Der Standardwert ist undefiniert

案例二:

	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);
	}
Nach dem Login kopieren


你得答案是什么?

答案是:

由于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);
	}
Nach dem Login kopieren

输出的是:


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

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

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

相关推荐:

JS关于作用域的一个问题

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

Das obige ist der detaillierte Inhalt vonEin genauerer Blick auf Umfang und Variablen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage