JavaScript变量提升和函数提升 通俗易懂

1.什么是函数声明和函数表达式
1）函数声明（function declaration），通过function 关键字，functionName函数名，arg参数（可选）定义的函数。
例：function foo(a){…}
2）函数表达式: 将函数声明赋值给一个变量，这个表达式叫做函数表达式。
例：匿名函数表达式：var res = function(){…},函数是匿名函数。
具名函数表达式：var res1 = function foo(){…},函数有函数名的表达式。
2.什么是提升？
通常js引擎会在正式执行之前进行一次预编译，在这个过程中，会将函数声明以及变量声明提升至作用于的顶端，并且赋值undefined，这个过程叫过提升。
先来看两个栗子，下面的两段代码分别输出什么？
代码1：

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

代码2：

function foo() { 
	var a; 
	function a() {
	} 
	console.log(a); 
} 
foo();

答案是:代码1打印的是1，代码段2打印的是 a() 函数。

为什么呢？其实就是涉及到了js中的变量提升和函数提升的具体过程了。
（1）变量提升:
js是怎么创建变量的呢？
如下面的代码：

var a = 1; 
var b = 2; 
// js在解析上面的代码的时候，其实会按照下面的方式进行解析的：
var a; 
var b; 
a = 1; 
b = 2;

所以 js 并不是在我们定义一个变量的时候，声明完成之后立即赋值，而是把所有用到的变量全部声明之后，再到变量的定义的地方进行赋值，变量的声明的过程就是变量的提升。

function foo() { 
		var a = 1; 
		console.log(a); 
		console.log(b); 
		var b = 2; 
} 
foo();

上面的代码在js的眼中是这样解析的：

function foo() { 
		var a; 
		var b; 
		a = 1; 
		console.log(a); // 1 
		console.log(b); // undefined 
		b = 2; 
} 
foo();

所以输出的 a 的值为1， b的值为 undefined。
变量在声明提升的时候，是全部提升到作用域的最前面，一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了，而是赋值的位置在变量原本定义的位置。原本js定义变量的地方，在js运行到这里的时候，才会进行赋值操作，而没有运行到的变量，不会进行赋值操作。
所以变量的提升，提升的其实是变量的声明，而不是变量的赋值。

（2）函数提升
函数的提升和变量的提升类似，都是提升到作用域的最开始的位置，只不过变量的提升是分两步的，第一步是变量声明的提升，第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置，相当于剪切过去的样子。
1）函数声明

function foo() { 
	foo(); 
	function foo1() { 
		console.log(‘hello world‘); 
	} 
} 
foo();
// 上面的代码预编译之后：
function foo() { 
	function foo1() { 
		console.log(‘hello world‘); 
	} 
	foo1(); 
} 
foo();

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

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

运行后我们会发现，输出的结果依次是2 1 1.
因为在js中函数是一等公民，函数声明的优先级最高，会被提升至当前作用域的最顶端，然后才是函数表达式和变量按顺序执行，所以第一次调用实际上执行了下面定义的函数声明，而第二次调用时，由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也是同样的结果， 上面的过程预编译之后的逻辑如下：

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

3、变量提升和函数提升的顺序
在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置，不同的是，函数的提升后的位置是在变量提升后的位置之后的。
举个例子：
下面的代码输出什么？

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

上面的代码在js眼中是这样解析的：

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

所以从上面的栗子可以看到，变量的提升是在函数提升之前的，但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的，而函数提升是相当于直接剪切到最前面的。

最后，注意：只有声明的变量和函数才会进行提升，隐式全局变量不会提升。
下面的栗子中，b不会进行变量提升。

function foo() {
  console.log(a);
  console.log(b); // 报错
  b = 'aaa';
  var a = 'bbb';
  console.log(a);
  console.log(b);
}
foo();

总结：函数声明的优先级最高，会被提升至当前作用域的最顶端，然后才是函数表达式和变量按顺序执行！！！