一文搞懂JavaScript中的预编译,GO和AO的美妙

2023-10-18 09:30

本文主要是介绍一文搞懂JavaScript中的预编译,GO和AO的美妙,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一文搞懂JavaScript中的预编译,带你领略GO和AO的美妙之处!

前端老猫

干货分享,祝你成长。

16 人赞同了该文章

预编译

一、概念

预编译是做些代码文本的替换工作。是整个编译过程的最先做的工作。

二、代码理解(特别重要)

先来看一些简单的案例,比如直接打印一个变量a,结束的分号“;”我用中文的“;”

console.log( a );控制台会报错,如图:

“Uncaught SyntaxError: Invalid or unexpected token”

译:未捕获的SyntaxError:无效或意外的标记

若在该行代码下再加一行相同代码,此时用英文“;”得到的结果是:

依然是同样的报错,此时你可能会说,把这行代码加到上面不行吗?好,满足你

我们来看执行结果,

依然是报错,这说明什么问题呢?

其实,通过上上面的例子,我们可以看出,JavaScript这门语言它是怎么执行的。

第一,检查通篇代码的语法错误;它不是说一开始就一行一行代码解释执行,解释执行,而是要先检查代码是否有语法错误,然后才会解释一行,执行一行,当然,在这两步之间,还有一步叫做“预编译”。

总的来说整个步骤就是:

1. 检查通篇代码的语法错误

2. 预编译

3. 解释一行,执行一行

三、JS代码的两种现象

1. 函数的声明

我们知道,函数的调用,不管是放在函数体下面,还是函数体上面都是可以执行的

接着再来看第二个现象

2.变量的声明

可以看到,如果打印在声明之前,我们得到的结果是“undefined”,那如果我把变量的赋值给去掉呢?

结果依然是“undefined”,那我们可以得出一个小的结论就是,提前打印变量的值,实际上和我们赋不赋值,没有太大关系。

如果我把这行代码删除掉,返回的结果是:

返回的结果是报错

“Uncaught ReferenceError: a is not defined”

译:未捕获引用错误:a未定义

结合上面两种情况,我们可以得出一个小小的结论就是,函数声明会提升,但是函数提升是整体提升,包括函数代码,所以是会执行的;变量的提升,只提升变量,不提升赋值!

所以我们要清楚的认识到,var a = 1; 其实是分为两个步骤的,第一步,声明a变量,第二步,把1赋值给a。

解下来,我们来看一个案例:

当我们遇到这种稍微有点麻烦的代码时,可能上面的总结无法解释出来的时候,那我们该如何才能判断出这段代码的一个结果呢?或者说,JS引擎它是如何来解析这段代码的呢?就会涉及到“预编译”这部分内容,根据预编译的规则来解释这段代码。

到这里,我们不再讨论上段代码的结果是什么,想了解的朋友自行打印。

四、暗示全局变量(imply global variable)

假如,我们在全局下写 a = 1; console.log( a ),那其实是和var a = 1; console.log( a )是一样的,其实就是在全局对象window中添加了一个变量名为a,值为1的属性,那么我们在打印的时候console.log( a )是和console.log( window.a )打印出来的结果是一样的。

也就是说,给一个未声明的变量赋值,那么这个变量就是全局变量。这也是暗示全局变量的一种体现。

再来看另外一种情况

当我们输出b的结果的时,是可以正常打印出来,可当我们要输出a时,就会报错,那是因为在函数中,如果我们给一个未声明的变量b赋值,此时它也会被拿到全局中。所以打印a和b的结果时不一样的。

五、预编译解析

通过上面一些知识点的铺垫后,我们来真正的进入到预编译的学习中当中。

先给大家回顾一下什么时预编译,说白了,预编译就是,函数在执行前,所需要做的一些事情

5.1 函数执行期上下文

那接下来大家看这样一个例子:

那我们刚才说了,预编译时在函数执行前做的事情,那它具体做了什么呢?做的就是一个叫“函数执行期上下文”的这么一个东西

函数执行期上下文,Activation Object简称AO,也称为:活跃对象

那么,它具体做了哪些事情呢?

首先创建了AO对象,AO={}

接着,它在这个对象里做了什么呢?

第一步,寻找函数的形参和变量声明

找到之后放进AO对象,并赋值undefined,此时AO对象内就变成了:

AO = {

a:undefined,

b:undefined

}

第二步:把实参赋值给形参,此时AO对象内就变成了:

AO = {

a:undefined -> 2,

b:undefined

}

第三步:寻找函数声明,赋值函数体,此时AO对象内就变成了:

AO = {

a:undefined -> 2 -> function a(){},

b:undefined -> function (){}

}

第四步:执行函数

执行完上面的步骤之后,开始执行函数,先执行“console.log(a)”,此时a的值为 function a(){}这个函数体,接着执行“var a = 1”那么,AO对象中a的值此时就变成了1,下面打印的结果也就变成了1,接下来一行是“function a(){}”,这一行在预编译阶段执行过了,便不再执行,直接执行下一行“console.log(a)”,那么此时的结果还是1,再往下看,直接到“console.log(b)”这一行代码,此时AO对象中b的值是匿名函数

【案例时刻】

【解析:】

先创建AO对象,并执行第一步,寻找函数的形参和变量声明,此时AO对象内为:

接着执行第二步,把实参赋值给形参,此时AO对象内就变成了:

执行第三步,寻找函数声明,赋值函数体,此时AO对象内就变成了:

最后,执行函数!

“console.log(a)”,此时根据第三步中的图片可以得到,a的值为1

“c = 0”,此时把第三步中c的值改为了0,如图:

“var c”,这一步在预编译阶段执行过了,不再执行

“a = 2”,此时把上图中a的值改为了2,如图

“b = 3”,此时把上图中b的值改为了3,如图

“console.log(b)”,此时根据上图可知b的值为3

“function b() { }”,这一步在预编译阶段执行过了,不再执行

“function d() { }”,这一步在预编译阶段执行过了,不再执行

“console.log(b)”,此时根据上图可知b的值为3

所以,最终的结果是:1 3 3

注意:预编译阶段做过的事情,在函数执行期间不再执行,只执行预编译没做过的事情

5.2 全局执行期上下文

先来看一个小的案例:

最终打印的结果是1,原因是,在产生函数作用域之前,会产生一个全局的作用域,也就是我们接下来要讲的内容!

全局执行期上下文,Global Object,简称为:GO

也就是说,在全局开始执行前,会创建GO对象,和上面讲到的AO是差不多的,只不过没有参数而已,那么它的执行过程如下:

第一步:寻找变量声明,此时GO对象内就变成了:

第二步:寻找函数声明,并赋值函数体,此时GO对象内就变成了:

第三步,执行代码

“var a = 1”,把上图中的值赋值为1,那么再执行打印,结果就是1

总结:GO就是window

【案例时刻】

【解析:】

先在全局生产GO对象,然后开始执行它里面的步骤

第一步:寻找变量声明,此时GO对象内就变成了:

第二步:寻找函数声明,并赋值函数体,此时GO对象内就变成了:

第三步,执行代码

“console.log(a, b)”,很具上图内容,可以得出a为function a(){};b为undefined

如果你有这个疑问,就是b为什么不是function (){}呢?

是因为我们在执行打印的时候,还没有走到第19行的代码,所以结果不能是函数

【案例时刻】

【解析:】

第一步:寻找变量声明,此时GO对象内就变成了:

第二步,寻找函数声明,并赋值函数体,此时GO对象内就变成了:

第三步,执行代码,并生成AO对象,执行AO第一步:

第四步,实参赋值,此时AO内变成:

第五步,找函数声明并赋值函数体,此时AO内变成:

第六步,执行代码

18行“console.log(a)”,在全局内找a的值为:function a(a){ ... } 整个函数

20行“console.log(a)”,在AO中找a此时的值为:function a(){} 空函数

22行“console.log(a)”,因为21行把a赋值为了2,所以结果是2

25行“console.log(a)”,因为24行把b赋值为了3,所以结果是3

【练习时刻1】

练习题将不再写详细过程,只提供GO和AO中的内容

【结果:】

可能你会觉得,第一次打印a的值为什么不是1?

原因就是我函数内部有a这个变量,并且有值,不管是undefined还是具体的值,都是不会去全局进行查找的。

【练习时刻2】

【结果:】

注意:在预编译阶段,是不管if语句的规则的,只要内部有变量就需要拿出来;执行的时候,是看if规则的,比如if的()中为true才会执行里面的代码

好了,关于预编译内的内容就说到这里,如果上面两道练习都可以清晰的做出来,那就说明你基本上已经掌握了预编译。

本文章仅代表个人浅薄的见解,如有不对之处,还望各位批评指正

这篇关于一文搞懂JavaScript中的预编译,GO和AO的美妙的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/231697

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~ 专栏导航 Python系列: Python面试题合集,剑指大厂Git系列: Git操作技巧GO

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo