JS05-全局变量与局部变量-优快云博客

本文链接：https://blog.youkuaiyun.com/zjj20181021/article/details/85057487

本文深入探讨了全局变量和局部变量的概念，展示了如何在JavaScript中使用这两种变量进行计数操作，以及它们之间的关键区别。通过具体示例，读者将学会如何在网页中利用这些变量来显示平方值和计数器，同时理解内嵌函数如何维护局部变量的状态。

全局变量：函数也可以访问到函数外部定义的变量：

<p>函数可以访问定义在函数外的变量</p>
	<button type="button" onclick="myFunction()">点我</button>
	<p id ="demo"></p>
	<script type="text/javascript">
		var a=4;
		function myFunction(){
			document.getElementById("demo").innerHTML=a*a;
		}
	</script>

2.延伸：全局变量计数（类似阅读量的问题）

<p>全局变量计数</p>
	<button  type="button" onclick="myFunction()">计数！</button>
	<p id="demo"></p>
	<script type="text/javascript">
		var counter=0;
		function myFunction(){
			document.getElementById("demo").innerHTML=add();
		}
		function add(){
			return counter+=1;
		}
	</script>

3.局部变量
函数可以访问到函数内部定义的变量：

<p>函数可以访问函数内部定义的变量</p>
	<button type="button" onclick="myFunction()">点我</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction(){
				var a=4;
				document.getElementById("demo").innerHTML=a*a;
		}
	</script>

8.延伸：此延伸与全局变量做了区别，结果告诉我们不能实现第二次增加

<p>局部变量计数</p>
	<button type="button" onclick="myFunction()">计数</button>
	<p id="demo"></p>
	<script type="text/javascript">
		function myFunction() {
			document.getElementById("demo").innerHTML=add();
		}
		function add(){
			var counter=0;
			return counter+=1;
		}
	</script>

9.延伸-内嵌函数（局部变量计数）

<p>局部变量计数（内嵌函数）</p>
	<button type="button" onclick="myFunction()">计数</button>
	<p id="demo">0</p>
	<script type="text/javascript">
		var add=(function(){
			var counter=0;
			return function(){
				return counter+=1;
			}
		})();
		function myFunction(){
			document.getElementById("demo").innerHTML = add();
		}
		
	</script>