JS学习变量的作用域等实现简单的玛丽小游戏_变量的作用域游戏教学-CSDN博客

u js的闭包

js的闭包问题

1. js的变量作用域

代码:

<html>

<head>

<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>

<scripttype="text/javascript">

var a=90; //定义一个全局变量

function test(){

a=123; //使用外层的 a变量

}

test();

document.write("a="+a);*/

/* var a=90; //定义一个全局变量

function test(){

var a=123; //定义一个局部变量

}

test();

document.write("a="+a);*/

/* a=90; //没有var ,就会试着去找(父函数的 a)，如果找不到就创建 a

function test(){

a=123; //没有var ,就会试着去找(父函数/外层的 a)，如果找不到就创建 a

}

test();

document.write("a="+a);*/

//测试一下，看看大家理解否?

a=20;

function test1(){

var a=700;

function test2(){

a=890;//如果没 var ,则会到父函数去，找a,找到就使用父函数的a,否则创建

}

return test2;

}

var var1=test1();

var1();

document.write(a);

</script>

</html>

☞

① js允许函数中有函数

② 如果使用变量，如果该变量有var ,则表示创建全新的变量 ,如果该变量是直接写在页面，则我们认为是全局变量，否则是局部变量, 如果没有带var关键字, 则js引擎会这样处理: 首先到父函数去找有没有该变量，如果有，则使用，如果没有则创建之.

function f1(){

　　　　//var n=999;//局部变量

n=999;//全局变量

　　}

f1();

alert(n);

③ 上面的代码说明，如果在一个函数中，直接使用比如

n=900; 相当于创建了一个全局变量.

u js中如何解决从外部读取内部函数的局部变量

function test1(){

var n=90;//布局变量

}

alert(n) //错误

解决方法->闭包

function test1(){

var n=90;

//test1函数的内部函数,可以访问 var n

funciton test2(){

window.alert(n++);

}

//把内部函数test2返回外部调用者

return test2;

}

var res=test1();//调用test1 ,返回 test2函数

这时res就是test1内部函数 test2别名

res();

闭包: 你可以这样理解 :test2()实现闭包

u 闭包的主要用处是

1. 把局部变量保存在内存中，不让垃圾回收机制，将其回收.

2. 让外部去访问内部函数的布局变量.

u js中函数名不能重复

1. 在不同文件中，可以有相同的函数名.

2. 在不同父函数(类), 即使在同一个页面，可以有相同函数，比如下面代码

abc.html

functiontest(){}

functino test2(){

functionsayhello(){

}

function test3(){

functionsayhello(){

}

abc2.html

functiontest(){}

玛丽小游戏

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">


	
	//定义Mario

	function Mario(x,y){
		
		this.x=x;//mario的横坐标
		this.y=y;//mario的纵坐标

		//向右移动

		this.moveRight=function(){
			//alert("mari向右移动");
			//真的动.
			//获取小人图片
			var mario_img=document.getElementById("mario");
			//获取当前的left
			var mario_img_left=mario_img.style.left;//13px
			//window.alert(mario_img_left);
			//从mario_img_left 中获取数字部分 "13px"   substring(0,2)
			mario_img_left=mario_img_left.substring(0,mario_img_left.length-2);
			mario_img.style.left=parseInt(mario_img_left)+30+"px";

			//window.alert("mario_img_left="+mario_img_left);
		}

		//向左移动
		//向下移动
		//向上移动


	}
	//这是mario对象
	var mario=new Mario(1,1);

	//响应用户点击
	function move(direct){
		
		switch(direct){
			
			case "r":
				//window.alert("希望小人向右");
				//直接控制小人的动作
				mario.moveRight();
				break;
			case "l":
				window.alert("希望小人向左");
				break;
			case "up":
				window.alert("希望小人向上");
				break;
			case "down":
				window.alert("希望小人向下");
				break;
			default:
				window.alert("方向不对");
				break;

				
		}
	}


</script>

<input type="button" οnclick="move('r')" style="position:absolute;left:600px;top:100px" value="-->"/>

<div style="width:500px;height:400px;border:1px red solid">
<img src="mario.png" id="mario" width="40px" style="position:absolute;left:13px;top:17px"/>

<img src="1.bmp" id="torise" width="40px" style="position:absolute;left:303px;top:317px"/>
</div>
</html>