title: If the "with" statement in Javascript creates a new scope, why does this closure doesn't contain the new "x" in new scope each time?
body: <p>If the <code>with</code> statement in Javascript creates a new scope, shouldn't clicking on the links show a different <code>x</code> which are in different scopes?  It doesn't.</p>
  
  <pre><code>&lt;a href="#" id="link1"&gt;ha link 1&lt;/a&gt;
  &lt;a href="#" id="link2"&gt;ha link 2&lt;/a&gt;
  &lt;a href="#" id="link3"&gt;ha link 3&lt;/a&gt;
  &lt;a href="#" id="link4"&gt;ha link 4&lt;/a&gt;
  &lt;a href="#" id="link5"&gt;ha link 5&lt;/a&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      for (i = 1; i &lt;= 5; i++) {
  
          with({foo:"bar"}) {
              var x = i;
              document.getElementById('link' + i).onclick = function() { alert(x); return false; }
          }
  
      }
  
  &lt;/script&gt;
  </code></pre>