深入理解ES6中的let修饰符

新的声明方式：let

1. 不属于顶层对象window

代码：结果： 2.不允许重复声明

代码：结果： 3.不存在变量提升

代码：结果： 4.暂时性死区

代码：结果： 5.块级作用域

说明：代码：结果： 6.拓展

问题提出：

不属于顶层对象window不允许重复声明不存在变量提升暂时性死区块级作用域 1. 不属于顶层对象window 代码：

;

console.log("用于测试let修饰符");
//var ->variable
//创建一个变量
var a = 5;
console.log(a);
//发现这行也会输出？为啥呢，不是说它是变量吗
//在js设计，将顶层属性和全局变量进行了挂钩，这是一个问题(污染全局变量)，js设计的败笔
console.log(window.a);

//相当于为一个属性赋值
p = 6;
console.log(p);
console.log(window.p);

//delete()用于删除对象的属性
delete p;
// console.log(p);

//测试let修饰符
let b = 90;
console.log(b);
//下面输出undefined
console.log(window.b);

//不允许重复声明变量
var c = 1;
var c = 2;
console.log(c);

let d = 1;
let d = 2;
console.log(d);

报错信息：Uncaught SyntaxError: Identifier 'd' has already been declared

//不存在变量提升
console.log(e);
var e = 0;

//Uncaught ReferenceError: Cannot access 'f' before initialization
console.log(f);
let f = 0;

//暂时性死区
//Uncaught ReferenceError: Cannot access 'g' before initialization
//说明：let形成了一个封闭的作用域，let必须在下且赋初始值才可使用，防止变量在声明之前就使用
// var g = 1;
// if (true) {
//     g >>= g;
//     let g;
// }

(function deadArea(a = b, b = 1) {
    console.log(a, b);
})();

在ES6之前(let/const)，js的变量作用域只有两个：

全局作用域(var声明)，与前面的顶层对象window联想在一起函数级作用域(在函数中声明)

//块级作用域：
for (var i = 0; i < 3; i++) {
    console.log(i);
}
console.log(i);
//块级作用域：
for (let j = 0; j < 3; j++) {
    console.log(j);
}
console.log(j);
if (true) {
    let aa = 1;
}
//词法声明不能出现在单语句上下文中,ES6规定
//Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
if (true) let ab = 1;

以下代码输出结果？

for (var i = 0; i < 3; i++) {
    setTimeout(function (){
        console.log(i);
    });
}

结果:

解释说明：

说明：setTimeout()执行是异步操作，并不会马上执行，js有一个事件循环机制‘event loops‘，有线程空闲且时间到的时候才执行for循环是一个同步操作(结合java去思考)，当console.log执行时，for循环已经执行完成，so你懂得换而言之：for循环三次，每次都会有一个异步的setTimeout()，每个异步操作取值时都是在for循环执行完毕都进行的，so。。。重点：异步操作要等到同步操作执行完毕才可取值(关键词：读写一致、线程安全)

修改：

//使用闭包修改至正常逻辑

for (var j = 0; j < 3; j++) {
    (function (k) {
        setTimeout(function () {
            console.log(k);
        });
    })(j);
}

//使用let修改
//在编译时会进行处理
for (let l = 0; l < 3; l++) {
    setTimeout(function () {
        console.log(l);
    });
}

let编译处理结果(本文使用的babel编译器)：