Vue学习笔记——块级作用域的学习

与ES5相比，ES6引入了块级作用域的概念，由于ES5没有块级作用域，当循环中绑定异步事件时，由于for循环是同步，而事件是异步调用，且使用var变量作用域不为块级作用域，则事件执行的变量值永远是for循环的最后一个值。

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(var i = 0;i < btn.length;++i) {
     btn[i].addEventListener("click",function () {
       console.log('当前点击按钮为：' + i);
     })
   }
 </script>

 考虑用闭包的形式，可写为:

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(var i = 0;i < btn.length;++i) {
     (function (CurNum) {
       btn[CurNum].addEventListener("click",function () {
         console.log('当前点击按钮为：' + Number(CurNum + 1));
       })
     })(i)
   }
 </script>

 呈现效果为:

也可使用es6语法，将i的赋值改为let，这是因为let拥有了块作用域的概念:

<button>1</button>
<button>2</button>
<button>3</button>
 <script>
   var btn = document.getElementsByTagName('button');
   for(let i = 0;i < btn.length;++i) {
       btn[i].addEventListener("click",function () {
         console.log('当前点击按钮为：' + Number(i + 1));
       })
   }
 </script>