js怎么引用全局变量

在JavaScript中引用全局变量的主要方法包括：直接声明、使用window对象、使用globalThis对象。 我们可以使用var、let或const声明全局变量，但要注意它们的作用范围和作用域。使用window对象能确保变量在浏览器环境中是全局的，而globalThis可以在任何JavaScript环境中使用。

直接声明的全局变量可以在任何函数、对象或块级作用域中访问和使用。 例如，声明一个全局变量var myVar = 10;，可以在脚本的任何地方访问myVar。在浏览器中，使用window.myVar也能访问同一个变量。对于更复杂的JavaScript环境，如Node.js，使用globalThis对象可以确保全局变量的访问。

一、全局变量的声明和使用

全局变量是指在整个代码运行期间都可以访问的变量。它们可以在脚本的任何地方被声明和引用。常见的声明全局变量的方法包括使用var、let、const以及window对象。

1. 使用var声明全局变量

在JavaScript中，使用var声明的变量会被提升到函数或全局作用域的顶部。这意味着你可以在声明之前使用这些变量。这种变量声明方式在浏览器环境中会自动添加到window对象中。

var myVar = 10;
function displayVar() {
    console.log(myVar); // 输出: 10
}
displayVar();

2. 使用let和const声明全局变量

let和const是ES6引入的声明变量的方式，它们的作用域是块级作用域。这意味着它们只在声明的块内有效。然而，如果它们在全局范围内声明，它们也会成为全局变量，但不会自动添加到window对象中。

let myLetVar = 20;
const myConstVar = 30;
function displayLetConstVar() {
    console.log(myLetVar); // 输出: 20
    console.log(myConstVar); // 输出: 30
}
displayLetConstVar();

二、使用window对象引用全局变量

在浏览器环境中，window对象代表了浏览器窗口。所有全局变量和函数默认都是window对象的属性。因此，可以通过window对象引用全局变量。

1. 通过window对象访问全局变量

var globalVar = 50;
let globalLetVar = 60;
console.log(window.globalVar); // 输出: 50
console.log(window.globalLetVar); // 输出: undefined

2. 使用window对象声明和访问全局变量

window.newGlobalVar = 70;
function displayWindowGlobalVar() {
    console.log(window.newGlobalVar); // 输出: 70
}
displayWindowGlobalVar();

三、使用globalThis对象引用全局变量

globalThis是一个新的全局对象标准，旨在解决不同JavaScript环境中的全局对象引用问题。在浏览器中，globalThis等同于window，在Node.js中则等同于global。

1. 通过globalThis对象访问全局变量

var myGlobal = 100;
console.log(globalThis.myGlobal); // 输出: 100

2. 使用globalThis对象声明和访问全局变量

globalThis.anotherGlobal = 200;
function displayGlobalThisGlobalVar() {
    console.log(globalThis.anotherGlobal); // 输出: 200
}
displayGlobalThisGlobalVar();

四、在不同环境中引用全局变量

JavaScript可以运行在不同的环境中，如浏览器、Node.js等。每个环境都有其特定的全局对象。在编写跨环境的JavaScript代码时，使用globalThis可以确保全局变量的访问一致性。

1. 浏览器环境中的全局变量

在浏览器中，全局对象是window。使用window对象可以访问所有全局变量和函数。

var browserGlobal = 300;
console.log(window.browserGlobal); // 输出: 300

2. Node.js环境中的全局变量

在Node.js中，全局对象是global。使用global对象可以访问所有全局变量和函数。

global.nodeGlobal = 400;
function displayNodeGlobalVar() {
    console.log(global.nodeGlobal); // 输出: 400
}
displayNodeGlobalVar();

3. 使用globalThis跨环境访问全局变量

globalThis.crossEnvGlobal = 500;
function displayCrossEnvGlobalVar() {
    console.log(globalThis.crossEnvGlobal); // 输出: 500
}
displayCrossEnvGlobalVar();

五、全局变量的作用域和生命周期

全局变量的作用域是整个脚本文件或模块。它们在脚本加载时被创建，并在脚本执行结束后被销毁。因此，在使用全局变量时，需要注意其生命周期和可能的内存泄漏问题。

1. 全局变量的生命周期

全局变量在整个脚本执行期间都存在。它们在脚本开始执行时被创建，并在脚本执行结束后被销毁。

var lifecycleGlobal = 600;
function displayLifecycleGlobalVar() {
    console.log(lifecycleGlobal); // 输出: 600
}
displayLifecycleGlobalVar();
// 脚本执行结束后，lifecycleGlobal变量被销毁

2. 避免全局变量的滥用

虽然全局变量在某些情况下非常方便，但过多使用全局变量会导致命名冲突和难以调试的问题。建议在实际开发中尽量减少全局变量的使用，使用局部变量、模块化编程等方式替代全局变量。

function myFunction() {
    var localVar = 700; // 局部变量
    console.log(localVar); // 输出: 700
}
myFunction();
console.log(localVar); // 报错: localVar is not defined

六、使用模块化编程管理全局变量

模块化编程是一种将代码分割成独立模块的编程范式。通过模块化编程，可以减少全局变量的使用，提升代码的可维护性和可读性。在现代JavaScript中，模块化编程可以通过ES6模块或CommonJS模块实现。

1. 使用ES6模块管理全局变量

ES6模块通过export和import关键字实现模块化。可以将变量和函数导出到其他模块中使用，从而避免全局变量的滥用。

// module.js
export var moduleVar = 800;
// main.js
import { moduleVar } from './module.js';
console.log(moduleVar); // 输出: 800

2. 使用CommonJS模块管理全局变量

CommonJS模块是Node.js中使用的模块化方案。通过module.exports和require实现模块化。

// module.js
module.exports = {
    moduleVar: 900
};
// main.js
const { moduleVar } = require('./module.js');
console.log(moduleVar); // 输出: 900

七、总结

在JavaScript中，引用全局变量的方法多种多样，包括直接声明、使用window对象和globalThis对象等。不同的方法适用于不同的环境和场景。在实际开发中，建议尽量减少全局变量的使用，通过模块化编程和局部变量管理代码，从而提升代码的可维护性和可读性。此外，在项目团队管理中，可以使用专业的项目管理工具如研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队协作效率和项目管理水平。