var和let块级作用域

什么是变量作用域？

变量在什么范围内是可用的。

没有块级作用域引发的问题？

那么函数的值就可能在被使用前修改。

if(true){
    var name = "why"
  }
  name = "lsii"
  console.log(name)  // lisi

if语句为真，所以代码是可以执行的。而我们定义的变量name在打印的是lisi，原因是没有块级作用域。

比如：
有五个按钮，我们的需求就是，就是点击按钮，打印出当前是哪一个按钮被点击了。

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

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

此时，就会产生一个问题，我们点击第一个按钮，却始终打印的是第五个。因为此时变量i已经被修改了。

解决方案：
(1)、闭包

for (var i=0;i<btns.length;i++){
    (function (i) {
      btns[i].addEventListener('click',function () {
        console.log('第'+ i +'个按钮被点击');
      })
    })(i)
  }

为什么闭包可以解决问题？
因为函数是一个作用域。
(2)、let
let有自己的块级作用域。

for (let i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+ i +'个按钮被点击');
    })
  }