js 全局变量|极客笔记

js 全局变量

JavaScript（简称JS）是一种广泛应用于网页开发的编程语言，它有着简单易学的特点，同时也非常灵活多样。在JavaScript中，全局变量是一种在代码的任何地方都可以访问和修改的变量，它具有全局作用域。

什么是全局变量

全局变量指的是在整个JavaScript程序中都可以访问和修改的变量。通常情况下，在函数内部声明的变量只能在该函数内部访问，称之为局部变量。而在函数外部声明的变量则是全局变量，全局变量存在于整个程序的生命周期中。

在JavaScript中，如果在声明变量时没有使用关键字var、let或const时，该变量会被自动提升为全局变量。但我们应该尽量避免使用全局变量，因为全局变量容易造成命名冲突，影响代码的可维护性和可读性。

如何声明和使用全局变量

在JavaScript中，我们可以通过以下几种方式声明和使用全局变量：

1. 使用var关键字

var globalVar = 'I am a global variable';

function testGlobalVar() {
    console.log(globalVar);
}

testGlobalVar(); // 输出：I am a global variable

在上面的代码中，我们使用var关键字声明了一个全局变量globalVar，并在函数testGlobalVar中访问了该全局变量。

2. 直接声明在全局环境中

globalVar2 = 'I am another global variable';

function testGlobalVar2() {
    console.log(globalVar2);
}

testGlobalVar2(); // 输出：I am another global variable

在上面的代码中，我们直接在全局环境中声明了一个全局变量globalVar2，同样可以在函数testGlobalVar2中进行访问。

3. 使用window对象

在浏览器环境中，所有的全局变量都会成为window对象的属性，我们也可以通过window对象来声明和访问全局变量。

window.globalVar3 = 'I am the third global variable';

function testGlobalVar3() {
    console.log(window.globalVar3);
}

testGlobalVar3(); // 输出：I am the third global variable

4. 使用let和const关键字

在ES6之后，引入了let和const关键字用于声明变量。使用let或const声明的变量具有块级作用域，但依然可以在全局环境中声明全局变量。

let globalLetVar = 'I am a global let variable';
const globalConstVar = 'I am a global const variable';

function testGlobalLetVar() {
    console.log(globalLetVar);
}

function testGlobalConstVar() {
    console.log(globalConstVar);
}

testGlobalLetVar(); // 输出：I am a global let variable
testGlobalConstVar(); // 输出：I am a global const variable

全局变量的问题与注意事项

虽然全局变量在开发过程中比较方便，但过多地使用全局变量会带来一些问题，例如：

命名冲突：全局变量可能与其他库或框架中的全局变量重名，导致意外的变量覆盖和数据混乱。
可维护性差：全局变量会使得代码难以维护和扩展，因为它们存在于整个程序的生命周期中，任何地方都可以对其进行修改。
性能问题：全局变量会使得代码的内存占用过高，导致性能下降，而且在JavaScript中，全局变量查找速度较慢。

因此，在开发过程中，我们应该尽量避免使用全局变量，可以通过以下几种方式来减少全局变量的使用：

将全局变量封装在对象中，减少全局变量的数量。

var myGlobalObject = {
    globalVar1: 'I am a global variable in object',
    globalVar2: 'I am another global variable in object'
}

使用立即执行函数（IIFE）来创建模块化的代码，避免全局变量冲突。

(function() {
    var privateVar = 'I am a private variable';

    window.module1 = {
        // 暴露给外部的方法和变量
    };
})();

使用ES6的模块化语法来管理代码，通过export和import来控制变量的作用域。

// module1.js
export const moduleVar = 'I am a module variable';

// main.js
import { moduleVar } from 'module1.js';
console.log(moduleVar); // 输出：I am a module variable