JavaScript - 全局对象

JavaScript中的全局对象

JavaScript 的全局对象允许你访问在全局作用域中定义的变量、函数、对象等，并且在代码的任何地方都可以访问。

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

'globalThis' 已在 ECMAScript 2020 中引入，它作为全局对象适用于大多数浏览器和运行时环境。

语法

我们可以遵循以下语法使用全局对象来访问 JavaScript 代码中任何地方都可用的变量。

var a = 10;
let b = window.a; // Accessing the global variable in the browser

在上述语法中，变量 '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 对象来访问它们。

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

window 对象的 JavaScript 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 全局对象仅存储真正的全局变量。不应将非全局变量存储在全局对象中。否则，可能会在项目中造成冲突。

打印页面