Javascript 简明教程

JavaScript - Global Variables

JavaScript Global Variables

JavaScript 中的 global variables 是在函数或任何特定代码块之外定义的变量。可以从 JavaScript 代码中的任何位置访问它们。所有脚本和函数都可以访问全局变量。

The global variables in JavaScript are the variables that are defined outside of the function or any particular block. They are accessible from anywhere in JavaScript code. All scripts and functions can access the global variables.

可以使用 var、let 或 const 关键字定义全局变量。如果不使用任何 var、let 或 const 关键字定义变量,则该变量会自动成为全局变量。

You can define the global variables using the var, let, or const keyword. The variables defined without using any of the var, let or const keywords automatically becomes global variables.

JavaScript Global Scope

全局变量具有全局范围。因此,在函数或代码块之外声明的变量具有全局范围。可以在所有其他范围内看到或访问 global scope 。在客户端 JavaScript 中,全局范围是执行所有代码的网页。使用 var 关键字声明的全局变量属于 window 对象。

The global variables have global scope. So a variable declared outside of a function or block has global scope. The global scope is visible or accessible in all other scope. In client side JavaScript the global scope is the web page in which all the code is being executed. A global variable declared with var keyword belongs to window object.

var x = 10; // Global Scope
let y = 20; // Global Scope
const z = 30; // Global Scope

在此处,变量 x、y 和 z 在任何函数和代码块之外声明,因此它们具有全局范围,称为全局变量。

Here the variables, x, y and z are declared outside of any function and block, so they have global scope and are called global variable.

Global Variable Examples

让我们使用下面的示例进一步了解全局变量。

Let’s learn more about global variables using the example below.

Example

我们在下面的代码中已经定义了 x,y,和 z 全局变量。你可以看到代码中的任何地方都可以访问变量。

We have defined the x, y, and z global variables in the code below. You can observe that variables can be accessed anywhere inside the code.

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      var x = 10;
      let y = 20;
      const z = 30;
      document.getElementById("output").innerHTML =
	  "x = " + x + "<br>" +
	  "y = " + y + "<br>" +
      "z = " + z;
   </script>
</body>
</html>
x = 10
y = 20
z = 30

Example

在下面的示例中,我们已经使用 var 和 let 关键字定义了变量 a 和 b。你可以看到在函数内部或函数外部都可以访问变量 a 和 b,因为它们是全局变量。

In the example below, we have defined the variables a and b using the var and let keywords. You can see that a and b variables can be accessible inside the function or outside the function as they are global variables.

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      var a = 10;
      let b = 20;
      function test() {
         output.innerHTML += "a -> Inside the function = " + a + "<br>";
         output.innerHTML += "b -> Inside the function = " + b + "<br>";
      }
      test();
      output.innerHTML += "a -> Outside the function = " + a + "<br>";
      output.innerHTML += "b -> Outside the function = " + b + "<br>";
   </script>
</body>
</html>
a -> Inside the function = 10
b -> Inside the function = 20
a -> Outside the function = 10
b -> Outside the function = 20

Automatic Global Variables

当你在代码中的任何地方定义变量而不使用 varletconst 关键字时,变量将自动变成 global variable 并可以在代码中的任何地方访问。

When you define the variables anywhere inside the code without using the var, let, or const keywords, the variable automatically becomes the global variable and can be accessible anywhere inside the code.

Example

在下面的代码中,我们在函数中没有使用任何关键字而定义了变量 'a'。即使我们已经在函数中定义了变量,它依然变成全局变量,因为我们没有使用任何关键字来定义函数。

In the below code, we have defined the variable 'a' without using any keyword inside the function. Even if we have defined the variable in the function, it becomes global as we haven’t used any keyword to define the function.

输出表明,可以在函数内部或外部访问变量 'a'。

The output shows that variable 'a' can be accessible inside or outside the function.

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function test() {
      a = 90;
            output.innerHTML += "a -> Inside the function = " + a + "<br>";
        }
        test();
        output.innerHTML += "a -> Outside the function = " + a + "<br>";
    </script>
</body>
</html>
a -> Inside the function = 90
a -> Outside the function = 90