块级作用域

 ES5中的var是没有块级作用域的(if/for)

 ES6中的let是有块级作用的(if/for)

 

 ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题（闭包），如：

 假设先要需要遍历一组<button>,为解决没有块级作用域问题，我们需要：

 

var btns = document.getElementsByTagName('button');

   for (var i=0; i<btns.length; i++) {

     (function (num) { // 0

       btns[i].addEventListener('click', function () {

         console.log('第' + num + '个按钮被点击');

       })

     })(i)

   }

如果不这样做，每次遍历输出的结果都会是i的最大值

 

而在 ES6中,加入了let, let它是有if和for的块级作用域.

 

const btns = document.getElementsByTagName('button')

  for (let i = 0; i < btns.length; i++) {

    btns[i].addEventListener('click', function () {

      console.log('第' + i + '个按钮被点击');

    })

  }

 

 

 

// ES5

  // var i = 5

  // {

  //   btns[i].addEventListener('click', function () {

  //   console.log('第' + i + '个按钮被点击');

  // })

  // }

  //

  // {

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  //

  //

  // {

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  //

  //

  // {

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  //

  // {

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  //

  // // ES6

  // { i = 0

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  //

  // { i = 1

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  // { i = 2

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  // { i = 3

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }

  // { i = 4

  //   btns[i].addEventListener('click', function () {

  //     console.log('第' + i + '个按钮被点击');

  //   })

  // }