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 全域性物件僅儲存真正的全域性變數。不應將非全域性變數儲存在全域性物件中。否則，可能會在專案中造成衝突。

列印頁面