ES6基础入门之let、let与var的区别、暂存死区

• ES与JS的关系

            ES是JS的标准

           JS是ES的实现

• ES6之前的作用域主要有三个

           全局作用域（即window）

           函数作用域

           eval作用域

• ES6之块级作用域，块级作用域可以嵌套

1.            块级作用域：通俗的讲 就是一对花括号中的区域{...}
2.            if(){}
3.            switch(){}
4.            for(){} //小括号里是一个作用域，大括号里又是另外子集作用域
5.            try{}catch(err){}
6.            {}

注意:对象里的花括号不是作用域

var obj ={|
    a:1
}

• 声明变量的原理

     平时声明变量一般使用

var age = 14

或

age= 14

（此种方式本质上是在windowd对象上挂了一个全局变量，此方式容易污染全局空间，所以一般不建议这样做）

同理我们也可以赋值一个函数让它变成window对象上的一个方法所以

window.location.href===location.href

if（window.location.href===location.href） //true

• let和var的主要区别

1. let声明的变量只在当前（块级）作用域内有效
2. let或const声明的变量不能被重复声明
3. let 不存在变量提升:var声明之前使用不会报错，只会是undefind，因为当使用consloe.log(age); var age = 14时候，它会把在使用age之前，先提前执行var age;然后再使用age，然后再执行age=14;
4. let和const声明变量存在暂存死区

• 暂存死区：

       在定义该变量之前的区域就是暂存性死区，死区里边拿不到外边的变量，也拿不到本代码块内的变量。如果块级作用域中用let或const声明了变量，一开始就会遵循封闭的变量，即使向上的作用域中存在同一样的变量，也无法拿到。

• 使用let实现的小例子

需求：生成十个按钮，每个按钮点击的时候弹出1-10

var i = 0;
for(i=1;i<=10;i++){
    (function(i){
        var btn = document.createElement('button');
        btn.innerText = i;
        btn.onclick = function(){
            alert(i)
        }
        document.body.appendChild(btn);
    })(i);
}

结果

 

 

去掉自执行函数后

var i = 0;
for(i=1;i<=10;i++){
   // (function(i){
        var btn = document.createElement('button');
        btn.innerText = i;
        btn.onclick = function(){
            alert(i)
        }
        document.body.appendChild(btn);
   // })(i);//
}

结果就所有弹窗都是11，因为此时的i已经都等于11

使用let

for(let i=1;i<=10;i++){
        var btn = document.createElement('button');
        btn.innerText = i;
        btn.onclick = function(){
            alert(i)
        }
        document.body.appendChild(btn);
}

结果