JavaScript变量提升和函数提升

首先先看两段代码

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

foo();

function foo() {
    console.log(1);
}
foo();

function foo() {
    console.log(2);
}
foo();
// 2 2 2

接下来我们来说一下js变量提升和函数提升的过程。

变量提升

在JavaScript中，我们定义一个变量，js解析会先将变量的声明提升作用域最开始的位置，然后在变量定义的地方进行赋值。

js解析第一段代码的流程如下：

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

函数提升

函数提升与变量提升类似，但又有所不同，变量的提升分为声明的提升和变量的赋值，而函数提升是直接将函数整个提升到作用域最开始的位置。

js解析第二段代码的流程如下：

function foo() {
    console.log(1);
}
function foo() {
    console.log(2);
}
foo();
foo();
foo();

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

函数提升后的位置是在变量提升的位置之后的。

例题

第一题

var a = 4;
function fn() {
    console.log(a)
    var a = 5;
}
fn();

输出undefined，因为函数中对于变量a的声明提升到了函数内部最开始的位置，此时变量a只声明为赋值，值为undefined。

第二题

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

输出function，因为函数提升后的位置是在变量提升的位置之后的。