深度分析JavaScript中预编译现象

在学习前端js过程中我们知道，js代码是单线程进行编译操作，但是这并不代表是完全按照代码顺序去执行一些语句，今天小编带大家来深度认识一下就是代码预编译过程到底实现了什么，(前提小编多啰嗦两句平时写代码过程之中我们只是刻意的去避免了预编译带来的问题,但是并不代表这个知识点我们不需要去了解)。前面是一些概念性的东西后面小编会通过很多案例去跟大家一起理解攻克。

干货：

一、什么是预编译

预编译用通俗例子来讲就是代码实现优先级的问题

二、了解GO、AO对象

在预编译过程之中全局上编译前会产生GO对象（也就是window对象去对对象去做判断以及存储数据），函数体中会产生AO对象去实现相同的功能，AO实现步骤如下图所示（那么全局时步骤也相同，只是少了不存在的参数部分）

三、例题讲解

 · 之前的介绍肯定非常的抽象，但前面的只需要记住这个规律就好小编这边来通过例题说明

   // 先来一个最简单的熟悉一下步骤
   var a=100;

   function fn() {
       console.log(a);
   }    
  //很显然是个一眼可以看出来的答案100

根据预编译公式先生成GO对象

1.最初始：

GO{

   a : undefined

   fn : function( ){......}

 }

2.a赋值后：

GO{

   a : 100,

   fn : function( ){......}

 }

3.运行函数

生成AO对象,根据公式AO内为空

AO{

}

所以输出在GO中去找。

 ·上面这道题非常简单而且没有什么冲突那么再看下面这道（重点）

 function test (){
        console.log(b);
        if(a){
            var b=100;
        }
        console.log(b);
        c=234;
        console.log(c);
    }
    var a;
    test();
    a=10;
    console.log(a);
    console.log(c);

步骤：

1.GO{

  a : undefined,

  test : function( ) {......}

}

2.定义a后执行函数生成AO

AO{

  b : undefined,  
}

3.同时a为undefined，if语句不能实现

AO{

  b : undefined,  
}

4.c=234函数内部直接赋值相当于直接定义在GO之中，同时函数执行完后a赋值

GO{

  a : 10,

  test : function( ) {......},

  c : 234

}

所以最后输出结果对应为：

函数之中变量如果本身AO没有就在GO中去找，两者是并存关系，同时存在只是顺序不同（我自身因为节约空间没一直写这边补上解释以免误区）

总结：

预编译刚开始可能觉得麻烦，但见多了之后我们应该会比较敏感，个人感觉多出现在面试题之中，主要在于明白GO、AO对象的存在，以及他们的预编译规律。

题外话：

小编写这篇文章是相当之痛苦，因为这是我打算规范自己打字的第一天，我自身打字速度是还可以的，但我个人认为就算在快也不会比规范用习惯后快，所以为了未来的效率，开始规范自己的打字，同样如果跟小编一样是在初期的同学还是推荐大家纠正开始按照规范方法打字，受益终生！！！