理解 js 编译过程理解

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

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

解释型语言：是相对于编译型语言存在的，解释型语言首先将源代码翻译成中间代码，再由解释器对中间代码进行解释运行。像JavaScript/Python等都是解释型语言。 （js其实是先编译再运行，只不过编译范围为当前作用域。）

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

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
}

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

理解代码执行过程中的LHS 和 RHS

LHS(Left-Hand-Side)查询 和 RHS(Right-Hand-Side)查询, 其实就是js引擎解析变量时的两种处理方法。
L 和 R 就是 赋值操作的左侧和右侧.

// 伪代码
a = b;

当浏览器遇到上边代码的时候, 对 a 和 b 按照不同的方法处理
对 a 执行LHS查询, 向上查询时, 找不到就创建一个全局变量;
对 b 执行RHS查询, 向上查询时, 找不到的时候会报错

参考

---

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