全局作用域：JavaScript 中的公共广场

全局作用域的本质

在理解词法作用域、块级作用域和函数作用域之后，我们需要认识 JavaScript 中一个特殊而重要的作用域——全局作用域。如果把 JavaScript 程序比作一座城市，全局作用域就像是这座城市的公共广场：每个人都能看到它，每个人都能访问它，但也正因为如此，我们需要特别小心如何使用它。

全局作用域是 JavaScript 代码执行时创建的最外层作用域。在全局作用域中声明的变量和函数，可以在程序的任何地方被访问。这种"无处不在"的特性既是它的优势，也是它最大的风险所在。

全局作用域的创建

当 JavaScript 代码开始执行时，引擎会自动创建一个全局执行上下文，随之产生一个全局作用域。这个过程在任何代码运行之前就已经完成。

浏览器环境中的全局作用域

在浏览器中，全局作用域与 window 对象紧密相连。任何在全局作用域中声明的变量，都会成为 window 对象的属性：

javascript

// 全局作用域中的变量声明
var websiteName = "TechBlog";
let userCount = 1000;
const maxUsers = 5000;

// 使用 var 声明的变量会成为 window 的属性
console.log(window.websiteName); // "TechBlog"

// 使用 let 和 const 声明的变量不会成为 window 的属性
console.log(window.userCount); // undefined
console.log(window.maxUsers); // undefined

// 但它们仍然在全局作用域中可访问
console.log(userCount); // 1000
console.log(maxUsers); // 5000

这里有一个重要的区别：使用 var 声明的全局变量会成为 window 对象的属性，而使用 let 和 const 声明的变量虽然也在全局作用域中，但不会添加到 window 对象上。这是 ES6 引入的一个重要改进，有助于减少全局命名空间的污染。

Node.js 环境中的全局作用域

Node.js 中的情况有所不同。在 Node.js 中，每个文件都被视为一个模块，文件中的变量默认不是全局的。Node.js 提供了一个真正的全局对象 global：

javascript

// 在Node.js中，这些变量是模块作用域的，不是全局的
var serverName = "APIServer";
let port = 3000;

console.log(global.serverName); // undefined
console.log(global.port); // undefined

// 如果想创建真正的全局变量（不推荐）
global.appVersion = "1.0.0";

// 现在可以在其他模块中访问
console.log(global.appVersion); // "1.0.0"

使用 globalThis 实现跨平台兼容

为了解决不同环境下全局对象不统一的问题，ES2020 引入了 globalThis。它在浏览器中指向 window，在 Node.js 中指向 global，在 Web Workers 中指向 self：

javascript

// 跨平台的全局对象访问
console.log(globalThis);
// 浏览器中: Window对象
// Node.js中: Global对象
// Web Worker中: WorkerGlobalScope对象

// 这样写的代码可以在任何环境中运行
globalThis.appConfig = {
  version: "2.0.0",
  environment: "production",
};

全局变量的声明方式

在全局作用域中，有多种方式可以创建变量，每种方式都有不同的特性和影响。

var 声明的全局变量

使用 var 在全局作用域声明的变量会成为全局对象的属性，并且具有变量提升特性：

javascript

console.log(companyName); // undefined（变量提升）

var companyName = "InnovateLab";

console.log(companyName); // "InnovateLab"
console.log(window.companyName); // "InnovateLab"（浏览器环境）

// 可以通过 delete 删除（虽然不推荐这样做）
delete window.companyName;
console.log(window.companyName); // undefined

let 和 const 声明的全局变量

使用 let 和 const 声明的全局变量不会成为全局对象的属性，且存在暂时性死区：

javascript

// 暂时性死区 - 在声明之前访问会报错
// console.log(projectName); // ReferenceError

let projectName = "WebApp";
const maxConnections = 100;

console.log(projectName); // "WebApp"
console.log(window.projectName); // undefined
console.log(globalThis.projectName); // undefined

// const 声明的变量不能重新赋值
// maxConnections = 200; // TypeError

隐式全局变量

如果在任何作用域中给一个未声明的变量赋值，它会自动成为全局变量。这是 JavaScript 中一个危险的特性：

javascript

function createUser(name) {
  // 忘记使用 var/let/const，创建了隐式全局变量
  userId = Math.random().toString(36);
  return {
    name: name,
    id: userId,
  };
}

createUser("Sarah");

console.log(userId); // 可以访问！这是一个全局变量
console.log(window.userId); // 同样可以访问

这种隐式创建全局变量的行为是许多 bug 的根源。幸运的是，使用严格模式可以防止这种情况：

javascript

"use strict";

function createProduct(name) {
  // 在严格模式下，这会抛出错误
  // productId = Math.random(); // ReferenceError

  // 必须显式声明
  let productId = Math.random();
  return {
    name: name,
    id: productId,
  };
}

全局作用域的访问规则

全局作用域中的变量可以在程序的任何地方被访问，但这个访问遵循作用域链规则。

从内部作用域访问全局变量

内部作用域可以自由访问全局作用域中的变量：

javascript

const apiUrl = "https://api.example.com";
const apiKey = "abc123xyz";

function fetchUserData(userId) {
  // 函数内部可以访问全局变量
  const url = `${apiUrl}/users/${userId}`;

  return fetch(url, {
    headers: {
      Authorization: `Bearer ${apiKey}`, // 使用全局变量
    },
  });
}

function fetchProductData(productId) {
  // 另一个函数也可以访问相同的全局变量
  const url = `${apiUrl}/products/${productId}`;

  return fetch(url, {
    headers: {
      Authorization: `Bearer ${apiKey}`,
    },
  });
}

局部变量遮蔽全局变量

当局部作用域中存在与全局变量同名的变量时，局部变量会"遮蔽"全局变量：

javascript

const theme = "dark";

function setUserPreferences() {
  const theme = "light"; // 局部变量遮蔽全局变量

  console.log(theme); // "light"（访问的是局部变量）

  // 在浏览器中，可以通过 window 显式访问全局变量
  console.log(window.theme); // "dark"

  function applyTheme() {
    // 内层函数会先找到外层函数的 theme
    console.log(theme); // "light"
  }

  applyTheme();
}

setUserPreferences();
console.log(theme); // "dark"（全局变量未受影响）

全局作用域的常见问题

全局作用域虽然方便，但也带来了许多潜在问题。理解这些问题有助于我们写出更健壮的代码。

命名冲突与污染

当多个脚本或库在同一个页面中运行时，它们共享同一个全局作用域，很容易产生命名冲突：

javascript

// library-a.js
var utils = {
  formatDate: function (date) {
    return date.toLocaleDateString();
  },
};

// library-b.js
// 不小心覆盖了 library-a 的 utils
var utils = {
  formatCurrency: function (amount) {
    return `$${amount.toFixed(2)}`;
  },
};

// main.js
// 现在 utils.formatDate 不存在了！
// console.log(utils.formatDate(new Date())); // TypeError

解决这个问题的一个常见模式是使用命名空间：

javascript

// library-a.js
var LibraryA = {
  utils: {
    formatDate: function (date) {
      return date.toLocaleDateString();
    },
  },
};

// library-b.js
var LibraryB = {
  utils: {
    formatCurrency: function (amount) {
      return `$${amount.toFixed(2)}`;
    },
  },
};

// 现在两个库可以和平共存
console.log(LibraryA.utils.formatDate(new Date()));
console.log(LibraryB.utils.formatCurrency(99.99));

意外的变量修改

全局变量可以被任何代码修改，这可能导致难以追踪的 bug：

javascript

let cartItems = [];

function addToCart(item) {
  cartItems.push(item);
}

function processOrder() {
  console.log(`Processing ${cartItems.length} items`);

  // 某个函数可能会意外清空购物车
  cartItems = [];
}

addToCart({ id: 1, name: "Laptop" });
addToCart({ id: 2, name: "Mouse" });

console.log(cartItems.length); // 2

// 其他代码可能意外修改全局变量
cartItems = cartItems.filter((item) => item.id > 5);

console.log(cartItems.length); // 0（数据丢失了！）

测试困难

依赖全局变量的代码很难测试，因为测试之间可能会相互影响：

javascript

// 依赖全局状态的函数
let currentUser = null;

function login(username, password) {
  // 验证逻辑...
  currentUser = { username, role: "user" };
}

function isAdmin() {
  return currentUser && currentUser.role === "admin";
}

// 测试时，如果不小心重置全局状态，测试会相互影响
// test 1
login("john", "pass123");
console.log(isAdmin()); // false

// test 2 忘记重置状态
console.log(isAdmin()); // 仍然是 false，但 currentUser 还保留着上个测试的数据

全局作用域的最佳实践

为了避免全局作用域带来的问题，我们应该遵循一些最佳实践。

最小化全局变量

尽可能减少全局变量的使用，只将真正需要全局访问的内容放在全局作用域：

javascript

// 不好的做法 - 过多的全局变量
var userName = "John";
var userAge = 25;
var userEmail = "[email protected]";
var userRole = "admin";
var sessionId = "abc123";
var loginTime = Date.now();

// 好的做法 - 使用一个全局对象
const App = {
  user: {
    name: "John",
    age: 25,
    email: "[email protected]",
    role: "admin",
  },
  session: {
    id: "abc123",
    loginTime: Date.now(),
  },
};

使用模块化

现代 JavaScript 开发应该使用模块系统（ES6 Modules 或 CommonJS），这样可以避免污染全局作用域：

javascript

// user-service.js
export class UserService {
  constructor() {
    this.users = [];
  }

  addUser(user) {
    this.users.push(user);
  }

  getUsers() {
    return this.users;
  }
}

// main.js
import { UserService } from "./user-service.js";

const userService = new UserService();
userService.addUser({ name: "Sarah" });

// 没有污染全局作用域
console.log(window.userService); // undefined

使用 IIFE 隔离作用域

在不支持模块的环境中，可以使用立即执行函数表达式（IIFE）来创建私有作用域：

javascript

// 使用 IIFE 避免污染全局作用域
(function () {
  // 这些变量都是私有的
  const API_KEY = "secret123";
  const BASE_URL = "https://api.example.com";

  function makeRequest(endpoint) {
    return fetch(`${BASE_URL}${endpoint}`, {
      headers: { "X-API-Key": API_KEY },
    });
  }

  // 只暴露必要的接口到全局
  window.API = {
    fetchData: function (endpoint) {
      return makeRequest(endpoint);
    },
  };
})();

// 外部只能访问暴露的接口
API.fetchData("/users");

// 无法访问内部变量
// console.log(API_KEY); // ReferenceError

使用 const 优于 let 和 var

对于全局常量，使用 const 可以防止意外修改：

javascript

// 应用配置 - 使用 const 防止修改
const CONFIG = {
  API_URL: "https://api.example.com",
  TIMEOUT: 5000,
  MAX_RETRIES: 3,
};

// 尝试修改会报错
// CONFIG = {}; // TypeError

// 但要注意，对象的属性仍然可以修改
CONFIG.TIMEOUT = 10000; // 这是允许的

// 如果需要完全冻结对象，使用 Object.freeze
const FROZEN_CONFIG = Object.freeze({
  API_URL: "https://api.example.com",
  TIMEOUT: 5000,
  MAX_RETRIES: 3,
});

// 现在属性也无法修改
FROZEN_CONFIG.TIMEOUT = 10000;
console.log(FROZEN_CONFIG.TIMEOUT); // 仍然是 5000

明确标识全局变量

如果必须使用全局变量，应该使用清晰的命名约定，让其他开发者知道这是一个全局变量：

javascript

// 使用大写和前缀明确标识全局变量
const GLOBAL_APP_CONFIG = {
  version: "1.0.0",
  environment: "production",
};

// 或使用特定的命名空间
window.MyApp = window.MyApp || {};
window.MyApp.config = {
  version: "1.0.0",
  environment: "production",
};

全局作用域与内置对象

JavaScript 在全局作用域中预定义了许多内置对象和函数，了解它们有助于避免命名冲突。

标准内置对象

javascript

// 这些都是全局作用域中的内置对象
console.log(typeof Array); // "function"
console.log(typeof Object); // "function"
console.log(typeof String); // "function"
console.log(typeof Number); // "function"
console.log(typeof Boolean); // "function"
console.log(typeof Date); // "function"
console.log(typeof RegExp); // "function"
console.log(typeof Error); // "function"
console.log(typeof Math); // "object"
console.log(typeof JSON); // "object"

// 避免覆盖这些内置对象
// var Array = []; // 非常危险！永远不要这样做

全局函数

javascript

// 这些是全局作用域中的内置函数
console.log(typeof parseInt); // "function"
console.log(typeof parseFloat); // "function"
console.log(typeof isNaN); // "function"
console.log(typeof isFinite); // "function"
console.log(typeof eval); // "function"
console.log(typeof encodeURI); // "function"
console.log(typeof decodeURI); // "function"

// 避免使用这些名字作为变量名
// var parseInt = function() {}; // 会覆盖内置函数

实际应用场景

虽然我们提倡减少全局变量的使用，但某些场景下全局作用域仍然有其用武之地。

应用级配置

应用的核心配置适合放在全局作用域，因为它需要在整个应用中被访问：

javascript

const AppConfig = Object.freeze({
  api: {
    baseURL: "https://api.techblog.com",
    timeout: 30000,
    retryAttempts: 3,
  },
  features: {
    enableComments: true,
    enableSharing: true,
    enableNotifications: false,
  },
  ui: {
    theme: "light",
    language: "en",
    pageSize: 20,
  },
});

// 在应用的任何地方都可以访问配置
function fetchArticles() {
  return fetch(
    `${AppConfig.api.baseURL}/articles?limit=${AppConfig.ui.pageSize}`
  );
}

工具函数库

一些通用的工具函数可以作为全局对象暴露，方便在整个应用中使用：

javascript

const Utils = {
  formatDate(date) {
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    }).format(date);
  },

  formatCurrency(amount, currency = "USD") {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency,
    }).format(amount);
  },

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  },
};

// 在应用的任何地方使用
console.log(Utils.formatDate(new Date()));
console.log(Utils.formatCurrency(1234.56));

跨组件通信

在某些框架或场景下，全局事件总线可以用于组件间通信：

javascript

const EventBus = {
  events: {},

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach((callback) => callback(data));
    }
  },

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter((cb) => cb !== callback);
    }
  },
};

// 组件 A 监听事件
EventBus.on("user-login", (user) => {
  console.log(`Welcome, ${user.name}!`);
});

// 组件 B 触发事件
EventBus.emit("user-login", { name: "Sarah", id: 123 });

总结

全局作用域是 JavaScript 中最外层的作用域，它的特点是：

全局可访问：在全局作用域中声明的变量可以在程序的任何地方被访问
环境差异：浏览器使用window，Node.js 使用global，ES2020 引入了统一的globalThis
声明方式影响：var声明的变量会成为全局对象的属性，而let和const不会
潜在风险：容易造成命名冲突、变量污染和意外修改
最佳实践：最小化全局变量使用，使用模块化、IIFE 或命名空间来隔离作用域

理解全局作用域的工作机制，知道何时使用、何时避免使用全局变量，是编写高质量 JavaScript 代码的重要一环。在现代 JavaScript 开发中，我们应该优先考虑模块化和局部作用域，只在真正需要时才使用全局作用域。

全局作用域：JavaScript 中的公共广场 ​

全局作用域的本质 ​

全局作用域的创建 ​

浏览器环境中的全局作用域 ​

Node.js 环境中的全局作用域 ​

使用 globalThis 实现跨平台兼容 ​

全局变量的声明方式 ​

var 声明的全局变量 ​

let 和 const 声明的全局变量 ​

隐式全局变量 ​

全局作用域的访问规则 ​

从内部作用域访问全局变量 ​

局部变量遮蔽全局变量 ​

全局作用域的常见问题 ​

命名冲突与污染 ​

意外的变量修改 ​

测试困难 ​

全局作用域的最佳实践 ​

最小化全局变量 ​

使用模块化 ​

使用 IIFE 隔离作用域 ​

使用 const 优于 let 和 var ​

明确标识全局变量 ​

全局作用域与内置对象 ​

标准内置对象 ​

全局函数 ​

实际应用场景 ​

应用级配置 ​

工具函数库 ​

跨组件通信 ​

总结 ​

全局作用域：JavaScript 中的公共广场

全局作用域的本质

全局作用域的创建

浏览器环境中的全局作用域

Node.js 环境中的全局作用域

使用 globalThis 实现跨平台兼容

全局变量的声明方式

var 声明的全局变量

let 和 const 声明的全局变量

隐式全局变量

全局作用域的访问规则

从内部作用域访问全局变量

局部变量遮蔽全局变量

全局作用域的常见问题

命名冲突与污染

意外的变量修改

测试困难

全局作用域的最佳实践

最小化全局变量

使用模块化

使用 IIFE 隔离作用域

使用 const 优于 let 和 var

明确标识全局变量

全局作用域与内置对象

标准内置对象

全局函数

实际应用场景

应用级配置

工具函数库

跨组件通信

总结