函数、变量提升

变量和 函数声明提升

js自上而下的执行顺序受到很多新手和部分老手的共识，但这其实并不完全正确。这涉及到js的编译过程。

提升

js代码执行前，会先对代码进行编译。编译的一部分工作就是找到所有的声明，然后建立作用域将其关联起来，因此，在当前作用域内包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。这里的声明提前但是赋值并没有，也就是声明提升了，赋值还留在原地。

预解释

在js中带var 关键字或以function开头的都要进行预解释。
预解释的时候不管你条件是否成立，带var的都要提前声明。
预解释的时候只预解释等号左边的，右边的值不参与预解释。
自执行函数在全局作用域下是不进行预解释的。
预解释的时候，如果名字已经声明过了，就不会重新声明，但会重新赋值。
在函数体内return下面的代码虽然不执行，但要进行预解释，return后面的都是跟着我们的返回值，不进行预解释。

变量提升

变量声明，被提升在作用域顶端。如var a;
变量定义，声明部分会被提升，赋值部分不被提升。如var b='test'
函数表达式其实就是变量定义，只不过恰好被赋值的类型是函数。所以只提升变量名，不提升函数值

console.log(a);
var a=2;

等价于：

var a;
console.log(a);//undefind
a=2;

这就用到了我们说的声明提升了，赋值还留在原地。

function hoist(){
    if(!foo){
        var foo=5;
    }
    console.log(foo);
}
hoist();//5

如果当前作用域中存在此变量声明，无论它在什么地方声明，引用此变量的时候就会在当前作用域中查找，不会去外层作用域了。
经过一次预编译，上面的代码逻辑如下：

function hoist(){
    var foo;
    if(!foo){
        foo=5;
    }
    console.log(foo);
}
hoist()

变量声明提升到了函数的顶部，初始值为undefind，自然if语句就会被执行，foo变量赋值为5。
类似的，还有下面一个例子：

var foo=3;
function hoist(){
    var foo=foo||5;
    console.log(foo)//5
}
hoist();

结果是5不是3.虽然外层作用域有个foo变量，但函数内是不会去引用的。
如果当前作用域中声明了多个同名变量，那么根据我们的推断，它们的同一个标识符会被提升至作用域的顶部，其他部分按顺序执行，比如：

function hoist(){
    var foo=3;
    {
        var foo=5;
    }
    console.log(foo);//5
}
hoist();

由于js没有块级作用域。只有全局作用域和函数作用域。所以预编译之后的代码逻辑为：

function hoist(){
    var foo;
    foo=3;
    {
        foo=5;
    }
    console.log(foo);//5
}
hoist();

函数提升

函数声明全部被提升，包括优先级比变量声明要高，名字和它相同的变量声明会被忽略。没有被调用就不会被解析
如下代码：

function hoist(){
    foo();//output : i am hoisted
    funciton foo(){
        console.log('i am hoisted')
    }
}
hoist();

为什么函数声明在调用之前就可以声明，其实。引擎是把函数声明的整个代码提升到了当前作用域的顶部。

function hoist(){
    function foo(){
        console.log('i am hoisted')
    }
    foo()//output: i am hoisted;
}
hoist();

相似的，如果在同一个作用域中存在多个同名函数声明，后面出现的将会覆盖前面的函数声明。

function hoist(){
    function foo(){
        console.log(1)
    }
    foo();//output:2
    function foo(){
        console.log(2)
    }
}
hoist();

当函数声明遇到函数表达式时，会有什么样的结果呢？先看下面这段代码：

function hoist(){
    foo();//2
    var foo=function (){
        console.log(1)
    }
    foo();//1
    function foo(){
        console.log(2)
    }
    foo();//1
}

运行之后我们会发现，输出的结果依次是211，因为函数是一等公民，函数声明的优先级最高，会被提升至当前作用域的最顶端，所以第一次调用时实际执行了下面定义的函数声明，然后第二次调用时，由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也会打印同样的结果。

function hoist(){
    var foo;
    foo=function foo(){
        console.log(2)
    }
    foo();//2
    foo=function (){
        console.log(1)
    }
    foo();//1
    foo();//1
}

我们也不难理解。函数和变量重名时，会如何执行：

var foo=3;
function hoist(){
    console.log(foo);//function foo(){}
    var foo=5;
    console.lgo(foo);//5
    function foo(){}
}
hoist();
console.log(foo);//3

预编译后是这样的：

var foo=3;
function hoist(){
    var foo;
    foo=function foo(){};
    console.log(foo);//function foo(){}
    foo=5;
    console.log(foo);//5
}
hoist();
console.log(foo);//3

参数重名

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

function fn(10){
  var fn=10;已初始化的一般变量大于未初始化的一般变量
  var fn;
  console.log(fn);
  fn=3;
  console.log(fn)//
}

在js中如果重名则已初始化的一般变量>函数>函数参数>未初始化一般变量。

var a;
function a(){
  var b=0;
}//结果为function a(){var b=0}因为函数的优先级大于未初始化的一般变量。

var a=1;
function a(){
  var b=0;
}//结果为1,因为已初始化的一般变量优先于函数。

面试题解析

console.log(foo);//undefined
console.log(bar);//function bar(){}
var foo=function (){};
function bar(){}

预编译之后是：

var foo;
function bar(){}
console.log(foo);
console.log(bar);
foo=function(){};

function foo(){
    a=5;
    console.log(window.a);//undefind
    console.log(a);//5
    var a=10;
    console.log(a)//10
}
foo()

预编译如下：

function foo(){
    var a;
    a=5;//因为在自己的作用域有a声明的存在，a并不会污染全局。而是绑定到本作用域的a上。
    console.log(window.a);
    console.log(a);
    a=10;
    console.log(a)
}
foo()

function foo(){
    var a=1;
    function b(){
        a=10;
        return '';
        function a(){}
    }
    b();
    console.log(a)
}
foo();

编译如下：

function foo(){
    var a;//a和b一起提升到作用域的顶部
    function b(){
        function a(){}//b里面的a也提升到作用域b的顶部
        a=10;//因为上面有变量a,所以a也不会污染到上一层
        return '';
    }
    a=1;
    b();//这个有两点要搞清楚b的a没有污染到这个作用域；
    console.log(a)//就近原则，本函数的log(a),找离自己最近的a变量
}
foo();
4.

console.log(a);
var a = 1;
console.log(b);

`console.log(a)`输出undefined;因为a变量提升,相当于

var a;
console.log(a);

只声明了没有赋值，为undefined。
console.log(b)会报错，因为既没有声明也没有赋值。
5. 

   sayName('world');
sayAge(10);
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

sayName函数会输出'hello''world',sayAge会报错
原因：第一个是函数声明，会函数声明前置，所以函数声明不必放在调用的前面。而第二个是函数表达式，相当于普通变量，所以函数调用必须放在函数声明的后面，否则会报错。