js 变量提升和函数提升

js 变量提升和函数提升

我们先来看看这段代码的输出结果。

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

答案如下，这是为什么呢？？

原理如下

1. 函数声明会置顶
2. 变量声明也会置顶
3. 在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置，不同的是，函数的提升后的位置是在变量提升后的位置之后的，也就是函数提升在变量提升上。
4. 变量和赋值语句一起书写，在js引擎解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置
5. 声明过的变量不会重复声明

以上代码等同于

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

或者更仔细的写法

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

下面还有以下例子

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

// 代码段2
function foo() {
  var a;
  function a() {}
  console.log(a);
}
foo();

会输出什么呢？

答案是

1 ， function a() {}

相当于

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

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