JavaScript中预编译的示例分析-创新互联

小编给大家分享一下JavaScript中预编译的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

JavaScript 预编译原理

今天用了大量时间复习了作用域、预编译等等知识

看了很多博文，翻开了以前看过的书（好像好多书都不会讲预编译）

发现当初觉得自己学的很明白，其实还是存在一些思维误区 （很多博文具有误导性）

今晚就整理了一下凌乱的思路

先整理一下预编译的知识吧，日后有时间再把作用域详细讲解一下

大家要明白，这个预编译和传统的编译是不一样的（可以理解js预编译为特殊的编译过程）

JavaScript是解释型语言，

既然是解释型语言，就是编译一行，执行一行

传统的编译会经历很多步骤，分词、解析、代码生成什么的

日后有时间再给大家科普

下面就给大家分享一下我所理解的JS预编译

JavaScript运行三部曲

脚本执行js引擎都做了什么呢？

• 语法分析

• 预编译

• 解释执行

在执行代码前，还有两个步骤

语法分析很简单，就是引擎检查你的代码有没有什么低级的语法错误

解释执行顾名思义便是执行代码了

预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数

理解了预编译对大家理解作用域同样有帮助

JS预编译什么时候发生

我当初思维误区也发生在这里

预编译到底什么时候发生

希望大家不要让上面的运行过程让你产生误会，

误以为预编译仅仅发生在script内代码块执行前

这倒并没有错

预编译确确实实在script代码内执行前发生了

但是它大部分会发生在函数执行前

JS预编译实例

举例前，先来思考一下这几个概念：

• 变量声明 var…

• 函数声明 function…

让我们看看引擎对这段代码做了什么吧

1.页面产生便创建了GO全局对象（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之前，发生预编译

• 创建AO活动对象（Active Object）

• 查找形参和变量声明，值赋予undefined

• 实参值赋给形参

• 查找函数声明，值赋予函数体

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

解释执行函数中代码

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

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

语法分析完毕，开始预编译

重复最开始的预编译步骤……

大家要注意，

预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译

只有在解释执行阶段才会进行变量初始化

以上是“JavaScript中预编译的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。