javascript - 为什么 var 在 with 语句中的行为取决于传递的对象是否具有同名的属性？

Question

function foo(obj) {
  with(obj) {
    var x = 2;
  }
  console.log(x);
}
let o1 = {};
foo(o1); // 2 (x is visible even outside the with statement because of *var*)

function foo2(obj) {
  with(obj) {
    var x = 2;
  }
  console.log(x);
}
let o2 = {
  x: 1
};
foo2(o2); // undefined (why?)

我正在阅读 YDKJS 系列中 Kyle Simpson 的 Scope & Closures 一书，我能够理解 with 语句的所有怪癖以及如何 with(obj) { a = 1 }在功能上不同于 obj.a = 1尽管在长对象名称的情况下被用作它的简写并且必须不断引用它。这是因为对象的属性在该范围内被视为词法定义的标识符(a vs obj.a)，并且在草率模式下，这样做的一个副作用是，如果您传递给 with 语句的对象没有您尝试分配的属性，将创建该名称的全局变量。尽管如此，有了所有这些知识和更多知识，我还是不太明白为什么上面的代码会这样。为什么 foo(o2)日志未定义？

Answer 1

这种行为可以解释行为的差异，在(例如)以下 note in ECMAScript 2022 Language Specification sect 14.3.2.1 中进行了描述。 :

NOTE: If a VariableDeclaration is nested within a with statement and the BindingIdentifier in the VariableDeclaration is the same as a property name of the binding object of the with statement's object Environment Record, then step 5 will assign value to the property instead of assigning to the VariableEnvironment binding of the Identifier.

在第一种情况下:

function foo(obj) {
  with(obj) {
    var x = 2;
  }
  console.log(x);
}
let o1 = {};
foo(o1);

因为 obj没有 x属性(property)， var语句被提升到函数的顶部，因此在 with 的范围之外可见陈述。
在第二种情况下:

function foo2(obj) {
  with(obj) {
    var x = 2;
  }
  console.log(x);
}
let o2 = {
  x: 1
};
foo2(o2);

x存在于 obj ，因此我们满足引用注释中列出的条件，因此将值分配给属性并且不会创建提升的变量。现在，没有 x超出 with 的范围陈述。