ES6中 let, var, const的区别

最近在学习Vue时遇到的问题

问题描述

在如下代码运行的页面中，无论点击什么按钮，控制台都会输出第5个按钮被点击。

<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<btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
</script>

原因

var 没有块级作用域的概念++，这就会导致所有的监听函数中所使用的 i 都是同一个 i，即都是最后一个结果 i = 5.

解决方法

• ES5（即JS）中：使用闭包可以解决，因为函数是有作用域的。

  <script>
    var btns = document.getElementsByTagName("button");
    for (var i=0; i<btns.length; i++) {
      (function (num) {
        btns[num].addEventListener('click', function () {
          console.log('第' + num + '个按钮被点击');
        })
      })(i) //闭包可以解决问题！（因为函数是有作用域的！）
    }
  </script>
  

• ES6中：使用 let 而不是 var。直接将原来代码中的 var 改成 let.

Part 01 let与var

let 是ES6中新增用于声明局部变量，具有块级作用域，只在所在的代码块中有效。
区别

1. var 存在变量提升现象，let 必须先声明后使用。

   // var 的情况
   console.log(num); // 输出undefined
   var num = 2;
   
   // let 的情况
   console.log(tmp); // 报错ReferenceError
   let tmp = 2
   

2. let 存在暂时性死区。
   ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
   （“人言：var变量可以先使用，再声明；而let变量必须先声明，再使用！”）

   if (true) {
     // TDZ开始
     tmp = 'abc'; // => ReferenceError
     console.log(tmp); // => ReferenceError
   
     let tmp; 
     // TDZ结束
     console.log(tmp); // => undefined
   
     tmp = 123;
     console.log(tmp); // => 123
   }