1. 什么是变量提升？
当栈内存（作用域）形成， JS代码自上而下执行之前，浏览器首先会把所有带var/function关键字的进行提前声明或者定义，这种预先处理机制称之为变量提升。
console.log(a); // undefined
console.log(fn); // fn(){var b = 2}
console.log(b); // Uncaught ReferenceError: b is not defined
var a = 1;
function fn() {
var b = 2;
};
变量提升阶段，var只声明，而function声明和赋值都会完成
最开始的时候输出a和fn，会发现a是undefined，而fn是function的字符串。 在变量提升阶段，带var的只声明（默认值为undefined），而带function的变量声明和赋值都会完成。到了代码执行阶段，var声明的变量会赋值，而function声明的变量因为在变量提升阶段已经赋值，所以直接跳过。
变量提升只发生在当前作用域
变量提升只发生在当前作用域，开始加载页面的时候只对全局作用域下的进行变量提升，此时函数作用域如果没执行的话存储的还只是字符串而已。
当函数执行时会生成函数作用域，也称私有作用域，在代码执行前会先形参赋值再进行变量提升。在ES5中作用域只有全局作用域和私有作用域，大括号不会形成作用域。全局作用域下声明的变量或者函数是全局变量，在似有作用域下声明的变量是私有变量。
私有变量和全局变量
只有在私有作用域中用var和function声明的变量和形参两种才是私有变量，其他都是全局变量。剩下的都不是私有的变量，都需要基于作用域链的机制向上查找。
var a = 12,
b = 13,
c = 14;
function fn(a) {
console.log(a, b, c); // 12 , undefined , 14
var b = c = a = 20;
console.log(a, b, c); // 20 ,20 ,20
}
fn(a);
console.log(a, b, c); //12,13,20
上例中全局变量有a,b,c和fn，私有变量有a（形参也是私有变量）和b。
- 先看第一个输出为什么输出为
12 , undefined , 14。当fn执行，第一步是形参赋值，私有变量a = 12，然后变量提升，私有变量b默认赋值undefined，c不是私有变量，所以向上级作用域查找，全局变量c的值是14。 - 然后第二个输出为什么是
12,20,20，在私有作用域中，执行了var b = c = a = 20;，这个操作相当于var b = 20 ; c = 20; a = 20。b变量从默认undefined赋值为20 和a变量则重新赋值为20，而c变量因为不是私有变量，所以c = 20相当于window.c = 20，故输出12,20,20。 - 最后第三个输出为什么是
12,13,20，因为fn内部有私有变量a和b，函数内部修改的a和b都是私有变量，不影响全局，而c不是私有变量，所以沿着上级作用域查找，修改的话c = 20相当于window.c = 20，所以输出12,13,20。
2. 条件判断下的变量提升
在当前作用域下，不管条件是否成立都要进行变量提升，不过新版本浏览器对function在条件判断内的变量提升做了限制。带var的还是只有声明，带function的在老版本浏览器渲染机制下，声明和定义都会处理，但是为了迎合ES6的块级作用域，新版浏览器对于函数（在条件判断中的函数），在变量提升阶段，不管条件是否成立，都只是先声明，没有定义，类似于var，通过下面的例子可以进一步论证：
console.log(a); // undefined
console.log(b); // undefined
if (false) {
var a = 1;
function b() {
console.log("1");
}
}
console.log(a); // undefined
console.log(b); // undefined
通过上例可以发现var和function都进行了变量提升，但是function没有在变量提升阶段定义。这里需要注意的是，如果条件成立的话，判断体内函数的处理会有点不一样，看下例：
console.log(fn); //undefined
if (true) {
console.log(fn); // function fn() { console.log(1) }
function fn() {
console.log(1);
}
}
console.log(fn); // function fn() { console.log(1) }
这里比较疑惑的是函数体内将然输出fn的函数体，之前不是说在条件判断内不管条件是否成立，都只是先声明，没有定义吗，所以不是应该输出undefined才对吗？
条件判断内不管条件是否成立，都只是先声明，没有定义。这个结论其实也有个前提，就是在代码执行前的变量提升阶段，在条件判断中的函数，按照正常思维，应该是只有条件判断成立了，它才会赋值，如果条件判断不成立，这个函数就用不到，就不应该赋值。所以如果条件判断成立，JS在进入到判断体中（在ES6中它是一个块级作用域），第一件事不是执行代码，而是类似变量提升，先把函数声明和定义了，也就是说判断体中代码执行之前，判断体内的函数就已经赋值了。
3. 变量提升中重名的处理
在变量提升中，如果名字重复了，不会重新的声明，但是会重新赋值，不管是代码提升阶段还是代码执行阶段都是如此。要注意的是带var和function关键字声明相同的名字，这种也算是重名了（其实是一个fn，只是存储的类型不一样）。看一道题目来加深下理解：
fn(); // 2
function fn() { console.log(1) };
fn(); // 2
var fn = 100;
fn(); //Uncaught TypeError: fn is not a function
function fn() { console.log(2) };
上例中，代码执行前会先变量提升，三个变量都会提升，重名的话后面的变量覆盖前面的，同时function在变量提升阶段声明和定义都会完成，所以fn的值为function fn() { console.log(2) };。然后开始执行代码，执行fn()输出2，因为代码执行阶段function不会重复定义，所以第二个fn()也输出2，直到变量fn=100，fn变量的类型被改变成number类型，所以后面再执行fn()的时候就直接报错。
4. ES6中的let不存在变量提升
在ES6中基于let/const等方式创建的变量或者函数都不存在变量提升机制
console.log(a); // Uncaught ReferenceError: a is not defined
let a = 1;
console.log(a); // 1
因为a用let声明不存在变量提升，所以声明a之前输出a的话会报错。
如果用let声明的全局变量和window属性的映射机制会被切断
console.log(window.a); //undefined
let a = 1;
console.log(window.a); //undefined
用let声明的a是个全局变量，但是我们在赋值前和赋值后输出window.a都是undefined。
在相同的作用域中，let不能声明相同名字的变量
let a = 10;
console.log(a);
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(a);
用let声明变量虽然没有变量提升，但是在当前作用域代码自上而下执行之前，浏览器会做一个重复性检测，自上而下查找当前作用域下所有变量，一旦发现有重复的，直接抛出异常，代码也不再执行，换句话说，就是虽然没有把变量提前声明定义，但是浏览器已经记住了，当前作用域有哪些变量。上例第二行console.log(a)没有输出而直接在let a = 20这一行报错，说明代码还没有执行，在重复检查机制中就直接抛出异常了。
var a = 10;
let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared
b = 10; //Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 20;
还有一点要注意的是不管用什么方式在当前作用域下声明了变量，再次使用let创建都会报错。
5. 暂时性死区
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var a = 10;
if (true) {
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 20;
}
上例中有全局变量a，但是块级作用域内let又声明了一个局部变量a，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。
上面代码中，在let命令声明变量tmp之前，都属于变量tmp的死区，暂时性死区也意味着typeof不再是一个百分之百安全的操作。
typeof b; // undefined
typeof a; // Uncaught ReferenceError: Cannot access 'a' before initialization
let a;
上面代码中，变量a使用let命令声明，所以在声明之前，都属于a的死区，只要用到该变量就会报错。因此typeof运行时就会报错。不过b是一个不存在的变量名，结果返回undefined。所以在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。
网友评论