javascript - 看似定义的javascript变量抛出未定义的错误

给定以下代码，我不确定为什么我可以检索longAndObscureVariableName而不是anotherLongObscureVariableName。您能解释一下，并说明如何使jsFileNumberTwo.js可以访问anotherLongObscureVariableName吗？

HTML文档的头原包含：

<script type="text/javascript" id="my_globals">
var longAndObscureVariableName = "foo";
</script>

<script type="text/javascript" src="jsFileNumberOne.js" /></script>
<script type="text/javascript" src="jsFileNumberTwo.js" /></script>

Javascript文件jsFileNumberOne.js包含以下代码，该代码将另一个全局变量添加到#my_globals元素中：

jQuery(document).ready(function() {

    // Store the initial variables, to which we will add more
    var initialVars = jQuery('#my_globals').html();
    // Define content for script tag:
    var scriptContent = initialVars;
    // Add to the script content
    scriptContent += 'var anotherLongObscureVariableName = "bar";\n';

    function insertNewInfo() {
        jQuery('#my_globals').html(scriptContent);
    };

    insertNewInfo();
});

执行jsNumberOne.js时，#my_globals更改为：

<script type="text/javascript" id="my_globals">
var longAndObscureVariableName = "foo";
var anotherLongAndObscureVariableName = "bar";
</script>

Javascript文件jsFileNumberTwo.js包含以下代码，试图找出anotherLongAndObscureVariableName的值：

jQuery(document).ready(function($) {
    console.log('longAndObscureVariableName'); // log displays "foo"
    console.log('anotherLongAndObscureVariableName'); // log displays "Uncaught ReferenceError: anotherLongAndObscureVariableName is not defined"
    console.log('window.anotherLongAndObscureVariableName'); // log displays "undefined"
    setTimeout(function(){
        console.log(window.anotherLongAndObscureVariableName);
    },2000); // log still displays "undefined"
});

我无法从jsFileNumberTwo.js中检索anotherLongAndObscureVariableName，即使我以为我是通过将其放入HTML文档的开头将其添加到全局范围中的。

这是范围问题吗？这是定时/排序问题吗？我认为jsFileNumberTwo.js在执行jsFileNumberOne.js之前可能正在访问头内容，但是即使添加了setTimeout函数，我仍然会得到“未定义”的信息。

到底是怎么回事？我该如何进行这项工作？

最佳答案

脚本从上到下运行。因此，第二个脚本修改了第一个脚本，该脚本已经运行并且不会再次运行，因此实际上无效。

此外，您应该将内容放在窗口中以创建全局变量。

所以更换

scriptContent += 'var anotherLongObscureVariableName = "bar";\n';

function insertNewInfo() {
    jQuery('#my_globals').html(scriptContent);
};

insertNewInfo();

与

window.anotherLongAndObscureVariableName = "bar";

，

var longAndObscureVariableName = "foo";

与

window.longAndObscureVariableName = "foo";