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
}