如何在JavaScript中保持变量同名时获取外部变量的值

原代码 #

var i = 5;
test();

function test() {
  let i = 3;
  alert(i);
}

上述代码执行后会弹出内部let声明的变量i的值3，要求在保持内外两个变量均名为i的前提下，修改代码使弹窗显示外部变量的值5。

可行方案 #

方案1：通过全局对象访问（浏览器环境）

由于外部的i是var声明的全局变量，在浏览器中会挂载到window全局对象上，直接通过window.i即可绕过内部变量的遮蔽，访问到外部的i：

var i = 5;
test();

function test() {
  let i = 3;
  alert(window.i);
}

方案2：利用暂时性死区特性缓存外部变量

在内部let i声明之前，当前作用域还未创建该变量，此时访问i会向上查找外部作用域的变量，我们可以提前缓存这个值：

var i = 5;
test();

function test() {
  const outerI = i; // 此时i指向外部的全局变量
  let i = 3;
  alert(outerI);
}

方案3：Node.js环境适配

如果是在Node.js环境中，全局变量挂载在globalThis对象上，代码可修改为：

var i = 5;
test();

function test() {
  let i = 3;
  console.log(globalThis.i); // Node.js中用globalThis访问全局变量，alert需替换为console.log
}

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