本文深入探讨了javaScript中从嵌套函数访问全局变量时遇到的变量遮蔽问题。我们将通过示例代码解析变量遮蔽的原理，并提供两种解决方案：一是通过重命名局部变量来消除遮蔽（推荐实践），二是在特定情况下通过 `window` 对象显式访问全局变量。同时，文章还将强调使用代码检查工具和遵循最佳实践的重要性，以编写更清晰、更可维护的javascript代码。
理解JavaScript作用域与变量遮蔽
在JavaScript中，变量的作用域决定了代码的哪些部分可以访问该变量。当一个内部作用域（如函数内部）声明了一个与外部作用域（如全局作用域或父函数作用域）中同名的变量时，就会发生“变量遮蔽”（variable Shadowing）。内部作用域中的同名变量会“遮蔽”外部作用域的变量，使得在内部作用域内无法直接通过变量名访问到外部作用域的变量。
考虑以下示例代码，它展示了变量遮蔽如何阻止嵌套函数访问全局变量：
var a = 6; // 全局变量 a function abc() { var a = 10; // 局部变量 a，遮蔽了全局变量 a a += 1; console.log("在abc函数内部，局部变量 a:", a); function dd() { a += 1; // 这里的 a 引用的是 abc 函数内部的局部变量 a console.log("在dd函数内部，局部变量 a:", a); } dd(); } abc(); // 预期输出： // 在abc函数内部，局部变量 a: 11 // 在dd函数内部，局部变量 a: 12
在这个例子中，全局作用域有一个 var a = 6;。abc 函数内部又声明了一个 var a = 10;。这个局部 a 遮蔽了全局 a。因此，在 abc 函数及其嵌套函数 dd 内部，任何对 a 的引用都将指向 abc 内部的局部变量 a，而不是全局 a。这就是为什么 dd 函数无法访问到全局 a=6 的原因。
立即学习“Java免费学习笔记（深入）”；
解决方案一：避免变量遮蔽（推荐实践）
解决变量遮蔽最直接且推荐的方法是避免使用相同的变量名。通过为不同作用域的变量赋予独特的名称，可以消除混淆并确保代码的清晰性。
var globalVarA = 6; // 全局变量 function abc() { var localVarA = 10; // 局部变量，使用不同的名称 localVarA += 1; console.log("在abc函数内部，局部变量 localVarA:", localVarA); function dd() { // 如果需要访问全局变量，直接使用其名称 globalVarA += 1; console.log("在dd函数内部，全局变量 globalVarA:", globalVarA); console.log("在dd函数内部，局部变量 localVarA:", localVarA); // 也可以访问父作用域的 localVarA } dd(); } abc(); console.log("全局变量 globalVarA 的最终值:", globalVarA); // 预期输出： // 在abc函数内部，局部变量 localVarA: 11 // 在dd函数内部，全局变量 globalVarA: 7 // 在dd函数内部，局部变量 localVarA: 11 // 全局变量 globalVarA 的最终值: 7
通过将 abc 函数内部的变量命名为 localVarA，我们确保了它不会与全局 globalVarA 冲突。现在，dd 函数可以直接通过 globalVarA 访问并修改全局变量。
解决方案二：通过 window 对象访问全局变量（特定场景）
在浏览器环境中，使用 var 关键字在全局作用域声明的变量会自动成为 window 对象的属性。这意味着，即使存在变量遮蔽，你也可以通过 window.variableName 的方式显式地访问到全局变量。
var a = 6; // 全局变量 a function abc() { var a = 10; // 局部变量 a，遮蔽了全局变量 a a += 1; console.log("在abc函数内部，局部变量 a:", a); function dd() { // 通过 window.a 显式访问全局变量 a window.a += 1; console.log("在dd函数内部，通过 window.a 访问的全局变量 a:", window.a); console.log("在dd函数内部，局部变量 a (仍被遮蔽):", a); // 这里的 a 仍然是 abc 内部的局部变量 } dd(); } abc(); console.log("全局变量 a 的最终值:", a); // 预期输出： // 在abc函数内部，局部变量 a: 11 // 在dd函数内部，通过 window.a 访问的全局变量 a: 7 // 在dd函数内部，局部变量 a (仍被遮蔽): 11 // 全局变量 a 的最终值: 7
注意事项：
- 这种方法仅适用于使用 var 声明的全局变量，且代码运行在浏览器环境。使用 let 或 const 声明的全局变量不会成为 window 对象的属性。
- 虽然这种方法可以解决访问问题，但它并没有解决变量遮蔽本身。在 dd 函数内部，直接使用 a 仍然会引用 abc 函数的局部变量。这可能导致代码混淆，因此通常不推荐作为首选解决方案，除非在特定遗留代码或调试场景下。
最佳实践与预防措施
为了编写更健壮、更易维护的JavaScript代码，建议遵循以下最佳实践：
- 避免变量遮蔽： 这是最重要的原则。始终为不同作用域的变量使用清晰、唯一的名称。
- 使用代码检查工具（Linters）： 配置ESLint等工具，并启用 no-shadow 等规则。这些工具可以在开发阶段就检测到变量遮蔽问题，并给出警告或错误提示，帮助开发者及时修正。
- 最小化全局变量的使用： 全局变量容易导致命名冲突和状态管理复杂化。尽可能地将变量限定在所需的最小作用域内。如果确实需要共享数据，可以考虑使用模块模式、闭包、上下文（如react Context）或状态管理库。
- 优先使用 let 和 const： 在现代JavaScript中，推荐使用 let 和 const 来声明变量。它们具有块级作用域，相比 var 的函数作用域，能更好地控制变量的可见性和生命周期，有助于减少意外的变量遮蔽和副作用。
总结
从嵌套函数访问全局变量时，理解JavaScript的作用域规则和变量遮蔽现象至关重要。最佳实践是通过避免变量遮蔽（即使用不同的变量名）来确保代码的清晰性和可预测性。在特定情况下，可以通过 window 对象显式访问全局 var 变量，但这通常不是首选。结合使用代码检查工具和遵循现代JavaScript的最佳实践，可以有效预防和解决此类问题，从而提升代码质量和开发效率。