es6块级作用域

es6块级作用域

提示： ES5中的var是没有块级作用域的(if/for)
ES6中的let是由块级作用的(if/for)

---

---

前言

ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.
ES6中,加入了let, let它是有if和for的块级作用域.

---

提示：以下是本篇文章正文内容，下面案例可供参考

块级作用域

1.变量作用域: 变量在什么范围内是可用.

   {
     var name = 'lll';
     console.log(name);
   }
   console.log(name);

2.没有块级作用域引起的问题: if的块级

var func;
  if (true) {
    var name = 'lll';
    func = function () {
      console.log(name);
    }
    // func()
  }
  name = 'kobe'
  func()
  // console.log(name);

3.没有块级作用域引起的问题: for的块级
为什么闭包可以解决问题: 函数是一个作用域.

 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)
    }

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 + '个按钮被点击');
      })
    }