一、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 }