Javascript中的作用域是如何工作的

How does scope in Javascript work?

本文关键字：工作 何工作 作用域 Javascript      更新时间：2023-09-26

我不明白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在{}中声明，它仍然在第二个脚本中解析。这怎么可能呢?

Javascript作用域是按函数定义的(ECMAScript 6添加了let语句，也引入了块作用域)。在函数定义或let块中没有使用var或function声明的所有内容都在全局作用域中。只有一个全局作用域，由所有<script>块共享。do块没有引入新的作用域，因此在这里声明的变量在后面的document.write()块中是可见的。

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

在本例中，您将在全局window作用域中创建变量userName。将第一个示例加载到浏览器后，打开JavaScript控制台并执行console.log(window)操作。您应该看到将window对象转储到控制台中。打开它，你会发现键"userName"，值"George"。

当你下次从document.write中引用变量userName时，你是从全局作用域引用它的。

如果您编写了一个函数，然后从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>
相关文章：