Question

在下面的代码中，当我使用var声明我的盒子时，我创建的盒子使用相同的数字，但是当我更改var关键字以使用let代替时，它将正确显示。谁能深入解释每种情况下发生了什么？还可以在不使用let关键字的情况下解决该问题吗？

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    section > div {
      height: 100px;
      width: 100px;
      background-color: red;
      float: left;
      margin: 3px;
      cursor: pointer;
    }
  </style>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel" defer>
    for( var i = 0; i < 45; i++ ){
      var div = document.createElement('div');
      div.onclick = function(){
        alert("you clicked on a box #" + i);
      };
      document.getElementsByTagName('section')[0].appendChild(div);
    }
  </script>
  <title>Let Keyword</title>
</head>
<body>
  <header>
    <h1>Click on a box</h1>
  </header>
  <section></section>
</body>
</html>

为什么使用let关键字而不使用var

0 个答案: