全局变量怎么赋值js

全局变量在JavaScript中的赋值可以通过声明变量并在全局作用域中进行赋值、使用全局对象（如window或globalThis）进行赋值、在函数外部直接声明变量。其中最常用的方法是直接在全局作用域中声明和赋值变量。下面详细解释这三种方法中的一种：使用全局对象进行赋值。

在浏览器环境中，window对象是全局对象，可以通过window对象来创建和访问全局变量。例如，window.myGlobalVar = 10; 就可以创建一个全局变量 myGlobalVar 并赋值为10。这个变量可以在脚本的任何地方访问和修改。这种方法的优势在于它可以明确地表示变量是全局的，避免了一些潜在的作用域问题。

一、声明和赋值全局变量

1.1、在全局作用域中声明变量

JavaScript中最常见的方式是直接在全局作用域中声明变量。这种方式的变量可以在任何地方访问。

var globalVar = 'This is a global variable';
let anotherGlobalVar = 42;
const CONSTANT_GLOBAL_VAR = 'constant';

使用var, let, 和 const声明的变量都可以在全局作用域中创建全局变量。然而，它们在作用域和重定义方面有所不同：

var：可以在同一作用域内重新定义。
let和const：不能在同一作用域内重新定义。

1.2、使用全局对象赋值变量

在浏览器环境中，全局对象是window，在Node.js环境中，全局对象是global。使用全局对象可以明确表示这是一个全局变量。

window.globalVar = 'This is a global variable';
global.anotherGlobalVar = 42;

在现代JavaScript中，可以使用globalThis来跨环境访问全局对象：

globalThis.globalVar = 'This is a global variable';

二、使用全局对象的优点和细节

2.1、避免作用域冲突

使用全局对象赋值变量可以避免在不同作用域中出现同名变量的冲突。

function exampleFunction() {
    var localVar = 'This is a local variable';
    window.globalVar = 'This is a global variable';
    console.log(localVar); // Outputs: This is a local variable
    console.log(window.globalVar); // Outputs: This is a global variable
}
exampleFunction();
console.log(globalVar); // Outputs: This is a global variable

2.2、跨文件共享变量

在大型项目中，全局变量可以在不同的JavaScript文件之间共享。只要这些文件被加载到同一个HTML页面中，它们就可以访问和修改同一个全局变量。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Global Variables Example</title>
    <script src="file1.js"></script>
    <script src="file2.js"></script>
</head>
<body>
    <script>
        console.log(globalVar); // Outputs: File 1 Global Variable
    </script>
</body>
</html>

// file1.js
window.globalVar = 'File 1 Global Variable';

// file2.js
console.log(globalVar); // Outputs: File 1 Global Variable
window.globalVar = 'File 2 Global Variable';

三、使用全局变量的注意事项

3.1、避免污染全局作用域

全局变量的使用虽然方便，但在大型项目中容易造成全局命名空间的污染，从而导致难以维护的代码。因此，尽量减少全局变量的使用。

3.2、使用模块化编程

现代JavaScript中，模块化编程是一种更好的管理全局状态的方法。通过模块导出和导入，可以更好地控制变量的作用域和生命周期。

// module1.js
export const globalVar = 'Module Global Variable';
// module2.js
import { globalVar } from './module1.js';
console.log(globalVar); // Outputs: Module Global Variable

四、示例代码

以下是一个完整的示例，展示了如何在全局作用域中声明和使用全局变量，以及如何使用全局对象。

<!DOCTYPE html>
<html>
<head>
    <title>Global Variables Example</title>
    <script>
        // 在全局作用域中声明变量
        var globalVar1 = 'This is a global variable declared with var';
        let globalVar2 = 'This is a global variable declared with let';
        const GLOBAL_CONST = 'This is a global constant';
        // 使用全局对象window声明变量
        window.globalVar3 = 'This is a global variable declared with window';
    </script>
    <script>
        // 访问全局变量
        console.log(globalVar1); // Outputs: This is a global variable declared with var
        console.log(globalVar2); // Outputs: This is a global variable declared with let
        console.log(GLOBAL_CONST); // Outputs: This is a global constant
        console.log(window.globalVar3); // Outputs: This is a global variable declared with window
        // 修改全局变量
        globalVar1 = 'Modified global variable';
        console.log(globalVar1); // Outputs: Modified global variable
    </script>
</head>
<body>
</body>
</html>

通过上面的内容，我们详细介绍了如何在JavaScript中声明和赋值全局变量，包括在全局作用域中直接声明变量和使用全局对象进行赋值的方法，并通过示例代码进一步说明了它们的具体应用。同时，我们还强调了在使用全局变量时需要注意避免污染全局作用域，并建议在大型项目中使用模块化编程来更好地管理全局状态。