全局变量是否在文档准备好之前实例化？答案

【问题标题】：Are global variables instantiated before document ready?全局变量是否在文档准备好之前实例化？
【发布时间】：2013-08-06 14:02:27
【问题描述】：

如果我在脚本标签之后声明了一个全局变量，在文档就绪中调用的函数中访问这个变量是否安全？

<script type="text/javascript">
var bar = "foo";

$(document).ready(function(){

callBar()

});

function callBar(){
alert(bar);
// will I crash?
}
</script>

如果我这样做会怎样：

<script type="text/javascript">

$(document).ready(function(){

callBar()

});

function callBar(){
alert(bar);
// will I crash?
}

var bar = "foo";
</script>

【问题讨论】：

当你尝试这个时发生了什么？它可能因不同原因而崩溃...
我还没试过。我想它会起作用，但我想知道它是否对所有浏览器都安全。
但这不是你要问的。
是什么让您认为它行不通？你基本上是在问bar 是否在var bar = 'foo'; alert(bar); 中可用。
您甚至在安装阅读器侦听器之前就已声明和初始化变量。之前怎么会火？

标签： javascript jquery

【解决方案1】：

在文档就绪中调用的函数中访问此变量是否安全

是的。该变量被声明（added as a binding 到执行上下文的变量环境）作为执行该脚本的一个非常早的步骤。（请注意，在解析期间到达赋值语句之前，它实际上并没有被赋值。这通常称为“提升”，但不会影响您的示例）。

由于脚本执行是同步的（浏览器将停止渲染，直到完成解析和执行脚本元素），DOM 就绪事件在执行完成之前不会触发。

编辑 （问题已更新）

如果我这样做会怎样......

如上所述，变量声明将被提升到它出现的范围的顶部。您的第二个示例有效解释如下：

// Declarations (both function and variable) are hoisted
var bar;
function callBar() {
    alert(bar);
}

$(document).ready(function () {
    callBar();
});

bar = "foo";

因此，这些声明在整个范围内都可用。 ready 事件处理程序将在一段时间后执行，并且可以访问这些声明（因为它们出现在与它相同的范围内）。

【讨论】：

感谢解释代码：我不知道会是这样。
答案中没有 100% 清楚的是，警报将返回“未定义”，这意味着 $(document).ready 在解释所有全局代码之前运行。见jsfiddle.net/GregWoods/LnJEe

【解决方案2】：

由于bar 是在全局范围内声明的，我希望它在调用callBar 之前被初始化。

还要考虑 JavaScript 具有函数提升功能，它允许在适当范围内引用变量，即使它们是稍后在程序中定义的（尽管这里不是这种情况）。来自 Variable Scope 上的 MDN 文档：

关于 JavaScript 中变量的另一个不同寻常的事情是，您可以引用稍后声明的变量，而不会出现异常。这个概念被称为提升； JavaScript 中的变量在某种意义上被“提升”或提升到函数或语句的顶部。但是，尚未初始化的变量将返回 undefined 值。

【讨论】：

【解决方案3】：

是的，甚至在“关闭”标签之前。

'$(document).ready(function(){})' 构造中的函数在所有页面加载后触发。

【讨论】：

它实际上是在 DOM 准备就绪时触发，而不是在页面中的所有内容加载时触发。 window.onload 确实如此。想想图片，这些可能需要一段时间才能加载，但 jQuery 在它们完成加载之前就已经触发了。

【解决方案4】：

使用全局变量是safe。

但是在 Jquery 中使用全局变量时必须小心

使用Window.bar="foo" 而不是var bar="foo" 获取更多信息Best ways to use Global Variables in Jquery

我用过全局变量，真的很有用..

【讨论】：