Question

我无法理解Javascript中的作用域是如何工作的例如。

<html>  
  <head>  
    <script>var userName = "George";  </script>
  </head>
  <body>  
     ......  
     <script>  
        document.write('Name = ' + userName);  
     </script>  
  </body>   
</html>

变量userName在脚本的另一个“部分”中声明。据我所知，浏览器呈现html并按照它找到的顺序执行代码。那么第二个脚本标记中的userName如何解析？它是否适用于全球环境？我之前宣布的是全球性的吗？我注意到如果我这样做会发生同样的事情：

<html>  
  <head>  
    <script>  
          do {  
              var userName = "George";   
              //bla  
          } while (someCondition);  
    </script>
  </head>
  <body>  
     ......  
     <script>  
        document.write('Name = ' + userName);  
     </script>  
  </body>   
</html>

即使在userName内声明{}，它仍然在第二个脚本中解析。怎么可能？

Answer 1

Javascript范围是按功能划分的（ECMAScript 6添加了一个引用块范围的let语句）。在函数定义或var块内使用function或let未声明的所有内容都在全局范围内。只有一个全局范围，由所有<script>块共享。 do块不会引入新范围，因此在后面document.write()中可以看到声明的变量。

Answer 2

示例中唯一的范围是全局范围。不同的脚本块是DOM元素，没有自己的javascript范围

javascript范围

This is a great reference。

Answer 3

在这种情况下，您需要在全局userName范围内创建变量window。将第一个示例加载到浏览器后，打开JavaScript控制台并执行console.log(window)。您应该看到window对象被转储到控制台中。打开它，你会找到关键＆＃34; userName＆＃34;，其值为＃34; George＆＃34;。

当您下次从userName中引用变量document.write时，您将从全局范围引用它。

如果你编写了一个函数，然后从document.write()调用它，你将不再在window范围内看到它，只要你将它声明为函数的局部变量即可使用var关键字。

<html>
  <head>
    <script>
    function foo() {
        var userName = "George";
        return 'Name = ' + userName;
    }
    </script>
  </head>
  <body>
     ......
     <script>
        document.write(foo());
     </script>
  </body>
</html>

Javascript中的作用域如何工作？

3 个答案: