函数外部变量的混淆

这是一个堆叠文本元素的简单示例。函数外部变量的混淆

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分别显示出来。为什么？

来源

2014-08-31 Robin

尝试阅读： 1. http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript/500459#500459 2. http：// stackoverflow .com/questions/111102/how-do-javascript-closures-work – DCrystal 2014-08-31 18:02:13

因为函数的范围与全局程序不同。 – 2014-08-31 18:02:36

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

每次打电话给display()，变量defaultTop正在被定义，初始化，然后丢失。

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

这是因为范围。变量持续时间与其范围一样长。只要函数执行，函数范围就会持续（技术上讲，在闭包期间，但在这种情况下，这与此无关）。全球范围持续该计划的持续时间。

来源

2014-08-31 18:03:45 Matt

函数外部变量的混淆

回答

相关问题