浅谈javascript预编译原理

采姑娘的小乌龟      2022-02-14     281

关键词:

这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作:

1,语法分析;

2,预编译;

3,解释执行。

语法分析很简单,就是引擎会简单的检查一下你的代码有没有什么低级的错误,解释执行就是执行代码,执行代码之前会进行预编译,预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数。下面我详细说一下:

预编译可以简单的分成全局预编译和函数体预编译,函数体预编译可以从四个规则入手;

1,创建AO对象;AO{  }

2,找形参和变量声明,将变量和形参名作为AO的属性名,并赋值为undefined

3,将实参和形参统一;

4,在函数里找函数声明  ,赋值函数体。

记住以上四条规则,下面通过一个简单的案列说明一下:

 function test(){
             console.log(a);
             console.log(b);
             var b = 234;//变量声明
             console.log(b);
             a = 123;//变量声明
             console.log(a);
             function a(){}//函数声明
             var a;
             b = 257;
             var b = function (){}//变量声明
             console.log(a);
             console.log(b);
            function c(y){//函数声明
            var y = 1;
    };             
         }
         test(1)
       让我们看看引擎对这段代码做了什么吧
       1,创建AO对象;Activation Object AO{  }
       2,找形参和变量声明,将变量和形参名作为AO的属性名,并赋值为undefined
       AO{
           b:undefined;
           a:undefined;
       
       }
       3,将实参和形参统一;
       4,在函数里找函数声明  ,赋值函数体。所以此时的a会被函数体替代
       AO{
           a:function a(){}
           b:undefined
           c:function c(y){
               var y = 1;
           }
       }
       当页面预处理完之后便会开始执行,根据编译一句执行一句的原则,此时console.log(a)的值自然为:function a(){},console.log(b)的值为:undefined.
       随后b被赋值为234,所以第二个console.log(b)的值为:234,以此类推,第二个console.log(a)的值为:123,
       b经历了第三次赋值257后,又被function(){}赋值,所以最后console.log(b)的值为:function(){},console.log(a)的值为:123,

全局预编译比函数体预编译少了第三条:

1,创建GO对象;即global objetct GO{  }

2,找形参和变量声明,将变量和形参名作为AO的属性名,并赋值为undefined

4,在函数里找函数声明  ,赋值函数体。

下面也通过一个简单的列子解释一下:

 function test(){
             console.log(b);//undefined
             if(a){
                 var b = 100;
             }
             console.log(b)//undefined
             c = 456;
             console.log(c);//456
         }
         var a
         console.log(a)////undefined
         test()  
         a = 10;
         console.log(a)//10
         console.log(c)//456
         
         首先定义创建GO对象,随后将变量和形参作为属性名,并赋值为undefined,如下:
         GO{
             a:undefined;
             c:undefined;
         }
         然后在函数生命里赋值函数体,但此时没有函数体,所以不用赋值,
         下面就是开始执行语句,所以一第个console.log(a)为undefined;第二个为10,c为456(注意此时c没有命名,直接提升为全局变量)
         当执行到test()的时候会主动预编译function test()里面的内容,此时会创建AO对象.

还有一篇关于预编译的文章写的也比较清楚:http://blog.csdn.net/q1056843325/article/details/52951114

 





























































浅谈编译原理

一.编译原理是什么?   学编译原理之前就听说编译原理是计算机专业的一门重要专业课,旨在介绍编译程序构造的一般原理和基本方法。内容包括语言和文法、词法分析、语法分析、语法制导翻译、中间代码生成、... 查看详情

浅谈编译原理

什么是编译原理?编译原理顾名思义,编译就是将源语言(高级程序语言)翻译成等价的目标语言(机器语言即计算机可以识别的语言即0和1或汇编语言)的过程。原理就是研究这一过程的思想方法、理论和技术。从本质上来讲... 查看详情

javascript的预编译过程

你真的了解javascript的预编译过程吗?目录你真的了解javascript的预编译过程吗?预编译发生在哪一步呢?js三步曲语法解析预编译解释执行预编译发生在哪一步呢?首先要知道js的预编译发生在哪一步也就是你跟你... 查看详情

javascript预编译

...详细讲解一下大家要明白,这个预编译和编译是不一样的JavaScript是解释型语言,既然是解释型语言,就是编译一行,执行一行传统的编译会经历很多步骤,分词、解析、代码生成什么的日后有时间再给大家科普下 查看详情

javascript的预编译和执行

 JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行。所谓代码块就是使用<script>标签分隔的代码段。整个代码块共有两个阶段,预编译阶段和执行阶段一、编译阶段对于常见编译型语言(例... 查看详情

javascript预编译学习(代码片段)

JavaScript预编译在重新学习JavaScript之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树... 查看详情

javascript预编译(代码片段)

预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情

javascript预编译(代码片段)

预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情

更好地理解 javascript 预编译

】更好地理解javascript预编译【英文标题】:Abetterunderstandingofjavascriptprecompile【发布时间】:2015-04-2111:36:12【问题描述】:varfoo=1;functionbar()foo=10;return;functionfoo()bar();alert(foo);我目前正在学习javascript是如何在机器中实际运行的,这... 查看详情

Javascript - 预编译的正则表达式性能

】Javascript-预编译的正则表达式性能【英文标题】:Javascript-Precompiledregexperformance【发布时间】:2013-02-1823:38:12【问题描述】:在this帖子中,据说预编译正则表达式将提高脚本性能。作者通过performancetest证明了这一点。但是,据... 查看详情

javascript之预编译学习(附带多个面试题)(代码片段)

前言在学习JavaScript预编译之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。... 查看详情

javascript之预编译学习(附带多个面试题)(代码片段)

前言在学习JavaScript预编译之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。... 查看详情

Rails 3.1 资产预编译 - 包括所有 javascript 文件

】Rails3.1资产预编译-包括所有javascript文件【英文标题】:Rails3.1assetprecompilation-includealljavascriptfiles【发布时间】:2011-11-0819:59:16【问题描述】:我希望Rails3.1获取更多我的资产进行预编译。特别是,编译文件的默认匹配器不会添... 查看详情

个人对javascript预编译的理解

什么是js的预编译马上要找工作了,之前学习JS都是很基础的皮毛,作为当前最火热的语言,本人一定是要研究的,然而刚接触到预编译我就快疯了,对于一个脑子不好使的人来说真的太绕了,饶了好久也不知道有没有绕明白,... 查看详情

你不知道的javascript1(作用域与闭包)(代码片段)

1.编译原理:首先,JavaScript是解释性语言,编译一行,执行一行JavaScript运行三部曲:1.语法分析2.预编译3.解释执行语法分析:js引擎来检查代码是否存在语法错误预编译:简单理解,就是在内存中开辟一些空间来声明存放一些变... 查看详情

5分钟教你读懂javascript预编译和函数执行(代码片段)

JavaScript运行三部曲JavaScript在展示页面之前会提前进行编译,因此也称之为预编译,而预编译基本分为三部分    语法分析----  (有没有基本的语法错误,例如中文,关键字错误...)    词法分析(预编译... 查看详情

javascript预编译流程详解(代码片段)

1-JavaScript运行三部曲1.语法分析2.预编译3.解释执行语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误;解释执行顾名思义便是执行代码了;预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数;2-J... 查看详情

js中的预编译(词法分析)阶段和执行阶段

javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个... 查看详情