为什么 document.ready 在这种情况下不起作用？答案

【问题标题】：Why doesn't document.ready work in this case?为什么 document.ready 在这种情况下不起作用？
【发布时间】：2017-11-26 11:47:12
【问题描述】：

如果我使用这个：

<script>
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
        }
    });
</script

我在控制台中看到一个错误：

未捕获的 ReferenceError：未定义 createTicketInfo

但是如果我删除 document.ready:

<script>    
    if (window.localStorage.getItem('createTicket')) {
        var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
    }   
</script>

一切正常：

为什么？

【问题讨论】：

处理变量作用域的相关问题：stackoverflow.com/questions/11152977/…

标签： javascript jquery

【解决方案1】：

这是因为，在第一个示例中，createTicketInfo 仅在 ready 的回调（函数）中可见。

function test() {
  var boo = "Hi! I'm boo.";
  // ...
  console.log(boo); // visible here
}
test();

console.log(boo); // not visible here (even if we call test first)

在第二个示例中，createTicketInfo 没有包装在函数中，因此它是全局的（随处可见）。

if(true) {
  if(true) {
    if(true) {
      var foo = "Hi! I'm foo.";
      // ...
      console.log(foo); // visible here
    }
  }
}

console.log(foo); // visible here too (because javascript doesn't have block scopes)

始终牢记 javascript 具有函数作用域，但没有块作用域。

注意：正如@nnnnnn 在下面的评论中提到的，ECMAScript 6 引入了一种使用 let 或 const 声明变量的新方法，它尊重块作用域。所以：

if(true) {
  let zoo = "Hi! I'm zoo.";
  // ...
  console.log(zoo); // only visible inside this block
}

console.log(zoo); // not visible here

【讨论】：

"但不是块作用域。" - 用于使用 var 创建的变量。 let 和 const 是另一回事。
@nnnnnn 我会将其添加为注释。 let 和 const 仍然没有那么受欢迎。

【解决方案2】：

代码的另一部分有其他问题。

看看我创建的这个小提琴。

它准确地读取和写入值。完全一样的代码：

https://jsfiddle.net/nxka5h7y/2/

<head>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    window.localStorage.setItem('createTicket', '{"a":"1"}');
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo =     JSON.parse(window.localStorage.getItem('createTicket'));
            console.log(createTicketInfo);
        } else { console.log("none"); }
    });
</script>
</head>
<body>
<script>
</body>

我唯一添加的，实际上是在 localStorage 中设置 createTicket 项，只是为了确保 document/ready 中的“if”语句能够通过。

我的半逻辑猜测是，存储在 createTicket 中的 JSON 格式不正确，具体取决于它的设置方式（在您的示例中未显示）。我不认为这是问题所在。但是，事实是您的示例在 jFiddle 中产生了准确的结果。在您的代码中查看其他地方。比如，您实际设置 createTicket 的部分。或者你的 jQuery 确实包含在内，或者类似的傻事。

【讨论】：

OP 正在尝试通过在控制台中键入变量的值来测试它。
那么它在不同的范围内。