作用域，闭包的作用

最新推荐文章于 2023-02-03 15:33:04 发布

zd10101501

最新推荐文章于 2023-02-03 15:33:04 发布

阅读量578

点赞数

本文链接：https://blog.csdn.net/danzhang1010/article/details/29356055

版权

因为目前写的都是小程序，没有和团队一起开发，所以命名变量的时候，任意的设置全局变量，这是有问题的，如果大家都任意命名就会造成命名冲突，出现很多未知错误，所以从现在开始注意这一点咯，尽量的减少全局变量的使用。

在js中减少全局变量使用的一个很有用的技巧就是使用闭包，闭包是指有权访问另一个函数作用域中的变量的函数，一般出现的形式就是在一个函数的内部再定义一个函数，这个内部函数引用了外部函数的参数或者变量。那么即使当外部函数调用完毕，任然可以通过内部函数访问到外部函数参数的值。

昨天通过一个例子对使用闭包解决定义全局变量有了较深的认识。题目要求：实现文曲星上的猜数游戏，系统产生一个任意不重复四位数，然后用户有六次输错的机会，每次输入一个四个数，如果输入的一个数与产生的一个数的数字顺序和值都相等，就得到一个A，如果用户输入的数只是出现在系统产生的四个数字中，但是位置不对就得到B，例如系统产生的四位数是1234，用户输入的是2234，那么结果就是3A1B，如果用户输入1678就会得到结果1A0B。

分析：每次输入一个四位数，可以输入几次，所以需要有一个变量保存系统产生的四位数，这个变量应该在以后的几次判断中都能访问到，在这里采用闭包来解决这个问题

<!DOCTYPE html>
<html>
<meta charset='utf-8'>
<head>
	<title></title>
</head>
<body>
<form>
请输入四个不重复的数字（例如：1234，不要输入：2223）：
<input type="text" name='number' id='number' οnkeyup="this.value=this.value.replace(/[^\d]*/g,'')" />
<input	type='button' value="click me" οnclick='fnGuessNumber2(number.value)'/>
</form>
<p id='result'></p>
<script type="text/javascript">	
//产生一个随机四位数，四位数的第一位不能是0,并且四位数不能重复
	function getRandom(){
		var arr=["0","1","2","3","4","5","6","7","8","9"];
		var num=[],i=1,index;
		while(i<=4){
			index=(Math.floor(Math.random()*10))%arr.length;			
			if(i==1&&arr[index]==0)
				continue;			
			num.push(arr[index]);
			arr.splice(index,1);//删除掉数组中的那个数
			i++;
				}		
		return num;	
	}

var fnGuessNumber2=(function(){
		var i=0;
		var random=getRandom();
		//使用闭包来解决全局变量的问题
		return function(){
			var resultObj={A:0,B:0};			
		   if(i<6){	
		   if((!arguments[0])||!(/^\d{4}$/g.test(arguments[0])))	{
		   	alert("你输入的数字不合法！");
		   	document.getElementById("number").value="";
		   	return;
		   }	
			var input=arguments[0].replace(/(\d)/g,"$1,").split(",");
			input.pop();
			for(var ii=0;ii<4;ii++){				
				if(input[ii]==random[ii]){
					resultObj.A++;
				}else{
					if((random).indexOf(input[ii])>-1)
						resultObj.B++;
				}}
				document.getElementById("result").innerHTML+="A"+resultObj.A+"B"+resultObj.B+";";
				if((!(resultObj.A==4))||(resultObj.B)){
					i++;
					alert("你猜错了");
				}else{
					alert("你猜对了，答案是："+random.join(""));					
				}

			}else{
				alert("你已经猜了六次了，请刷新页面，重新开始游戏！");
			}
		};
		})();
		
</script>
</body>
</html>

js中有花括号{}语法，用来规定一段代码的边界，但与其他语言中不一样的是，js中{}不能用来定义"块级作用域"（即在{}中定义的变量不能在块外面被访问），