js 编译原理(前端大手子的进阶之路)

理解 【编译型语言】 和 【解释型语言】

编译型语言：是相对于解释型语言存在的，编译型语言首先将源代码编译生成机器语言，再由机器运行机器码（二进制）。像C/C++等都是编译型语言。

解释型语言：是相对于编译型语言存在的，解释型语言首先将源代码翻译成中间代码，再由解释器对中间代码进行解释运行。像JavaScript/Python等都是解释型语言。

两种方式只是翻译的时间不同.
打个比方：我有一篇中文演讲稿，但是演讲现场有外国人。我可以事先把整个稿子翻译成英文给他们(编译型语言); 也可以通过同声传译的方法一句一句边读边翻译给他们(解释型语言).

JavaScript运行三部曲（主要是预编译）

1. 语法分析
   js引擎检查你的代码有没有什么低级的语法错误

2. 预编译
   预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数
   遇到函数时 预编译什么时候发生?
   遇到函数的时候其实只有在执行函数的时候才会预编译那一部分

3. 解释执行
   执行代码

预编译理解实例

首先要知道变量声明 var... 和 函数声明 function...

<script>
    var a = 1; // 变量声明
    function b(y){ // 函数声明
        var x = 1;
        console.log('so easy');
    };
    var c = function(){ // 是变量声明而不是函数声明！！
        // ...
    }
    b(100);
</script>
<script>
    var d = 0;
</script>

引擎预编译处理代码过程:

• 页面产生便创建了GO全局对象（Global Object）（也就是window对象）
• 第一个脚本文件加载
• 脚本加载完毕后，分析语法是否合法 （语法分析）
• 开始预编译 （-- 预编译start --）
  • 查找变量声明，作为GO属性，值赋予undefined
  • 查找函数声明，作为GO属性，值赋予函数体

  // 伪代码
  GO/window = {
    // 页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
    a: undefined,
    c: undefined，
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
  }

• 解释执行代码（直到执行函数b） 执行代码

// 伪代码
GO/window = {
    // 变量随着执行流得到初始化
    a: 1,
    c: function(){
        // ...
    },
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}

• 执行函数b之前，发生预编译
  • 创建AO活动对象（Active Object）
  • 查找形参和变量声明，值赋予undefined
  • 实参值赋给形参
  • 查找函数声明，值赋予函数体

  // 伪代码
  AO = {
    // 创建AO同时，创建了arguments等等属性，此处省略
    y: 100,
    x: undefined
  }

• 解释执行函数中代码
• 第一个脚本文件执行完毕，加载第二个脚本文件
• 第二个脚本文件加载完毕后，进行语法分析
• 语法分析完毕，开始预编译
  • 重复最开始的预编译步骤……

## 参考

JavaScript预编译原理分析
《你不知道的JavaScript》 这本书好像很厉害的样子, 我看人家都参考了