关于变量提升的一些细节补充

1. 关于带var 与 不带var的问题

• 首先思考一下下方代码：

console.log('a' in window);
var a = 12;
console.log(a);
window.a = 14;
console.log(a);
========================
//结果为依次为 true 12 14

由此可以看出全局变量和window对象是有映射机制存在的

• 在全局下声明一个变量，也相当于给window设置了一个属性（私有作用域中声明的私有变量和WINDOW没什么关系了）
• 全局变量值修改，window的属性值也跟着修改
• 同样，window属性修改 全局变量也随之改变

经过上面的思考可能会对下变量提升阶段的一些细节更更容易理解

• 接下来我们看第一种不带var的情况（全局不带var）

（忽略报错对代码执行的影响）
console.log(a);//=>Uncaught ReferenceError: a is not defined
console.log(window.a);//=>undefined
a = 1;//=>window.a=1
console.log(a);//=>1
console.log(window.a);//=>1

可以理解为不加VAR的本质是WIN的属性，而不是变量

• 再来分析思考一下私有作用域不带var的情况

//代码执行前 先全局作用域下的变量提升
//声明 a,b 声明加定义了一个fn 
//然后代码执行
console.log(a, b);//=>undefined undefined
var a = 12, //变量赋值
    b = 12;
function fn() {
	//函数执行前 先进行形参赋值，然后变量提升
	//没有形参 那么变量提升 只声明了a
    console.log(a, b);//=>undefined 12
    //操作到变量时 先在自己私有作用域查找 没有的话沿着作用域链向上查找 私有作用域没有b 那么找到上层作用域的b 所以为12
    var a = b = 13; //变量赋值 也相当于时操作的上层作用域的b
    /*var a=13;  b=13;*/
    console.log(a, b);//=>13 13
}
fn(); //函数执行 （流程我就写在函数体中了）
console.log(a, b);//=>12 13

这里可能有的同学会疑惑
大家要分清楚下面两种情况
var a = 12,b = 13;//=>这样写B是带VAR的*/
var a = b = 12;//=>这样写B是不带VAR的*/
//这种情况只是相当于 声明了变量a 并且赋值为12 给b赋值为12 并没有声明

这里是引用
由上面的案例可以看出：

1. 带var的在私有作用域变量提升阶段，都声明为私有变量，和外界没有关系
2. 不带var不是私有变量，会向上级作用域查找，看是否为上级的变量，不是就继续查找，一直到window，也就是在私有作用域这个非私有变量，是一直操作别人的

• 还有一种情况就是私有作用域中不带var，并且沿着作用域链也没查找到

function fn() {
    // console.log(b);//=>Uncaught ReferenceError: b is not defined
    b = 13;
    console.log('b' in window);//=>true  
    console.log(b);//=>13
}
fn();
console.log(b);//=>13

在作用域链查找的过程中，如果找到WIN也没有这个变量，相当于给WIN设置了一个属性B (window.b=13)

经过上面的思考希望对大家对变量提升有关var的问题有一些更好的理解

2、在条件判断下的变量提升

• 首先在当前作用域下，不管条件是否成立都要进行变量提升
• 带VAR的还是只声明
• 带FUNCTION的在老版本浏览器渲染机制下，声明和定义都处理
• 但是为了迎合ES6中的块级作用域，新版浏览器对于函数（在条件判断中的函数），不管条件是否成立，都只是先声明，没有定义，类似于VAR

console.log(fn);//undefined
if (1 === 1) {
    console.log(fn);//函数本身
//当条件成立，进入到判断体中（在ES6中它是一个块级作用域）
//第一件事并不是代码执行，而是类似于变量提升一样一种词法分析，先把FN声明和定义了
//，也就是判断体中代码执行之前，FN就已经赋值了
    function fn() {
        console.log('ok');
    }
}
console.log(fn);//=>函数本身

3、关于声明重名的问题

• 下方代码会输出什么呢？

var fn = 12;
function fn() {
}
console.log(fn)

正确答案是==============》 12（有没有好奇的小伙伴）

• 很多同学认为上方代码会输出function
• 实际上带VAR和FUNCTION关键字声明相同的名字，这种也算是重名了（其实是一个fn，只是存储值的类型不一样）
• 关于重名的处理：如果名字重复了，不会重新的声明，但是会重新的定义（重新赋值）[不管是变量提升还是代码执行阶段皆是如此]
• 因为函数在变量提升阶段会声明并且定义 然而变量只是声明，所以在代码执行阶段，遇到 var fn = 12；时会给fn重新赋值为12

快来用下面的题目验证一下自己有没有掌握吧！！

fn();//=>4
function fn() {console.log(1);}
fn();//=>4
function fn() {console.log(2);}
fn();//=>4
var fn=100;//=>带VAR的在提升阶段只把声明处理了,赋值操作没有处理,所以在代码执行的时候需要完成赋值 FN=100
fn();//=>100() Uncaught TypeError: fn is not a function
function fn() {console.log(3);}
fn();
function fn() {console.log(4);}
fn();