ES6新特性-块级绑定

ES6新特性-块级绑定

简述：块级绑定是指将变量与块级进行绑定，由此ES6提供了两个关键字来申明变量 let、const 并且与块级进行绑定

下面我们就来看看ES6为什么要新增let、const关键字

var声明变量存在的问题

在es6以前都是用var进行变量申明的，他存在如下问题

//问题1：允许重复的变量声明:导致数据被覆盖
//问题2：变量提升:怪异的数据访问、闭包问题
//问题3：全局变量挂载到全局对象:全局对象成员污染问题


var name = "小明";
function print(){
  console.log(name) //输出：小红
}

//这里有很多代码

var name = "小红" 
print() //执行print函数

console.log(window.name)//输出：小红

1.关于重复申明变量变量被覆盖的问题：有一些变量名实在太常用了，如果先声明name 后期在开发的过程中我们可能会对这个变量进行重复的申明变量被调用时的值是不稳定的
2.关于变量提升的问题：①设计逻辑的缺陷


//如下代码是不报错的
if(false){
  var a="abc"
  console.log(a)
}else{
  console.log(a) //输出undefined
}

//ES官方认为在else 中输出a 应该报错 应该找不到该变量的存在
//但实际上 var将变量进行提升 会解析成如下代码执行

var a;
if(false){
  a="abc"
  console.log(a)
}else{
  console.log(a) //输出undefined
}

②闭包问题

//在页面创建 10个按钮

for (var i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) //输出11
    }
}

//当点击任何一个按钮时都会输出11
//这个bug问题 是因为 变量用var取绑定了i的值 浏览器解析成如下代码执行

var i;
for (i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) //输出11
    }
}

//此时第一个i和最后一个i实际上是一个变量
//当循环完毕后 这个i变成了11 无论点击哪一个按钮都是11

3.关于全局变量污染的问题：全局变量挂载到全局对象造成全局污染

// 大家都知道 浏览器环境 window对象里面有一个console
//console对象用于控制台打印

//但是我们可以声明var变量 将window对象默认的console对象替换
var console = 100

console.log(console) 
//报错console.log is not a function


//最终导致报错，这种替换ES官方认为是不利于开发的，但是如果你想用于hook一些内置的函数是用这种方法是可以的

ES6的解决方案

引入let 和 const 关键字

1.let的特点

★let声明的变量不会挂载到全局对象

★let声明的变量，不允许当前作用域范围内重复声明在块级作用域中用let定义的变量，在作用域外不能访问

★底层实现上，let声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区，则会报错:“Cannot access 'a' before initialization”。当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。

★在循环中使用let声明的循环变量，在循环结束后会销毁

let name = "张三" //不会挂在到window对象上
console.log(window.name)


//在循环中 let绑定了每一次循环的块级 即{...}
//所以每一次循环体中 的i是不同的值
for (let i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) 
    }
}