变量提升

通常JS引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理。
js怎么创建变量？
示例

1
2
var a = 1;
var b = 2;

js在解析上面的代码的时候，其实会按照下面的方式进行解析的：

1
2
3
4
var a;
var b;
a = 1;
b = 2;

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

现在我们来看看这个例子：

1
2
3
4
5
6
7
function foo() {
  var a = 1;
  console.log(a);
  console.log(b);
  var b = 2;
}
foo();

思考一下会输出什么？
分析
实际上的解析过程是

1
2
3
4
5
6
7
8
9
function foo() {
  var a;
  var b;
  a = 1;
  console.log(a); // 1
  console.log(b); // undefined
  b = 2;
}
foo();

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

所以变量的提升，提升的其实是变量的声明，而不是变量的赋值。

函数提升

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

同名方法

1
2
3
4
5
6
7
8
function foo() {
    console.log('foo1');
}
foo();
function foo() {
    console.log('foo2');
}
foo();

解析过程

1
2
3
4
5
6
7
8
function foo() {
    console.log('foo1');
}
function foo() {
    console.log('foo2');
}
foo();  // foo2
foo(); // foo2

在js里同时有两个同名函数方法时，会默认调用最后一个同名方法

同名的函数表达式

1
2
3
4
5
6
7
8
var foo = function () {
    console.log('foo1');
}
foo();
var foo = function () {
    console.log('foo2');
}
foo();

解析过程

1
2
3
4
5
6
7
8
9
10
var foo;
var foo;
foo = function () {
    console.log('foo1');
}
foo();  // foo1
foo = function () {
    console.log('foo2');
}
foo(); // foo2

实质是变量提升的过程

变量提升和函数提升的顺序

在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置
函数提升优先级高于变量提升，且不会被变量声明覆盖，但会被变量赋值覆盖（重点）
举个例子：
下面的代码输出什么？

1
2
3
4
5
6
7
8
function foo() {
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
}
foo();

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

1
2
3
4
5
6
7
8
9
function foo() {
  function a() {}
  var a;
  console.log(a); // a()
  a = 1;
  console.log(a); // 1
  console.log(a); // 1
}
foo();

所以从上面的例子可以看出如果函数提升会被变量声明覆盖的话，则第一个console.log(a)就等于undefined。

我们再来看一个例子，看看num等于多少

1
2
3
4
5
6
7
var foo=function(x,y){
return x-y;
}
function foo(x,y){
return x+y;
}
var num=foo(1,2);

思考1分钟，觉得num等于多少？
实际上的解析过程是：

1
2
3
4
5
6
7
8
9
function foo(x,y){
return x+y;
}
var foo;
var num;
foo = function(x,y){
return x-y;
}
num = foo(1, 2);

印证了函数提升不会被变量声明覆盖，但会被变量赋值覆盖

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

下面的栗子中，b不会进行变量提升。

1
2
3
4
5
6
7
8
9
function foo() {
  console.log(a);
  console.log(b); // 报错 Uncaught ReferenceError: b is not defined
  b = 'aaa';
  var a = 'bbb';
  console.log(a);
  console.log(b);
}
foo();