JavaScript - 全局对象

JavaScript 中的全局对象

JavaScript 中的全局对象允许您访问在全局作用域中定义且在代码中随处可用的变量、函数、对象等。

在浏览器中，全局对象名为"window"，在 Node.js 中，全局对象名为"global"。但是，全局对象在不同的​​运行时环境中可能具有不同的名称。

ECMAScript 2020 中引入了"globalThis"，它可以作为全局对象在大多数浏览器和运行时环境中使用。

语法

我们可以按照以下语法使用全局对象访问 JavaScript 代码中各处可用的变量。

var a = 10;
let b = window.a; // 在浏览器中访问全局变量

在上述语法中，变量"a"是一个全局变量，因为它在全局作用域中使用 var 关键字定义。

示例

示例:通过全局对象访问全局变量

在下面的示例中，我们使用 var 关键字在全局作用域中定义了"name"变量。之后，我们使用 window(全局)对象访问 name 变量。

<html>
<body>
   <div id = "output">The company name is: </div>
   <script>
      var name = "Tutorialspoint";
      let company = window.name;
      document.getElementById("output").innerHTML += company;
   </script>
</body>
</html>

输出

The company name is: Tutorialspoint

同样，如果您在全局作用域中定义函数，则可以使用全局对象在任何地方访问它。

示例:通过全局对象访问全局函数

在下面的示例中，我们在全局作用域中定义了 sum() 函数。之后，我们定义了包含 num1、num2 和 sum 属性的 obj 对象。sum 属性使用 sum() 函数返回的值进行初始化。我们使用 window 对象调用全局 sum() 函数。

因此，您可以使用全局对象在 JavaScript 代码中的任何位置访问全局变量和实例。

<html>
<body>
   <p id = "output"> </p>
   <script>
      function sum(a, b) {
         return a + b;
      }
        
      const obj = {
         num1: 10,
         num2: 20,
         sum: window.sum(10, 20),
      }
        
      document.getElementById("output").innerHTML += "The object is: " + JSON.stringify(obj);
   </script>
</body>
</html>

输出

The object is: {"num1":10,"num2":20,"sum":30}

如果希望在本地作用域中全局访问变量值，可以直接将值作为属性添加到"window"对象中。

我们来看下面的例子。

示例:使变量在函数作用域中全局访问

在下面的例子中，我们在 sum() 函数体中的 window 对象中添加了"addition"属性，使其在任何地方都可用。

之后，我们使用"window"对象访问"addition"属性。

<html>
<body>
   <div id = "output"> </div>
   <script>
    
      function sum(a, b) {
         window.addition = a + b;
      }
      sum(20, 30);
      document.getElementById("output").innerHTML = "The sum is: " + window.addition;

   </script>
</body>
</html>

输出

The sum is: 50

您也可以不使用全局对象(例如 window 对象)来访问全局变量，因为 JavaScript 脚本引擎默认将脚本赋值给该对象。但是，您可以使用全局对象将变量或表达式设为全局变量。

JavaScript 全局对象本身包含各种方法，例如 isNaN()、decodeURI() 等。您可以使用全局对象(例如浏览器中的 window 和 Node.js 中的 global 对象)来访问它们。

示例:访问全局对象的预定义方法

JavaScript window 对象的 isNaN() 方法用于检查传递的参数是否为数字。如果参数是数字，则返回 false。否则，返回 true。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let isNumer = window.isNaN("Hello");
      document.getElementById("output").innerHTML = "Is hello not a number? " + isNumer;
   </script>
</body>
</html>

输出

Is hello not a number? true

使用 JavaScript 全局对象进行 Polyfill 的编写

您可以使用 JavaScript 全局对象检查您的浏览器是否支持特定功能。如果用户的浏览器不支持特定功能，您可以显示相关消息。

查看以下示例，检查用户的浏览器是否支持 Promise。

示例

在下面的代码中，我们检查 window 对象中是否存在 'promise' 属性。如果存在，则表示浏览器支持 Promise，您可以执行该 Promise。否则，您可以打印浏览器不支持 Promise 的消息。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      if (window.Promise) {
         output.innerHTML += "Your browser supports promises";
      } else {
         output.innerHTML += "Your browser doesn't support promises";
      }
   </script>
</body>
</html>

输出

Your browser supports promises

JavaScript 全局对象仅存储真正全局的变量。您不应将非全局变量存储在全局对象中。否则，可能会在您的项目中造成冲突。