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