Question

这是堆叠文本元素的简单示例。

HTML：

<html>
<head>
    <title>Program 2</title>
    <link rel="stylesheet" type="text/css" href="ex2.css">
    <script type="text/javascript" src="ex2.js"></script>
</head>
<body>
    <p class="box" id="para1" onmouseover="display('para1');">
        This is a paragraph.
    </p>
    <p class="box" id="para2" onmouseover="display('para2');">
        This is a paragraph.
    </p>
    <p class="box" id="para3" onmouseover="display('para3');">
        This is a paragraph.
    </p>
</body>
</html>

的CSS：

    .box {
        border: 1px solid black;
        width: 500px;
        position: absolute;
    }

    #para1 {
        font-size: 20pt;
        color: white;
        background: red;
        top: 150px;
        left: 150px;
    }

    #para2 {
        font-size: 20pt;
        color: white;
        background: blue;
        top: 200px;
        left: 200px;
    }

    #para3 {
        font-size: 20pt;
        color: white;
        background: green;
        top: 250px;
        left: 250px;
    }

JS：

var defaultTop = 'para3';

function display(select)
{

    newTop = document.getElementById(select)
    oldTop = document.getElementById(defaultTop);

    oldTop.style.zIndex = "0";
    newTop.style.zIndex = "10";

    defaultTop = select;
}

当我在函数中放置var defaultTop = 'para3';时，当我将鼠标移到para2时，只会分别显示para3和para1。但是当我将var defaultTop = 'para3';放在函数外部时，所有的para都会分别显示出来。为什么呢？

Answer 1

当您将defaultTop放在函数内部时，该变量仅在执行函数时存在。一旦函数执行停止，变量（和变量本身）的值就会丢失。

每次调用display()时，变量defaultTop都会被定义，初始化，然后丢失。

但是，当您在函数外部定义它时，它会通过调用持续存在，并持久保存它的值。

这是因为范围。只要范围有变量，变量就会持续。只要函数执行，函数范围就会持续（从技术上讲，在闭包期间，但这与此方案无关）。全球范围持续到计划的持续时间。

对函数外部变量的混淆

1 个答案: