JavaScript 中定义全局变量的教程

以下是 JavaScript 中定义全局变量的 5 种核心方法及最佳实践，结合不同场景和注意事项：

---

一、基础定义方式

1. 隐式全局声明（不推荐）

// 直接赋值（未使用声明关键字）
myGlobal = "value";

• 特点 ：自动挂载到全局对象（如浏览器中的 window）

• 缺点：易造成命名冲突，严格模式下会报错

• 适用场景：临时调试或旧代码兼容

2. 使用 var关键字

// 全局作用域声明
var globalVar = "I'm a global variable";

• 特点：

  • 挂载到全局对象（window.globalVar）

  • 函数内声明的 var不会成为全局变量

• 缺点：存在变量提升和作用域污染风险

• 兼容性：所有浏览器支持

3. 使用 let/const（ES6+推荐）

// 顶层作用域声明
let globalLet = "I'm a global let variable";
const globalConst = "I'm a global constant";

• 特点：

  • 不挂载到全局对象 （window.globalLet为 undefined）

  • 块级作用域，但全局声明仍全局可访问

• 优势：避免意外覆盖，支持不可变常量

• 限制 ：const声明必须初始化

---

二、显式全局对象操作

1. 浏览器环境

// 显式附加到 window 对象
window.myGlobal = "value";

2. Node.js 环境

// 附加到 global 对象
global.myGlobal = "value";

3. 跨环境兼容方案

// 自动识别全局对象
const globalObject = typeof window !== 'undefined' ? window : global;
globalObject.appConfig = { /* ... */ };

优势：统一管理跨环境全局变量

---

三、模块化方案（推荐）

1. ES6 模块

// module.js
export const API_CONFIG = { url: "https://api.example.com" };

// main.js
import { API_CONFIG } from './module.js';

• 特点：静态分析，避免全局污染

2. CommonJS（Node.js）

// module.js
module.exports = { API_CONFIG: { url: "https://api.example.com" } };

// main.js
const { API_CONFIG } = require('./module.js');

---

四、命名空间模式

// 创建命名空间对象
const MyApp = {
  config: {
    apiUrl: "https://api.example.com"
  },
  utils: {
    log: (msg) => console.log(msg)
  }
};

// 访问方式
MyApp.config.apiUrl = "https://new-api.example.com";

适用场景：大型项目状态管理

---

五、特殊场景方案

1. 单页应用（SPA）全局状态

// 使用 Vue/React 的全局状态管理
// Vue 示例
const store = Vue.observable({
  user: null,
  settings: {}
});

// 在组件中访问
this.$store.user = { name: "Alice" };

2. Web Workers 全局作用域

// worker.js
self.onmessage = (e) => {
  self.postMessage({ data: "Worker response" });
};

---

六、关键对比与选择建议

方法	全局对象挂载	块级作用域	推荐场景	风险等级
隐式声明	是	无	临时调试	⚠️高
var声明	是	无	旧项目维护	⚠️中
let/const	否	有	现代项目开发	✅低
显式附加到全局对象	是	无	需要跨模块访问的配置	⚠️中
模块化	否	有	复杂应用	✅低
命名空间	否	无	大型项目模块化	✅中

---

七、最佳实践

1. 最小化全局变量​

   • 每个全局变量占用内存且可能引发冲突

   • 使用 IIFE隔离作用域：

     (function() {
       const localVar = "Private";
       window.app = { /* ... */ };
     })();

2. 常量优先​

   const API_VERSION = "v2.1";

3. 配置集中管理​

   // config.js
   export const CONFIG = {
     debug: process.env.NODE_ENV === 'development',
     timeout: 5000
   };

4. 严格模式​

   "use strict";
   // 阻止隐式全局变量创建

---

八、调试与监控

// 检测全局变量泄漏
console.log(Object.keys(window).filter(k => k.startsWith('myApp')));

---

九、性能影响

• 内存占用：全局变量生命周期与应用一致

• 加载优化：通过 CDN 加载常用库（如 jQuery）减少重复下载

• Tree Shaking：模块化方案可移除未使用代码

---

十、跨环境注意事项

环境	全局对象	模块系统	典型问题
浏览器	window	ES6/Webpack	全局变量污染
Node.js	global	CommonJS/ESM	模块缓存问题
Web Worker	self	专用模块系统	与主线程通信延迟

---

通过合理选择方案，可有效平衡功能需求与代码质量。现代开发推荐优先使用模块化和 const/let，仅在必要时使用全局变量。