函数作用域内同名全局变量不被覆盖及区分方法的技术问询

首先明确：当函数作用域内存在与全局变量同名的局部变量（包括函数参数）时，局部变量会遮蔽全局变量，直接访问变量名会优先获取局部作用域的值。你代码里window.a返回undefined，是因为用const（或let）声明的全局变量不会挂载到浏览器的window对象上——只有var或function声明的全局变量才会成为window的属性。

接下来针对你的核心问题：存在同名全局/局部变量时，如何区分访问二者，提供几种可行方案：

方案1：提前缓存全局变量引用 #

在函数外部把全局变量的引用保存到另一个变量中，函数内通过这个变量访问全局值：

const a = 3;
// 缓存全局a的引用
const globalA = a;

function b(a) {
  console.log(a); // 输出局部变量：4
  console.log(globalA); // 输出全局变量：3
}

b(4);

方案2：使用Function构造函数访问全局作用域 #

Function构造函数创建的函数，其词法作用域绑定的是全局环境，而非当前函数的局部作用域，因此可以通过它获取全局变量：

const a = 3;

function b(a) {
  console.log(a); // 输出局部变量：4
  // 创建全局作用域的函数，返回全局a
  const getGlobalA = new Function('return a');
  console.log(getGlobalA()); // 输出全局变量：3
}

b(4);

方案3：针对var声明的全局变量（兼容旧场景） #

如果全局变量是用var声明的，它会自动挂载到window对象上，此时可以直接通过window.a访问全局值：

var a = 3; // var声明的全局变量会挂载到window

function b(a) {
  console.log(a); // 输出局部变量：4
  console.log(window.a); // 输出全局变量：3
}

b(4);

注意事项 #

• 尽量避免全局变量与局部变量同名，这会增加代码的可读性维护成本，是不推荐的编码习惯。
• 在严格模式下，eval无法突破局部作用域访问全局变量，因此不要依赖eval来实现这个需求。

内容的提问来源于stack exchange，提问作者Oba Api