ECMAScript 6 let和var区别和应用

var 和let 不同处和应用

(1) 作用域不同,let只局限于当前代码块{}

    <script>

{
    var str = '张三';
    console.log(str);

    let str2 = '李四';
    console.log(str2);
}
console.log('124'+str);   //有输出
console.log('223'+str2);  //报错
</script>

(2)let 声明的变量作用域不会被提升
<script>

{
    console.log(str);
    var str = '张三';
    这样打印会提示没有设置值。即 javascript 5里面 var 每次定义变量,都会提升到该段代码首部，
    但所赋值不会提升到首部，所有这样输出 会提示 没有 设置值。

    console.log(str1);
    let str1 = '张三1';
    而 javascript6 使用let不会提升， 会报错，变量没定义。
}

</script>

（3）相同作用域，不能声明同一个变量，var 后面定义会覆盖前面定义值，let会报错。

{
    var str = 'vvv';
    var str = 'haha';
    console.log(str); //后面覆盖前面

    let str2 = 'vvv';
    let str2 = 'haha';
    console.log(str2); //报错
}

应用差别：
例如页面有 5个button，点击其中一个显示其序号

var but = document.getElementsByTagName('button');
for(var i=0;i<but.length;i++){
    but[i].onclick = function(){
        alert(i);
    }
}
var 会一直显示5;

解决1，闭包，建立新作用域

for(var i=0;i<but.length;i++){
    (function(i){
        but[i].onclick = function(){
            alert(i);
        };
    })(i);
}

解决2：把 var 换成 let

for(let i=0;i<but.length;i++){
    but[i].onclick = function(){
        alert(i);
    }
}

疑问：为啥（2）（3），（2）有报错，但输出str提示了，而（3）报错直接终止了页面
     为啥 (4) var 点击任一个一直显示5？知道 var 赋值后面会覆盖前面， 闭包可以多了解下，哪块内容？