完全掌握JavaScript预编译过程

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

完全掌握JavaScript预编译过程

本篇文章给大家带来了关于javascript中预编译的相关知识,其中主要通过示例来介绍预编译的相关问题,希望对大家有帮助。

阶段(三个)词法语法分析:词法语法分析就是检查JavaScript代码是否有一些低级的语法错误预编译:本文主讲执行代码:执行代码就是js引擎解析代码,解析一行执行一行

这章主要讲预编译过程

预编译过程

预编译也分为2个时间点:

第一个是在JavaScript代码执行之前第二个是在函数执行之前。

但是JavaScript代码之前,之前的预编译只发生一次,函数执行之前的预编译是多次的。

1. JavaScript代码执行之前的预编译JavaScript代码执行之前,首先会创建一个全局对象,可以理解为window对象,也可以理解为GOGlobal Object)对象,我们是看不到的(无法打印)然后将所有声明的全局变量未使用varlet声明的变量放到GO对象中,并且赋值为undefined(联想到“变量提升”)分析**函数声明:**然后再将所有的函数声明也放到GO对象中,并且赋值为函数自身的函数体(函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖)案例说明
<script>    var a = 1;    console.log(a);    console.log(b);    var b = 10;    function fun (a) {        console.log(b);        var a = b = 2;        var c = 123;        console.log(a);        console.log(b);    }    var a2 = 20    fun(1); </script>
登录后复制

结合上面说的步骤:

首先,<script></script>中的代码执行之前会创建一个GO对象(window对象)

GO = {//自带的属性都不写}
登录后复制

将所有声明的全局变量、未使用varlet声明的变量放到GO对象中,并且赋值为undefined

GO = {a : undefined,b : undefined,a2 : undefined}
登录后复制

分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖

GO = {a : undefined,b : undefined,a2 : undefined,function fun (a) {    var a = b = 2;    var c = 123;  }}
登录后复制

此时完成了js代码执行之前的预编译过程,开始执行js代码,首先是给a进行赋值为1,在GO对象里边也会进行对应的改变:

GO = {a : 1,b : undefined,a2 : undefined,function fun (a) {    var a = b = 2;    var c = 123;  }}
登录后复制

然后打印a,此时会在GO对象上去找变量a,然后此时的a的值为1,所以console.log(a) 是等于1的。接着打印b,也会去GO对象上找,找到了b的值为undefined,所以console.log(b)是等于undefined

接着执行到赋值语句:b = 10; 此时GO对象里b的值变成了10

GO = {a : 1,b : 10,a2 : undefined,function fun (a) {var a = b = 2;var c = 123;}}
登录后复制

接着下一行代码是一个**fun函数,此时不会去执行该函数**,因为在前面的预编译过程中实际上是被放到了代码的最前端,就是传说中的声明提前,所以忽略掉了。接着给a2进行赋值操作a2 = 20,GO对象也发生变化:

GO = {a : 1,b : 10,a2 : 20,function fun (a) {var a = b = 2;var c = 123;}}
登录后复制登录后复制

接着是执行fun函数,如上面说到的另外一个时间点发生的预编译,就是执行函数之前,现在就来说一下函数执行前的预编译是怎么样的。

2. 函数执行前的预编译

函数调用,也是会生成自己的作用域(**AO:**Activetion Object,执行期上下文)AO活动对象。函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO

生成AO对象:函数执行前的一瞬间,生成AO活动对象分析生成AO属性:查找形参变量声明放到AO对象,赋值为undefined分析函数声明:查找函数声明放到AO对象并赋值为函数体。函数名为属性名,值为函数体;

如果遇到AO对象上属性同名,则无情覆盖

逐行执行。

案例说明

拿的是上文中的代码示例。

第一步创建AO对象

AO{}
登录后复制

查找形参变量声明放到AO对象并赋值为undefined

注意:fun函数里边的b是未经var声明的,所以是全局变量,不会被放在fun的AO上。

AO{a: undefined,//形参a与局部变量a同名c: undefined}
登录后复制

实参赋值到形参

AO{a: 1,c: undefined,}
登录后复制

查找函数声明放到AO对象并赋值为函数体,fun函数没有函数声明,所以忽略这一步。

函数执行之前的预编译完成,开始执行语句

执行代码

首先执行打印变量b,而此时fun的AO里边并没有变量b,所以会去GO对象里边找,此时的GO对象b的值为10,所以第一行代码打印出10;

第二行代码首先要看的是b = 2,然后GO对象里边b的值就被改为2了。

GO = {a : 1,b : 10,a2 : 20,function fun (a) {var a = b = 2;var c = 123;}}
登录后复制登录后复制

然后b再赋值给a,变量a是属于局部变量a,所以fun的AO对象里边a的值被改为2。

GO = {//自带的属性都不写}1
登录后复制

接着下一个赋值语句是c = 123,所以AO对象中c的值被改为了123

GO = {//自带的属性都不写}2
登录后复制

此时再执行console.log(a)的值就是AO对象里边a的值 2;执行console.log(b)的值就是GO对象b的值 2,至此函数fun执行完毕,紧跟着fun的AO也会被销毁

综上所述,依次打印出来的值为:1,undefined,10,2,2

总结预编译两个小规则:函数声明整体提升(无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面)变量声明提升(无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,所以值是undefined)预编译前奏imply global(暗示全局变量-专业术语) 即:任何变量,如果未经声明就赋值,则此变量就位全局变量所有。(全局域就是window,这里再一次说明了JavaScript是基于对象的语言,base on window)一切声明的全局变量,全是window的属性;var a=12;等同于window.a = 12;(会造成window这个对象特别臃肿)函数预编译发生在函数执行前一刻(懒加载机制)

相关推荐:javascript学习教程、web前端开发视频教程

以上就是完全掌握JavaScript预编译过程的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:新手一定注意HTML的语言编码charset(必看)
下一篇:分析和解决uniapp下拉刷新不触发问题

发表评论

关闭广告
关闭广告