javascript - 为什么变量在文档就绪标签之外显示为未定义

Question

我在学习 jQuery 和 Javascript 时观察到一种奇怪的行为。当我调用 $(document).ready 内部定义的变量时，从这些标记外部它看起来未定义，即使我将其定义为全局变量， 例如:

$(document).ready(function() {
   myVar = "test";
});
alert(typeof(myVar));
//Results "undefined"

如果我在 document.ready 标签内调用相同的变量，它会按预期工作

$(document).ready(function() {
   myVar = "test";
   alert(typeof(myVar));
   //Results "String"
});

即使使用窗口前缀，结果也是相同的。

$(document).ready(function() {
   window.myVar = "test";
});
alert(typeof(window.myVar));
//Results "undefined"

我了解变量范围，但为什么即使是全局变量也不能以这种方式工作。我很困惑。

Answer 1

“就绪”处理程序中的代码在 DOM 完全构建之前不会运行。处理程序外部的代码一旦遇到就会运行。因此，您的 alert() 在处理程序中的代码运行之前运行，因此结果非常有意义:全局变量尚未初始化，因此其值为 未定义。

通过将 alert()(或者更好的是 console.log())调用放入“就绪”处理程序中，您可以清楚地看到执行顺序:

$(document).ready(function() {
  console.log("In the 'ready' handler");
});
console.log("Outside the 'ready' handler");

运行时，您将首先看到记录的“外部”消息。