声明和定义全局变量作为函数结果有时有效

Declaring and Defining Global Variables as Function Result Sometimes Works?

本文关键字：结果 有效 函数 定义 全局变量 声明      更新时间：2023-09-26

我使用过的一些编程语言对将全局变量设置为函数的结果很挑剔，所以我习惯于在main((或init((中执行此操作。

这是由一位朋友发送给我的，令我惊讶的是，它在我的计算机和她的计算机上本地运行完全正常，但在我们的任何一台服务器上都不起作用：

function getValue(val) {
    return document.getElementById(val);
}
var myValue = getValue("output"); // is this kosher?
function init() {
    myValue.innerHTML = "foo"; //error: myValue is null
    //document.getElementById("output").innerHTML="bar"; //this works though
}
window.onload = init

但是，奇怪的是，这适用于服务器和本地：

function getValue(val) {
    return val;
}
var myValue = getValue("output");
function init() {
    alert(myValue);
}
window.onload = init;

我通过这样做修复了它：

function getValue(val) {
    return document.getElementById(val);
}
var myValue; // don't set the value here
function init() {
    myValue = getValue("output"); // but here instead
    myValue.innerHTML = "foo"; // this is fine
}
window.onload = init

。但现在我很困惑，如果第一个代码块不起作用，为什么第二个代码块会起作用。 这是否与在服务器上加载HTML文档之前运行声明的JS有关？

仅供参考，文档如下：

<!doctype html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <script src="test.js"></script>
        </head>
        <body>
                <div id="output">
                </div>
        </body>
</html>

在第一个块中，您尝试在 dom(html 本身(完全渲染和初始化之前获取一个元素。这就是为什么第三个块工作的原因，因为你在 window.load 上得到它，在 html 初始化后运行的事件。

第二个块工作，因为它只是一个字符串，所以没关系。

在这里，您的"输出"元素尚不存在。因此，myValue将设置为null：

var myValue = getValue("output");

这就是为什么它在window.load内null的原因。

在第一个代码块中，运行代码以立即获取 doc 元素。所以该元素尚不存在。由于您在第二个块上的 init 方法中获取元素，该块在 DOM 准备就绪时运行，因此该元素现在存在。

如果你在 HTML 之后加载 JS 脚本(也就是在标签的最底部(，你的第一个块会运行，因为在脚本运行之前 DOM 元素就已经存在了。

相关文章：