Question

我遇到了一个示例HTML / Javascript代码

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">

<script>
var i = 0;
displayCD(i);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " + 
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

function next() {
if (i < x.length-1) {      // why does x here not raise an error? it came from nowhere.
  i++;
  displayCD(i);
  }
}

</script>

</body>
</html>

我唯一的问题是，为什么在x中定义function next(){}时myFunction(xml, i){}使用x是否可行？

首次加载页面时，执行displayCD（0）。因此，我能提出的唯一理论是var保留在内存中，因为它是一个全局变量（它不使用input.txt。）

如果我错了，请纠正我。

由于

Answer 1

当函数“myFunction”执行时，没有var的变量附加到window对象。在控制台中，您可以通过尝试window.x来查看它，它将显示一些输出。

然后，您可以从任何函数或函数外部访问x。

如果在执行“myFunction”之前尝试访问x，则会显示错误。

Answer 2

您想知道为什么封装没有发生？因为函数不被视为对象。函数中的变量始终在其父项范围内创建。但您可以使用javascript对象创建封装范围：

var a = {};
a.z = "a";
console.log(z);  //undefined error

或者你可以将这样的函数包装起来封装它们：

(function(){
  var x = "1";
})();
console.log(x); //undefined

或者更好的是，创建一个范围：

var myObject = {};
myObject.myMethod = function(){
  var g = "2";
}
console.log(g); //undefined

https://jsfiddle.net/1a3tkzpz/1/

Javascript函数使用var来自另一个函数

2 个答案: