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
}