即使在使用未定义的 var 类型的变量初始化后，在块范围内也会注销意外的值

如何解决即使在使用未定义的 var 类型的变量初始化后，在块范围内也会注销意外的值

function show() {
  var x = 10;
  if (true) {
    var x = 20;
  }
  console.log(x); // 20
}

show();

但是当我没有手动初始化 'if-statement' 中的 'x' 时，它会用 undefined 初始化并提升到顶部，并且应该记录最新的 undefined 值，因为 20 是在上面的例子中注销。但它注销了 10.为什么？

function show() {
  var x = 10;
  if (true) {
    var x;
  }
  console.log(x); // 10
}

show();

解决方法

来自MDN - var:

使用 var 的重复变量声明不会触发错误， 即使在严格模式下，变量也不会丢失其值，除非 执行另一个任务。

因此，除非您将任何值重新分配给 x，否则使用 var 声明的变量将保持其值。

在 x 块内重新声明 if 不会创建新变量； x 只创建一次。

来自Ecmascript spec - 14.3.2 Variable Statement:

var 语句声明了作用域为正在运行的变量 执行上下文的变量环境。 var 变量被创建 当它们包含的环境记录被实例化并且是 创建时初始化为 undefined。 在任何范围内 VariableEnvironment 一个常见的 BindingIdentifier 可能出现在多个 一个 VariableDeclaration 但这些声明共同定义 只有一个变量。

这就是为什么 x 在下面的语句中

var x;

不会用 undefined 隐式初始化；此重新声明语句没有重新创建变量 x。

function show() {
  var x = 10;
  if (true) {
    var x = undefined; // re-assigned
  }
  console.log(x);
}

show();

---

关于提升的注意事项：除非你已经知道这一点，否则变量不会被直接提升/移动到声明它们的作用域的顶部；变量声明在代码执行之前被处理，这就是为什么它们似乎移动到了作用域的顶部。

有关详细信息，请参阅：MDN - var hoisting

,

因此，如果您试图将以上两个示例联系起来，您可能会感到困惑。以不同的方式看这两个例子，你就会得到答案。