ES6你不知道的let关键字及变量的提升

 

一、JavaScript变量创建到访问赋值的过程

• 创建 create/declare
• 初始化 initialize
• 赋值 assign

1、函数的提升

// 函数这种变量声明，首先会创建变量，再初始化，最后开始执行代码
doSth();
function doSth(){ var a = 1; var b = 2; console.log(a,b); } 

• 1、找到function声明的变量，在环境中创建这些变量
• 2、初始化这些变量，本例中将doSth(){ var a = 1; var b = 2; console.log(a,b); }的值初始化到 doSth
• 3、执行doSth这个函数

2、var变量的提升

// 此例子跟函数变量提升一致，但是var变量提升过程不一样

// 首先 创建变量，再初始化，随即执行代码（在此之前没有赋值） doSth(); function doSth(){ console.log(a); var a = 1; var b = 2; console.log(b); } 

• 1、函数内部收集var 变量声明，并在环境中创建这些变量，本例子中的var a,var b ;
• 2、变量初始化，及var a = undefined ;var b = undefined;
• 3、开始在环境中执行代码：从第一行console.log(a);开始，此时a为undefined，第二行 var a =1 ;给a 赋值；第三行给b赋值；第四行输出2；

3、let的变量提升过程

// 首先创建变量,随即执行代码（在此之前没有赋值）,执行代码的第一次赋值即为初始化，若后续再次赋值，则是真的赋值；

{
    console.log(x); let x = 1; x = 2; let y = 3; console.log(y) } 

• 1、收集所有的let声明：x 及y；创建这些变量；（此时并没有初始化）
• 2、执行代码：

// 执行第一行代码：
console.log(x); // 会抛出错误“Uncaught ReferenceError: x is not defined” // 执行第二行代码 let x = 1;// 初始化x =1 ，此时为初始化（并不是赋值）。初始化的值为1 // 执行第三行代码 x = 2 // 此时为x赋值2 // 执行第四行代码 let y = 3; 此时为变量y初始化，初始化的值为3 // 执行第五行代码 console.log(y）// 3 

4、临时死区TDZ（Temporal Dead Zone）

在let /const 变量声明前调用该变量都是放到这个TDZ中，如果引用或者访问该变量了就会报错Uncaught ReferenceError

// 源代码
{
    a = 2;
    let a ;
    a = 3
}

// 加入TDZ后的代码 { // 变量提升，创建 let a ; // TDZ 区开始--- a = 2； a ;//此时等同于a 初始化为undefined // TDZ 区结束--- // 此时可以访问a a = 3 }

转载于:https://www.cnblogs.com/ldld/p/10561796.html