Javascript 简明教程

JavaScript - Global Object

Global Objects in JavaScript

JavaScript global object 让你可以访问在全局作用域内定义的变量、函数、对象等，在代码中的任何地方都可以使用。

在浏览器中，一个全局对象被命名为 window ，在 Node.js 中，全局对象被命名为 global 。不过，全局对象在不同的运行时环境中可能有不同的名称。

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

Syntax

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

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

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

Examples

Example: Accessing global variables through the global object

在下面的例子中，我们使用 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

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

Example: Accessing the global function through the global object

在下面的例子中，我们在全局作用域中定义了 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 对象中。

我们来看一下下面的示例。

Example: Making variable globally accessible from the function scope

在下面的例子中，我们把 addition 属性添加到 window 对象（在 sum() 函数的主体中），让它到处可用。

然后，我们使用 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

JavaScript global object 本身包含多种方法，比如 isNaN()、decodeURI() 等。你可以使用类似于浏览器中的窗口和 Node.js 中全局对象的全局对象来访问它们。

Example: Accessing pre-defined methods of the global object

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

Using the JavaScript Global Object for Polyfills

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

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

Example

在下面的代码中，我们检查 'promise' 属性是否存在于 window 对象中。如果是，说明浏览器支持 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 全局对象仅存储真正的全局变量。不应将非全局变量存储在全局对象中。否则，它可能会在项目中创建冲突。