src/JavaScript/JS函数以及变量/局部变量和全局变量.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局变量与局部变量</title>
	</head>
	<body>
		
		<img src="https://gitee.com/YunboCheng/imageBad/raw/master/image/20210703200623.png" alt="全局变量与局部变量的概念">	
		
		<!-- 
		javascript也是遵循就近原则的。
		
		变量声明了，但是没有手动赋值，系统会默认赋值undefined。
		变量没有声明，直接访问，这个时候会报错（用F12可以查看错误信息）
		
		重点：
			
		 -->
		<script type="text/javascript">
			// 全局变量
			var username = "zhangsan";
			
			// 定义函数
			function sayHello(){
				// 局部变量
				var username = "zhangsan";
				alert("welcome" +":"+ username);  //就近原则：这是任何一个编译语言都具备的。
				
				//局部变量
				var i =10;
				
			}
			
			sayHello();
			
			// 在这里访问username，结果显示的是 username zhangsan
			// 说明只能在函数体中访问局部变量username，而在外边访问的全是全局变量username
			alert("username" + ":"+ username);
			
			// 在这里访问i可以访问到吗？
			// i is not defined（找不到i变量）报错了，说明外边不能访问局部变量
			// alert(i);
			
			//声明一个变量，但是没有手动赋值，系统默认赋值为undefined
			var k ;
			alert(k); // 结果为 undefined
				
			// 没有提前声明这个变量，会报错 i is not defined (找不到指定的变量)
			// alert(kk);
			
			
			/* 以下的代码是重点 */
			/* 
				在javascript当中，如果一个变量声明的时候没有使用var关键字的话，
				这个变量不管是在哪里声明的，都是全局变量。这种全局变量在声明的时候必须赋值，
				不能采用系统默认值。否则会报错：age is not defined
			 */
			
			// 编写一个函数
			function doSome(){
				// 声明变量的时候，没有使用var关键字
				email = "zhangsan@123.com";
				age =100 ;
			}
			
			// 调用doSome函数
			doSome();
			
			/* 
				注意 ：
					这里必须调用才可以进行doSome函数才会给email分配空间，
					只有分配了空间下边才可以使用email和age，
					没有空间不能调用email和age的值。
			 */
			// 访问email变量
			// 结果 :email:zhangsan@123.com
			alert("email" + ":" + email);
			
			
			// 此时的age后面没有赋值（age） 这个会报错 age is not defined 因为如果不适用var关键字，必须进行赋值。
			alert("age" + ":" + age);
			
			// 此时age使用var声明（var age），但是是局部变量，会报错age is not defined
			alert("age" + ":" + age);
			
			// 此时age不适用var关键字，并且进行赋值(age = 100;) 不会报错，显示结果：age:100
			alert("age" + ":" + age);
			
		</script>
	</body>
</html>