JS变量提升

什么是变量提升

首先我们要知道js执行前有一个“预编译”过程，
预编译主要有两个任务：

1. 声明所有var变量（初始为undefined）。
2. 解析定义式函数语句。

==也就是说变量的提升实在js的预编译阶段完成的。==

变量提升的概念：函数和变量的声明会被js的解释器放到最上面。
在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。

变量提升

• 栗子1

    function fn1() {
      a = 1;
      console.log(a); 
      console.log(window.a); 
      var a = 5;
      console.log(a); 
    }
    fn1();

输出结果依次为：1 undefined 5，因为代码在解析的时候相当于

      var a;//函数的声明会被解释器放到头部，预先声明，但没有赋值，所以在此刻a是undefined
       a = 1;
      console.log(a); 
      console.log(window.a); //此处打印的是全局变量的a，但是并没有声明全局变量a
      a = 5;
      console.log(a); 

---

• 栗子2

    function fn1() {
      console.log(a); // a is not defined
      a = 5;
      console.log(a); // 如果不考虑报错，输出5
    }
    fn1();

变量提升一定是要有变量声明的过程，如var xx=5。像上面栗子中如果不声明直接对a赋值，那么a将变成一个全局对象。不存在变量提升。所以第一个console会报错。

---

• 栗子3

    //全局作用域下
    a = 5;

    //全局作用域下
    var a = 5;

都在全局作用域下执行两端代码有何区别？

• a=1相当于window.a=5。为全局window对象添加了一个属性a值为5
• var a=5相当于在全局作用域中声明了变量a，在整个作用域中都有效
• 后者比前者多了一个声明的行为
• 前者没有变量提升过程，提前访问会报错，后者有变量提升

---

• 栗子4

function fn2(){
    console.log(a);//undefined
    if(true){
        var a = 10;
    }
    console.log(a);//10
}

这个栗子中，a变量的声明同样被提升了。所以说==if是没有作用域的==。只有函数有作用域。（for循环等也是一样的）

函数的提升

js中我们定义函数有两种方式：

• 函数表达式 var fn = function fn(){}
• 函数声明方式，也叫定义式 function fn(){}

当函数是通过函数声明的方式定义时，就会有函数提升，
特别注意的是：

• ==变量提升中，变量赋值并没有被提升，只是声明被提升了。==
• ==但是，函数提升有点不一样，函数体也会一同被提升。==

test();

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

所以会出现上面的情况，先执行test函数，然后声明，但是实际上函数确实被执行了，这就是与变量提升不同的点，==函数提升不止声明提升，函数体也会一同被提升==。

• 特别注意通过函数表达式创建的函数只会将声明提升，函数体不会提升

fn3();//fn3 is not a function

var fn3 = function(){}

再看两个示例：
1：

function bar() {
    console.log('bar1')
}

var bar = function () {
    console.log('bar2')
}

bar()

2：

var bar = function () {
    console.log('bar2')
}

function bar() {
    console.log('bar1')
}

bar()

结果全部输出 bar2，在预编译阶段，变量 bar 进行声明，但不赋值。函数bar进行创建并提升。运行阶段bar被赋值。

补充——es6中的变量提升

es6 新增块级作用域，let 和 const 声明的变量会产生块级作用域。
并且 let 和 const 声明的变量不会做变量提升。所以就会出现暂时性死区。

foo(10)
function foo(num) {
    // 暂时性死区
    console.log(foo)
    // 暂时性死区
    let foo = num
}

此时，浏览器报错foo is not defined。这就是因为 let 和 const 声明的变量不会做变量提升，所以变量的声明和赋值都是在console.log 之后，所以访问一个不存在，没有声明的变量时，浏览器自然会报错。