变量提升机制

什么是变量提升

变量提升机制：当栈内存形成，JS代码自上而下执行之前，浏览器首先会把所有带“var”、“function”关键词的进行提前“声明（var）”或“定义（function）”。

1、概念

声明：带var、function的；（没复制默认undefined）

定义：只有带function的；（定义就是创建堆内存，给函数变量赋值）

变量提升只发生在当前执行上下文内，函数没有执行时在堆内存中存储的是代码字符串、键值对，还没有去栈内存中形成执行上下文；

浏览器很懒，不会重复操作，所以在代码执行时，遇到创建函数这部分代码时直接跳过，因为在变量提升时已经完成了（堆内存已有啦）；

在ES3/ES5语法规范中，只有全局作用域、函数私有作用域才会占用栈内存，其他大括号不形成栈内存。

2、全局作用域中带var与不带的区别

带var的，是在全局作用域下声明的变量，同样也是给window对象添加的属性。相当于给window去全局对象设置了一个属性，变量值就是属性值。（私有变量和window对象没关系）

变量提升阶段，“var‘’一个变量，同时就已经把变量当做属性赋值给window对象了，只不过没有值，是undefined；

全局变量与window中属性存在“映射机制”，双方改变互相影响；（ES3/ES5就是这个问题，ES6中出现let，就让这种映射避免了，let声明变量没有变量提升，同时也不给window对象添加属性）

不带var时，不是变量，本质是window对象下的属性，变量没有变量提升，也不是window全局对象的属性；只不过本来不是对象的属性时它的值也是undefined；可以用“in”验证。

3、私有（函数）作用域中带var与不带的区别

带var的在私有作用域变量提升时声明为私有变量；

不带var的不是私有变量，去上一级作用域的变量中找，直到找到window为止，再没有，就给window创建一个对应属性，跟全局下一样（“作用域链”）。私有作用域下操作非私有变量，就是操作别人的变量。

变量提升情况

1、只对等号左边变量提升

不管等号右边是不是函数，只看左边是不是var或者function；

sum();//2；函数的变量提升不仅声明还定义；

console.log(fn);//undefined,当做一般var变量对待；

fn();//报错 Uncaught TypeError: fn is not a function

var fn=function(){console.log(1);};//函数表达式，也是常用的，符合先声明定义后再使用。

function sum(){console.log(2);};

2、在条件判断下

在当前作用域下，不管条件是否成立，都会进行变量提升；

带var的，还是只声明；

带function的，在老版本浏览器渲染机制下，还是声明、定义都进行；

但新浏览器中为迎合ES6（有块级作用域），只进行声明，跟var一样

3、重名情况

同一作用域中，变量重名，不会重新声明，而是覆盖定义，（不管是变量提升还是代码执行皆如此！）

Let，Const创建的变量，不存在变量提升（ES6）

1、Let定义变量的特点

执行上下文形成后，代码执行前，没有变量提升；

定义变量时，不再给window对象添加属性；

浏览器提前检查代码，let定义的变量不能与代码中其他变量、window属性重名，否则直接报错，此时代码还没有执行；

2、包含Let变量的代码分析思路

针对JS代码，以浏览器视角，先检查区分代码中的ES6新语法、老语法，看看新老语法中同一作用域下变量是否有重复，有重复就报错啦，代码不执行；新语法走变量检测机制，老语法走变量提升机制。

3、暂时性死区

基于 let 创建变量，会把大部分｛｝当做一个块级作用域（类似函数的私有作用域），在这里会重新进行语法检测，看是否是基于新语法创建的变量，如果是就按新语法规范来解析。

在原有浏览器渲染机制下，基于typeof等逻辑符检测一个未被声明过的变量，不会报错，返回undefined；检测没有声明的变量却不报错===这就是老语法JS的暂时性死区！

console.log(type of a);//undefined

'a' in window;//false

ES6使用 let 解决了暂时性死区：

console.log(type of a);//报错；没有声明之前不能检测。

let a;