编译器预编译与变量提升

川长思鸟来 2021-08-14 00:47 390阅读 0赞

### **先有鸡还是先有蛋？** ###

直觉上会认为 JavaScript 代码在执行时是由上到下一行一行执行的。但实际上这并不完全正确，我们来看下面2个例子

//例子1：
    a = 2;
    var a; 
    console.log( a );  //2
    
    
    //例子2
    console.log(a); //undefined
    var a = 2;

通过这2个例子，我来深入的了解一下。到底是声明（蛋）在前，还是赋值（鸡）在前？

### **编译器解析规则** ###

咱们要先知道，编译器运行代码，分为2个阶段，一个预编译阶段，一个是运行阶段；

###      一、变量提升 ###

可以来看一下 var a = 2这个表达式，可能咱们认为这是一个声明，但是实际上javascript将其分为2个声明，var a 和 a  = 2；

第一个定义声明在编译阶段，第二个赋值声明在运行阶段；

a = 2;
    var a;
    console.log(a);
    
    变成了下面这样
    
    var a = undefined;
    a = 2;
    console.log(a)

打个比方，这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动” 到了最上面。这个过程就叫作提升。换句话说，先有蛋（声明）后有鸡（赋值）。

###   **    二、函数提升** ###

下面来看一下函数，函数声明也会进行函数提升

foo();
    function foo() { 
        console.log( a ); // undefined
        var a = 2; 
    }
    
    函数和变量提升之后就变成下面的
    
    function foo() {
        var a; 
        console.log( a ); // undefined 
        a = 2;
    }
    foo();

有一点需要注意，就是函数声明会进行，函数提升，但是函数表达式并不会进行函数提升

foo(); // 不是 ReferenceError, 而是 TypeError!
    var foo = function bar() { 
        // ...
    };
    
    这个函数表达式其实就是变量提升的变化
    
    var foo = undefined;
    foo();  //不是 ReferenceError, 而是 TypeError!
    foo = function bar() { 
        // ...
    };

### **      三、函数优先** ###

foo(); // 1
        var foo;
        function foo() { 
            console.log( 1 ); 
        }
        foo = function() { 
            console.log( 2 );
        };
        /************分析阶段******************************
        // 编译阶段
        var foo = undefined;
        foo = foo() { 
            console.log( 1 ); 
        }
        // 运行阶段
        foo(); //1
        foo = function() {
            console.log(2);
        }

当有变量声明和函数声明的变量名称相同时，根据函数优先原则，函数会覆盖变量；

下面这种情况，咱们在开发的时候，应该尽量避免。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70][]

## **下面我来总结一下预编译和变量提升：** ##

1、js代码的运行会分为2个步骤，预编译和运行（执行）阶段，预编译看下面的总结，执行就是从上往下一行一行的运行；

2、找文中的var 和 function；将var的变量和function声明的变量提升到顶部，var的初始化为undefined，function的初始化为函数。

3、var的变量和函数的变量名称相同的时候，根据函数优先的原则，函数会覆盖之前var变量；

4、var相同的名称，后续声明会忽略；function相同的名称，后续声明会覆盖；

5、函数定义var foo = function()\{\} 就当 变量来处理；也就是文中所说的函数声明会提升，但是函数表达式不会提升

6、在函数内部的预编译，还是用上面总结的方法就好了；

7、开心的执行，拿到想要的结果，祝你进阶成功！！！

参考：你不知道的js上册

[github进阶仓库，欢迎start][github_start]

# **原创不易，自由转载，保留出处！！！** #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70]: /images/20210813/f2af72ce414f46af9649f13126dce08a.png
[github_start]: https://github.com/GuoYuFu123/js-library