您现在位置> 首页 > 编程 > JS > JavaScript
← JavaScript变量 JavaScript数据类型 →

JavaScript全局变量

著
原创 2026-03-11 JavaScript 已有人查阅

JavaScript全局变量深度解析：用法、风险与实战技巧

全局变量是JavaScript中一个既基础又容易让人踩坑的概念。全局变量就是定义在所有函数和代码块外部的变量，在脚本的任何位置都能访问到。在代码号学习编程的过程中，理解全局变量能帮你写出更健壮的代码。

全局变量到底是什么？

全局变量就像公共广场，谁都能去，谁都能往里面放东西。它们定义在代码的最外层，不属于任何函数或代码块，因此整个程序都能访问和修改它们。

// 这三个都是全局变量
let globalSiteName = "代码号";
var globalVisitorCount = 1000;
const GLOBAL_API_KEY = "abc123xyz";

function showGlobalInfo() {
    // 函数内部可以直接访问全局变量
    console.log(globalSiteName);
    console.log(globalVisitorCount);
}

声明全局变量的正确方式

在JavaScript里声明全局变量很简单，只要在函数或代码块外面用let、var或const声明就行。

// 文件最外层声明的都是全局变量
let userName = "张三";          // 全局变量
var userAge = 25;               // 全局变量
const USER_EMAIL = "zhangsan@example.com"; // 全局常量

function testFunction() {
    let localVar = "局部变量";   // 这个是局部变量
    console.log(userName);       // 可以访问全局变量
}

我在编程教学中发现，很多初学者容易把全局变量和局部变量搞混，记住这个判断标准就行：不在任何花括号{}里声明的变量，就是全局变量。

全局变量的实际应用

示例1：全局计数器

// 全局访问计数器
let pageVisitCount = 0;

function visitPage() {
    pageVisitCount += 1;
    console.log(`当前页面访问次数：${pageVisitCount}`);
}

function showVisitStats() {
    console.log(`总访问量：${pageVisitCount}`);
}

visitPage(); // 输出：当前页面访问次数：1
visitPage(); // 输出：当前页面访问次数：2
showVisitStats(); // 输出：总访问量：2

示例2：全局主题配置

// 全局主题设置
let siteTheme = "light"; // 可选值：light, dark
let fontSize = 16;       // 单位：像素

function applyTheme() {
    console.log(`当前主题：${siteTheme}，字体大小：${fontSize}px`);
    // 这里可以写具体的样式应用逻辑
}

function switchTheme() {
    if (siteTheme === "light") {
        siteTheme = "dark";
        fontSize = 14; // 深色模式下字体调小一点
    } else {
        siteTheme = "light";
        fontSize = 16;
    }
    applyTheme();
}

applyTheme();    // 输出：当前主题：light，字体大小：16px
switchTheme();   // 输出：当前主题：dark，字体大小：14px

示例3：多个脚本共享数据

// script1.js
let appName = "代码号学习平台";
let appVersion = "1.0.0";

// script2.js（可以访问script1.js中定义的全局变量）
function showAppInfo() {
    console.log(`应用名称：${appName}`);
    console.log(`版本号：${appVersion}`);
}

// script3.js（不小心覆盖了全局变量）
let appName = "另一个应用"; // 这里出问题了，覆盖了之前的appName
console.log(appName); // 输出：另一个应用

一个例子暴露了全局变量的典型问题——容易被意外覆盖。

自动全局变量：最容易踩的坑

在JavaScript中，如果你给一个未声明的变量赋值，它会自动变成全局变量。这是语言设计上的一个坑，也是我经常提醒代码号的学员们注意的地方。

function dangerousFunction() {
    // 忘记用let/var/const声明
    autoGlobal = "我是自动全局变量";
    console.log("函数内部：", autoGlobal);
}

dangerousFunction();
console.log("函数外部：", autoGlobal); // 居然也能访问到！

// 这会造成难以追踪的bug
function anotherFunction() {
    autoGlobal = "被修改了"; // 不小心修改了全局变量
}

anotherFunction();
console.log(autoGlobal); // 输出：被修改了

经验之谈：永远记得用let、const或var声明变量。我在源码审核时，经常看到因为漏写声明关键字导致的诡异bug，排查起来特别费劲。

全局变量的优点

虽然全局变量问题不少，但合理使用也有它的价值：

1. 数据共享方便

// 用户登录状态，多个地方需要用到
let isUserLoggedIn = false;
let currentUser = null;

function login(username) {
    isUserLoggedIn = true;
    currentUser = username;
    updateUI();
}

function logout() {
    isUserLoggedIn = false;
    currentUser = null;
    updateUI();
}

function updateUI() {
    if (isUserLoggedIn) {
        console.log(`欢迎回来，${currentUser}`);
    } else {
        console.log("请先登录");
    }
}

login("张三"); // 输出：欢迎回来，张三

2. 存储常量值

// 全局常量，整个应用通用
const SITE_NAME = "代码号";
const BASE_URL = "https://www.ebingou.cn/";
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
const SUPPORTED_LANGUAGES = ["zh-CN", "en-US", "ja-JP"];

function checkFileSize(file) {
    if (file.size > MAX_FILE_SIZE) {
        console.log(`文件不能超过${MAX_FILE_SIZE / 1024 / 1024}MB`);
        return false;
    }
    return true;
}

全局变量的风险与局限

1. 命名空间污染

这是全局变量的问题。随着项目变大，全局变量越来越多，很容易命名冲突。

// 第三方库1.js
let utils = {
    formatDate: function() { console.log("库1的日期格式化"); }
};

// 第三方库2.js
let utils = {
    formatString: function() { console.log("库2的字符串格式化"); }
};

// 后面的会覆盖前面的，导致库1的功能失效
utils.formatDate(); // 报错，formatDate不存在了

2. 代码维护困难

全局变量让代码的依赖关系变得不清晰，修改一个地方影响很多地方。

let globalData = { count: 0 };

function func1() {
    globalData.count += 1;
    console.log("func1:", globalData.count);
}

function func2() {
    globalData.count *= 2;
    console.log("func2:", globalData.count);
}

function func3() {
    globalData.count -= 5;
    console.log("func3:", globalData.count);
}

// 随便调用一下，globalData被改了三次
func1(); // 输出：func1: 1
func2(); // 输出：func2: 2  
func3(); // 输出：func3: -3
// 追踪globalData的变化变得很困难

3. 安全性问题

全局变量容易被恶意代码篡改。

// 敏感信息不应该放在全局
let userToken = "eyJhbGciOiJIUzI1NiIs..."; // 不应该全局暴露

// 恶意脚本可以轻松获取
console.log(window.userToken); // 可以直接访问

// 更好的做法：用闭包或模块封装
const UserModule = (function() {
    let token = "敏感token";
    return {
        getToken: function() { return token; },
        setToken: function(newToken) { token = newToken; }
    };
})();

本节课程知识要点

基于这些年的开发经验，我总结了几条全局变量的使用原则：

能用局部就别用全局

// 不推荐
let result = 0;
function calculate(a, b) {
    result = a + b;
}
function showResult() {
    console.log(result);
}

// 推荐：通过参数和返回值传递数据
function calculate(a, b) {
    return a + b;
}
function showResult(value) {
    console.log(value);
}
let result = calculate(3, 5);
showResult(result);

全局变量统一命名前缀

如果确实需要用全局变量，加个统一前缀避免冲突。

// 给全局变量加前缀
let app_config = { theme: "dark" };
let app_userInfo = { name: "张三" };
let app_visitorCount = 100;

// 或者用一个全局对象封装
let CodeSite = {
    config: { theme: "dark" },
    userInfo: { name: "张三" },
    visitorCount: 100
};

使用模块化替代全局变量

现代JavaScript开发应该用模块化来替代全局变量。

// module1.js (使用ES6模块)
export let sharedData = { count: 0 };
export function increment() {
    sharedData.count++;
}

// module2.js
import { sharedData, increment } from './module1.js';
increment();
console.log(sharedData.count); // 输出：1

常量用const声明并大写

// 全局常量用大写命名
const API_TIMEOUT = 5000;
const DEFAULT_PAGE_SIZE = 20;
const ERROR_MESSAGES = {
    NETWORK: "网络错误",
    TIMEOUT: "请求超时",
    SERVER: "服务器错误"
};

实际开发中的全局变量管理

在教学和实际项目中，我推荐用以下方式管理全局变量：

// 1. 用命名空间对象
window.CodeSite = window.CodeSite || {};
CodeSite.settings = {
    theme: 'light',
    language: 'zh-CN'
};
CodeSite.user = {
    name: null,
    isLogin: false
};

// 2. 用模块模式封装
const UserManager = (function() {
    // 私有变量，外部无法直接访问
    let _token = null;
    let _userInfo = null;
    
    // 返回公共接口
    return {
        setToken: function(token) {
            _token = token;
        },
        getUserInfo: function() {
            return _userInfo;
        }
    };
})();

// 3. 用ES6模块（现代项目推荐）
// config.js
export const SITE_CONFIG = {
    name: '代码号',
    url: 'https://www.ebingou.cn/'
};

全局变量是一把双刃剑。用得好，可以简化数据共享；用不好，会造成命名冲突、代码混乱、难以维护。我的建议是：

  • 默认都用局部变量，只有真正需要全局共享的数据才用全局

  • 全局变量统一管理，加前缀或用对象封装

  • 现代项目优先用ES6模块替代全局变量

  • 避免自动全局变量，声明变量时别漏掉关键字

  • 常量用const声明并用大写命名

本文标签：
← JavaScript变量 JavaScript数据类型 →

感谢您的认可和支持

微信支付二维码 - 长按识别

微信

支付宝二维码 - 长按识别

支付宝

持续输出优质内容需要动力，您的每一个打赏都是深夜码字时的温暖咖啡☕
分享笔记 （共有 篇笔记）
验证码：
微信公众号