js变量生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="calc.css">
<script type="text/javascript" src="calc.js"></script>
</head>
<body onload="init()">
<div id="div1">
<div>
<input type="text" name="" id="num">
</div>
<div>
<input type="button" name="" value="C">
<input type="button" name="" value="←">
<input type="button" name="" value="+/-">
<input type="button" name="" value="/">
<input type="button" name="" value="1">
<input type="button" name="" value="2">
<input type="button" name="" value="3">
<input type="button" name="" value="*">
<input type="button" name="" value="4">
<input type="button" name="" value="5">
<input type="button" name="" value="6">
<input type="button" name="" value="-">
<input type="button" name="" value="7">
<input type="button" name="" value="8">
<input type="button" name="" value="9">
<input type="button" name="" value="+">
<input type="button" name="" value="0">
<input type="button" name="" value=".">
<input type="button" name="" value="=">
<input type="button" name="" value="m">
</div>
</div>
</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}
div{
	width:200px;
}
#div1{
	position: absolute;
	top: 100px;
	left: 100px;
}
input[type="button"]{
	width:40px;
	margin-right:5px;
	margin-bottom:5px;
}
input[type="text"]{
	width:189px;
	margin-bottom:5px;
	text-align:right;
	background-color:#ffffff;
	border:1px solid;
	box-sizing:border-box;
	padding:0px 2px;
}

function init(){
	var num = document.getElementById("num");
	num.value = 0;
	num.disabled = "disabled";//禁用文本框
	var num_value;
	var oButton = document.getElementsByTagName("input");//给button添加事件
	for(var i = 0; i < oButton.length-1; i++){
		oButton[i].onclick = function(){
			//var num_value = 1;
			if(!isNaN(this.value)){
				num.value = (num.value + this.value)*1;
			}
			else{
				switch(this.value){
					case"+":
						num_value = Number(num.value);
						num.value = 0;
						fh = "+";
						break;
					case"-":
						num_value = Number(num.value);
						num.value = 0;
						fh = "-";
						break;
					case"*":
						num_value = Number(num.value);
						num.value = 0;
						fh = "*";
						break;
					case"/":
						num_value = Number(num.value);
						num.value = 0;
						fh = "/";
						break;
					case".":
						if(num.value.indexOf(".") == -1){//判断小数点是否存在
							num.value += ".";
						}
						break;
					case"C":
						num.value = 0;
						break;
					case"←":
						if(num.value.length>1){
						 	num.value = num.value.substring(0, num.value.length-1);
						}else{
							num.value = 0;
						}
						break;
					case"+/-":
						num.value *= -1;
						break;
					case"=":
						switch(fh){
							case"+":
								num.value = num_value + Number(num.value);
								break;
							case"-":
								num.value = num_value - Number(num.value);
								break;
							case"*":
								num.value = num_value * Number(num.value);
								break;
							case"/":
								if(Number(num.value)==0){
									alert("除数不能为0");
									num.value = 0;
								}else{
									num.value = num_value / Number(num.value);
								}
								break;
						}
						break;
				}
			}
		}
	}
}

代码是根据这节课的思路写出来的，请教老师几个问题：

1、init()中定义了局部变量num与num_value，在给元素添加事件的时候使用到了这两个变量，内层函数掉用外层函数的局部变量这个我理解。

在初始化完成后init()掉用结束，num与num_value都应该被销毁了，但是后面单击事件时调用的方法function()却可以直接使用num，num_value，fh 这是三个变量，而且我理解的"+"按钮点击事件结束之后方法也就结束了，变量应该被销毁了，为是什么再次使用"="按钮事件中可以使用到num_value与fh的值？？？

2、onload是否初始化后就直接结束了？

能掐会算 2020-09-07

源自：案例：仿计算器 3-5 计算器细节完善

收起

3回答

好帮手慕小班回答被采纳获得+3积分 2020-09-08 11:27:05

同学你好，1、因为JavaScript是弱类型语言，不声明也可直接使用，而且默认是全局变量。

所以fh也可以理解为全局变量，此时fh就是作为一个全局变量在使用呐。

2、每个元素绑定的事件实际上可以理解为每个oButton[i]元素都添加了一个单独的函数，并不是说它是同一个函数。

继续加油祝：学习愉快~

收起回答

好帮手慕小班 2020-09-08 09:59:34

同学你好，因为js是弱类型的语言，所以可以不声明直接使用。

当执行绑定的元素触发onclick事件时，可以直接使用这个变量fh。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

提问者能掐会算 #1

谢谢老师，也就说每个元素绑定的事件实际上都是同一个函数，所以里面的变量可以直接公用？在我第一次按下+的时候其实是声明变量fh并赋值，按下=的时候时直接使用？

2020-09-08 10:02:45

好帮手慕小班 2020-09-07 18:45:20

同学你好，1、onload 事件会在页面或图像加载完成后立即发生。执行init()方法。

2、在init()方法中，对每个oButton[i]元素添加绑定了onclick事件，比如：

这样当点击“1”按钮触发时，this对应的是触发的这个onclick事件绑定的元素，这个元素并没有消失，也即是当初的oButton[i]，此时获取它的value属性，也是可以正确得到的，所以在按钮事件中可以使用得到的num与fh等值。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

提问者能掐会算 #1

没太看懂，这里的fh是全局变量嘛？

2020-09-07 19:04:48
提问者能掐会算 #2

我实际上想问的是每个元素的事件中，为什么不声明就可以使用fh，fh在init()中声明，但是init()已经结束了啊，变量也释放了，fh又不是元素的属性只是一个局部变量啊

2020-09-07 19:08:37