2.4 全局作用域与模块作用域

2.4 全局作用域与模块作用域

在 JavaScript 中，作用域决定了变量、函数和对象的可访问范围。本节将详细讲解 全局作用域 和 模块作用域 的概念及其区别，帮助你更好地组织和管理代码。

2.4.1 全局作用域

全局作用域是指在整个 JavaScript 程序中都可以访问的作用域。在浏览器环境中，全局作用域是 window 对象；在 Node.js 环境中，全局作用域是 global 对象。

1. 全局变量的定义
在全局作用域中声明的变量称为全局变量，它们可以在程序的任何地方访问：

var globalVar = "I am global";
console.log(globalVar); // 输出 "I am global"

2. 全局变量的风险

• 命名冲突：全局变量容易被覆盖或污染。
• 难以维护：过多的全局变量会导致代码难以理解和调试。

3. 避免全局污染

• 使用 let 和 const 代替 var，限制变量的作用域。
• 使用 IIFE（立即执行函数表达式）封装代码：

  (function () {
    var localVar = "I am local";
    console.log(localVar); // 输出 "I am local"
  })();
  console.log(localVar); // 报错：ReferenceError
  

2.4.2 模块作用域

模块作用域是 ES6 引入的概念，通过 import 和 export 实现代码的模块化。每个模块都有自己的作用域，模块内部的变量和函数默认不会被外部访问。

1. 模块的定义
一个模块就是一个独立的文件，使用 export 导出变量、函数或类，使用 import 导入其他模块的内容。

2. 模块的作用域
模块内部的变量和函数默认是私有的，只有通过 export 导出的内容才能被其他模块访问：

// module.js
const privateVar = "I am private";
export const publicVar = "I am public";

// main.js
import { publicVar } from "./module.js";
console.log(publicVar); // 输出 "I am public"
console.log(privateVar); // 报错：ReferenceError

3. 模块的优势

• 避免全局污染：模块内部的变量不会泄露到全局作用域。
• 提高代码复用性：模块可以被其他模块导入和使用。
• 便于维护：模块化使代码结构更清晰，易于管理和调试。

2.4.3 全局作用域与模块作用域的对比

2.4.4 示例代码

示例 1：全局作用域

// 全局变量
var globalVar = "I am global";

function testGlobal() {
  console.log(globalVar); // 输出 "I am global"
}
testGlobal();
console.log(globalVar); // 输出 "I am global"

示例 2：模块作用域

// module.js
const privateVar = "I am private";
export const publicVar = "I am public";

// main.js
import { publicVar } from "./module.js";
console.log(publicVar); // 输出 "I am public"
console.log(privateVar); // 报错：ReferenceError

2.4.5 总结

• 全局作用域：变量在整个程序中可访问，但容易导致命名冲突和代码污染。
• 模块作用域：变量仅在模块内可访问，通过 export 和 import 实现模块化，是现代 JavaScript 开发的最佳实践。
• 建议：尽量避免使用全局变量，优先使用模块化开发，以提高代码的可维护性和复用性。

通过理解全局作用域和模块作用域的区别，你可以更好地组织代码，避免常见的作用域问题。

思考题：

1. 全局变量有哪些潜在的风险？如何避免这些风险？
2. 模块作用域如何帮助提高代码的可维护性？
3. 在什么情况下应该使用全局作用域？在什么情况下应该使用模块作用域？