ES6——块级绑定

一、声明变量的问题

1.重复声明

允许重复的变量声明：导致数据被覆盖

var a = 1;
function print(){
    console.log(a)
}
print();//1
var a = 2;
print();//2

2.变量提升

1. 怪异的数据访问

if (Math.random() < 0.5) {
    var a = "abc";
    console.log(a);
}
else {
    console.log(a);
}
console.log(a);

2. 闭包问题

for (var i = 1; i <= 10; i++) {
    btn.onclick = function () {
        console.log(i); //11
    }
}

3.全局变量挂载

全局变量挂载到全局对象：全局对象成员污染问题

var console = "abc";
console.log(console)

二、let声明变量

ES6不仅引入let关键字用于解决变量声明的问题，同时引入了块级作用域的概念;
块级作用域：代码执行时遇到花括号，会创建一个块级作用域，花括号结束，销毁块级作用域

1.块级作用域

if (Math.random() < 0.5) {
    let a = 123; //定义在当前块级作用域
    console.log(a) //当前块级作用域中的a
}
else {
    //这是另外一个块级作用域，该作用域中找不到a
    console.log(a)
}
console.log(a);//访问不到Math.random()<0.5的a

2.声明变量

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

let a = 123;
console.log(window.a);//undefined

2. let声明的变量，不允许当前作用域范围内重复声明

let a = 123;
let a = 456;
console.log(a);

3. 一个作用域只能生命一次

let a = 123;
function test(){
    let a = 456;
    console.log(a)
}
test();//456

3.变量提升

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

1. let不会有变量提升，因此，不能在定义let变量之前使用它

console.log(a)
let a = 123;

2. 闭包
   在循环中，用let声明的循环变量，会特殊处理，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域（每次循环，使用的是一个全新的循环变量）；
   在循环中使用let声明的循环变量，在循环结束后会销毁。

for (let i = 1; i <= 10; i++) {
    button.onclick = function () {
        console.log(i) //1、2、3、4...
    }
}

三、const声明常量

const和let完全相同，仅在于用const声明的变量，必须在声明时赋值，而且不可以重新赋值。

1.变量声明

1. 必须在声明时赋值，而且不可以重新赋值。

const a;
console.log(a);

const a;
a = 1;
console.log(a);

const a = 0;
a = 1;
console.log(a);

1. 根据经验，开发中的很多变量，都是不会更改，也不应该更改的。
2. 后续的很多框架或者是第三方JS库，都要求数据不可变，使用常量可以一定程度上保证这一点。

2. 常量不可变，是指声明的常量的内存空间不可变，并不保证内存空间中的地址指向的其他空间不可变。

const a = {
    name: "kevin",
    age: 123
};
a.name = "abc";
a.sex = 'male';
console.log(a,a.sex);

2.常量命名

1. 特殊的常量：该常量从字面意义上，一定是不可变的，比如圆周率、月地距地或其他一些绝不可能变化的配置。通常，该常量的名称全部使用大写，多个单词之间用下划线分割

const PI = 3.14; //圆周率
const MOON_EARTH_DISTANCE = 3245563424; //月地距离

2. 普通的常量：使用和之前一样的命名即可（小驼峰式）

3.循环遍历

1. 在for循环中，循环变量不可以使用常量

const btn = document.getElementsByClassName('btn')[0];
for (const i = 1; i <= 10; i++) {
    btn.onclick = function () {
        console.log(i) //使用的是当前作用域中的i，i不能改变
    };
}

2. 在遍历时可以使用for in

var obj = {
    name:"kevin",
    age:1
}
for (const prop in obj) {
    console.log(prop)
}