let/var之块级作用域

一、ES5中的var

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
<script>
    var btns = document.getElementsByTagName('button')
    for(var i = 0;i < btns.length;i ++){
      btns[i].addEventListener('click',function(){
        console,log('第' + i + '个按钮被点击')
      })
    }
</script>

</body>

 

无论点击哪个按钮，都是第三个按钮被点击

原因：var不存在块级作用域，比如for和if

解决方法：设置闭包

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i < btns.length;i ++){
      (function (i) {
        btns[i].addEventListener('click',function() {
          console. log('第' + i + '个按钮被点击');
        })
      })(i)
    }
</script>
</body>

为什么可以解决：因为在JavaScript中函数有作用域

二、ES6中的let

 

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
<script>
    const btns = document.getElementsByTagName('button');
    for(let i = 0;i < btns.length;i ++){
        btns[i].addEventListener('click',function() {
          console. log('第' + i + '个按钮被点击');
        })
    }
</script>
</body>

 

执行结果正确

ES6引入了let有了自己的作用域，如if、for

 

不将var修改的原因：防止浏览器不兼容以及开发者不适应

 

 

posted @ 2020-07-07 20:08  月亮小姐姐  阅读(291)  评论(0)  编辑  收藏  举报