javascript的预编译和执行

我叫王自信      2022-02-11     252

关键词:

 JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行。所谓代码块就是使用<script>标签分隔的代码段。

整个代码块共有两个阶段,预编译阶段和执行阶段

一、编译阶段

对于常见编译型语言(例如:Java)来说,编译步骤分为:词法分析->语法分析->语义检查->代码优化和字节生成。

对于解释型语言(例如JavaScript)来说,通过词法分析和语法分析得到语法树后,就可以开始解释执行了。

(1)词法分析是将字符流(char stream)转换为记号流(token stream),就像英文句子一个个单词独立翻译。

(2)语法分析得到语法树,举例:

条件语句 if(typeof a == "undefined" ){ a = 0; } else { a = a; } alert(a);

技术分享


当JavaScript解释器在构造语法树的时候,如果发现无法构造,就会报语法错误,并结束整个代码块的解析。

(3)“function函数”是一等公民!编译阶段,会把定义式的函数优先执行,也会把所有var变量创建,开辟内存空间,默认值为undefined,以提高程序的执行效率!

当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理!并且是先预声明变量,再预定义函数!(变量提升是函数提升在变量提升前).

 

 JavaScript语法采用的是词法作用域(lexcical scope),也就是说JavaScript的变量和函数作用域是在定义时决定的(代码书写决定函数作用域,函数调用执行决定执行上下文和作用域链),而不是执行时决定的,由于词法作用域取决于源代码结构,所以 JavaScript解释器只需要通过静态分析就能确定每个变量、函数的作用域,这种作用域也称为静态作用域(static scope)。

 

二、JavaScript执行过程

声明一个概念:执行上下文。即当前代码的执行环境,js 的运行环境包括:(1)全局环境(2)函数环境(函数被调用执行时,执行上下文推入函数调用栈)(3)eval,尽量避免使用

例:var color="red";
function getColor(){
    var anColor="blue";
    function chColor(){
        anColor=color;
    }
    chColor();
}
getColor();

分析:开始函数调用栈栈底为全局上下文,当代码执行到getColor()时,将getColor()推入函数调用栈,执行到chColor()时,将chColor()推入函数调用栈。执行完后依次弹出。(return 可以直接终止代码执行,将当前上下文弹出函数调用栈)

因此,函数在被调用后,产生执行上下文。

产生执行上下文后到代码开始执行前,执行上下文会分别创建变量对象,建立作用域链,确定this指向。

保存内部变量、内嵌函数以及建立arguments对象保存当前上下文参数。构造它的作用域链,搜索函数中用var声明的变量放入该链(在语法分析阶段就已经得到放在语法树中,此时只是拷贝过来),寻找变量时会沿着自身作用域链向上寻找。

  如果函数引用了外部变量的值,则JavaScript引擎会为该函数创建一个闭包体(closure),闭包体是一个完全封闭和独立的作用域,它不会在函数调用完毕后就被JavaScript引擎当做垃圾进行回收。闭包体可以长期存在。

代码开始执行,完成变量赋值函数引用执行后续代码。

 










javascript的预编译过程

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

个人对javascript预编译的理解

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

javascript实现图片的预加载的完整实现

图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整的图... 查看详情

javascript实现图片的预加载的完整实现

图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整的图... 查看详情

Rails:Heroku 的预编译?

】Rails:Heroku的预编译?【英文标题】:Rails:PrecompileforHeroku?【发布时间】:2014-04-0719:12:08【问题描述】:在Heroku上部署我的应用程序的新版本之前,我需要在我的控制台中执行此操作(以便css和js在Heroku上工作):RAILS_ENV=producti... 查看详情

转载----preparedstatement和statement的区别

...库的操作,该时间开销可以忽略不计,但是PreparedStatement的预编译结果会被缓存,下次执行相同的预编译语句时,就不需要编译,只要将参数直接传入编译过的语句执行代码中就会得到执行,所以,对于批量处理可以大大提高效... 查看详情

mysql的预编译入门(代码片段)

文章目录MySQL的预编译MySQL的预编译概念MySQL预编译的语法准备数据:预编译语句编写MySQL的预编译MySQL的预编译概念通常我们发送一条SQL语句给MySQL服务器时,MySQL服务器每次都需要对这条SQL语句进行校验、解析等操作。但... 查看详情

c/c++中的预编译指令

...(disable:4244)#pragmawarning(disable:4267)不理解意思,遂查?C/C++中的预编译指令 程序的编译过程可以分为预处理、编译、汇编三部分,其中预处理是首先执行的过程,预处理过程扫描程序源代码,对其进行初步的转换,产生新的源代... 查看详情

为啥资产:Rails 6.1 上的预编译失败?

】为啥资产:Rails6.1上的预编译失败?【英文标题】:Whyisasset:precompilefailingonRails6.1?为什么资产:Rails6.1上的预编译失败?【发布时间】:2021-04-0722:49:22【问题描述】:我在app/assets/images中有一个图像资产,我正在尝试在按照assetp... 查看详情

包含指令的预编译头文件

】包含指令的预编译头文件【英文标题】:Precompiledheaderviauncludedirective【发布时间】:2014-01-0202:45:52【问题描述】:我有两个标题world.hworldw.h。世界.hvoidh_world();worldw.hvoidg_world();用gccworld.h和gccworldw.h预编译后,我有world.h.gch和world... 查看详情

未使用 Rails 测试环境中的预编译资产

...试之前使用预编译资产。(主要是因为capybara-webkit不支持javascriptes6特性)资产使用RAILS_ENV=testrak 查看详情

java平台的理解

...译执行,-xcomp就是关闭解释执行。五:aot编译。优化了jit的预 查看详情

不同形式的预编译会影响性能吗?

】不同形式的预编译会影响性能吗?【英文标题】:Dothedifferentformsofprecompilationimpactperformance?【发布时间】:2014-09-0803:35:04【问题描述】:我正在使用MVC3、ASP.NET4.5和C#预编译Web应用程序时有多种选择:不要合并。不要合并,为每... 查看详情

C : Visual Studio 和 Eclipse+MinGW 中的预编译头文件

】C:VisualStudio和Eclipse+MinGW中的预编译头文件【英文标题】:C:Pre-compiledheaderfileinVisualStudioandEclipse+MinGW【发布时间】:2012-08-2706:12:44【问题描述】:我目前在我的C++项目中同时使用VisualSstudio2010和Eclipse+MinGW。我经历过不同的编译器... 查看详情

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

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

javascript预编译(代码片段)

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

javascript预编译(代码片段)

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

c中的预编译宏定义

文章来自 http://www.uml.org.cn/c++/200902104.asp在将一个C源程序转换为可执行程序的过程中,编译预处理是最初的步骤.这一步骤是由预处理器(preprocessor)来完成的.在源流程序被编译器处理之前,预处理器首先对源程序中的"宏(macro)"进... 查看详情