JavaScript 预编译原理详解：GO与AO对象创建机制

JavaScript 预编译原理概述

JavaScript 预编译原理

近期投入大量时间复习了作用域与预编译相关知识点。

参考了多篇技术文章，并查阅了以往阅读的书籍，发现许多资料并未深入讲解预编译机制。

回顾后发现，尽管之前自认为掌握良好，但实际上仍存在思维误区，部分博文内容可能具有误导性。

今晚对混乱的思路进行了梳理。

首先整理预编译相关知识，后续若有时间再详细讲解作用域。

需明确，JavaScript的预编译与传统编程语言的编译过程不同，可将其视为一种特殊的编译过程。

JavaScript属于解释型语言，

作为解释型语言，其特点是边编译边执行。

传统编译过程包含分词、解析、代码生成等多个步骤。

关于传统编译的科普，日后有机会再行介绍。

以下分享对JavaScript预编译机制的理解。

JavaScript运行三部曲

JavaScript运行三部曲

脚本执行时，JavaScript引擎具体执行了哪些操作？

• 语法分析
• 预编译
• 解释执行

在正式执行代码前，引擎会先执行两个预备步骤。

语法分析较为简单，主要检查代码是否存在低级语法错误。

解释执行即实际运行代码的过程。

预编译可简单理解为在内存中开辟空间，用于存放变量与函数。

理解预编译有助于深入掌握作用域概念。

JS预编译时机解析

JS预编译何时发生

这曾是笔者主要的思维误区所在。

预编译究竟在何时触发？

希望读者不要被上述运行流程误导，

误以为预编译仅发生在script标签内代码执行之前。

这种理解并不完全错误。

预编译确实会在script代码块执行前发生。

但它更频繁地发生在函数执行之前。

JS预编译实例分析

JS预编译实例

举例前，先明确以下概念：

• 变量声明 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>

观察引擎对这段代码的处理过程。

1. 页面加载时创建全局对象（Global Object，即window对象）。

2. 加载第一个脚本文件。

3. 脚本加载完成后，进行语法合法性检查。

4. 开始预编译阶段。

查找变量声明，将其作为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之前，触发预编译。

• 创建活动对象（Active Object，简称AO）。
• 查找形参和变量声明，值设为undefined。
• 将实参的值赋给形参。
• 查找函数声明，值设为函数体。

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

解释执行函数内部的代码。

第一个脚本文件执行完毕，加载第二个脚本文件。

第二个脚本文件加载完成后，进行语法分析。

语法分析结束后，开始预编译。

重复最初的预编译步骤……

请注意，

预编译阶段仅处理变量声明和函数声明，不涉及初始化（赋值），匿名函数不参与预编译。

变量初始化仅在解释执行阶段进行。

最后进行总结。

预编译机制总结

总结

预编译(函数执行前)※

1. 创建AO对象（Active Object）。 2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined。 3. 实参与形参统一，实参值赋给形参。 4. 查找函数声明，函数名作为AO对象的属性，值为函数引用。

预编译(脚本代码块script执行前)

1. 查找全局变量声明（包括隐式全局变量声明，即省略var的声明），变量名作全局对象的属性，值为undefined。 3. 查找函数声明，函数名作为全局对象的属性，值为函数引用。

理解预编译对掌握变量提升、this指向、作用域及性能优化等问题大有裨益。

感谢阅读，希望本文能对大家有所帮助，感谢支持本站！