如果“与”是Javascript 中的语句创建了一个新的作用域，为什么这个闭包不包含新的“x”？每次都在新的范围内？

Question

如果 Javascript 中的 with 语句创建了一个新范围，那么单击链接是否不应该显示处于不同范围的不同 x ？事实并非如此。

<a href="#" id="link1">ha link 1</a>
<a href="#" id="link2">ha link 2</a>
<a href="#" id="link3">ha link 3</a>
<a href="#" id="link4">ha link 4</a>
<a href="#" id="link5">ha link 5</a>


<script type="text/javascript">

    for (i = 1; i <= 5; i++) {

        with({foo:"bar"}) {
            var x = i;
            document.getElementById('link' + i).onclick = function() { alert(x); return false; }
        }

    }

</script>

Answer 1

with 语句不会创建一个全新的词法作用域，它只是在作用域链前面引入一个对象，例如，如果您捕获 i 变量，它会工作：

for (var i = 1; i <= 5; i++) {
  with({x:i}) {
    document.getElementById('link' + i).onclick = function() {
      alert(x);
      return false;
    };
  }
}

让我尝试用另一个例子更好地解释它：

var x = 10, y = 10;   // Step 1

with ({x: 20}) {      // Step 2

  var x = 30, y = 30; // Step 3

  alert(x); // 30
  alert(y); // 30
}

alert(x); // 10
alert(y); // 30

在步骤 1 中，x< /code> 和 y 变量已声明，它们是作用域链中第一个对象（全局对象）的一部分。

步骤 2 中，通过 with 语句将一个新对象 ({x:20}) 引入到作用域链中，现在作用域链看起来像这样：

   ________              ________
  | x = 10 | <--------- | x = 20 |
  | y = 10 |             ¯¯¯¯¯¯¯¯¯
   ¯¯¯¯¯¯¯¯ 

在 第 3 步，执行另一个 var 语句，但它没有任何效果，因为正如我之前所说，只有函数才能创建完整的词法作用域。

var 语句没有效果，但赋值有效果，因此当 x 变量被解析时，会到达作用域链上的第一个对象，即我们使用与。

y 标识符也被解析，但在链中的第一个对象上找不到它，因此继续查找，并在最后一个对象上找到它，赋值后的作用域链如下所示：

   ________              ________
  | x = 10 | <--------- | x = 30 |
  | y = 30 |             ¯¯¯¯¯¯¯¯¯
   ¯¯¯¯¯¯¯¯ 

当with语句结束时，作用域链最终恢复：

   ________ 
  | x = 10 |
  | y = 30 |
   ¯¯¯¯¯¯¯¯ 

编辑：
我稍微展开一下，讲讲函数。

当函数被创建时，其当前父作用域被绑定，例如

var fn;
// augment scope chain
with ({foo: "bar"}) {
  fn = function () { // create function
    return foo;
  };
}​​
// restored scope chain
fn(); // "bar", foo is still accessible inside fn

：当函数执行时，新的词法作用域被创建并添加到作用域链中。

基本上，函数参数的所有标识符（名称）、用 var 声明的变量以及用 function 语句声明的函数，都被绑定为在幕后创建的新对象的属性，只是在函数本身执行之前（当控件进入这个新的执行上下文时）。

该对象无法通过代码访问，称为变量对象，例如：

var x = 10, y = 10;   // Step 1

(function () {        // Step 2
  var x, y; 

  x = 30;             // Step 4
  y = 30; 

  alert(x); // 30
  alert(y); // 30
})();                 // Step 3

alert(x); // 10       // Step 5
alert(y); // 10

在步骤 1 中，再次与我的第一个示例一样，x 和 y 变量被声明，它们是作用域链中第一个对象（全局对象）的一部分。

在第2步中，创建了一个新的函数对象，父作用域此时存储在该函数的[[Scope]]中，现在包含x和y。

在步骤 3 中，调用该函数，启动变量实例化 process，它在作用域链中创建一个新对象，包含在这个新函数中声明的本地作用域的 x 和 y 变量，此时的作用域链如下所示：

  parent scope           Variable Object
   ________              _______________
  | x = 10 | <--------- | x = undefined |
  | y = 10 |            | y = undefined | 
   ¯¯¯¯¯¯¯¯              ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ 

然后在第4步中，完成了x和y的赋值，但由于新的词法作用域已经创建，因此它不会影响外部值。

  parent scope           Variable Object
   ________              ________
  | x = 10 | <--------- | x = 30 |
  | y = 10 |            | y = 30 | 
   ¯¯¯¯¯¯¯¯              ¯¯¯¯¯¯¯¯ 

最后，在第 5 步中，函数结束，作用域链恢复到原始状态。

   ________ 
  | x = 10 |
  | y = 10 |
   ¯¯¯¯¯¯¯¯ 

推荐讲座：

• ECMA-262-3 详细信息。第 4 章：作用域链
• 作用域链和标识符解析