我们了解了V8引擎之后,我们要了解一下Javascript代码的执行顺序,包括:AO,GO,VO。干货满满......
假如说我们现在有以下代码:
var message = "hello";
function foo(){
var message = "foo";
console.log(message);
}
var num1 = 10;
var num2 = 20;
var reault = num1 + num2;
foo();那么他会是怎么执行的呢?
在我们执行任何执行上下文之前,都存在一个独一无二的全局对象global object。全局对象包含这几个属性:Math,String,parseInt,Date......。这里我们还可以说在全局变量中定义的message属于windows对象。相当于在html文档对象模型中,全局对象就是window本身。
GO是什么?
Go就是额外的宿主定义的属性,就相当于我们都属于地球。我们存在的Go就是地球,然而js也是有宿主的,他的宿主环境就是GO。英文global object说明他是一个对象。
- 在堆内存创建的一个全局对象,该对象所有作用域都可以访问,在浏览器中这个对象就是window
- 里面会有Math,String,parseInt,Date等这些方法。
- 其中还有一个window执向自己。
什么是执行上下文?
当程序的控制权交给EcmaScript执行代码的时候,控制权就会自动生成一个自动上下文栈。这里的顶部的执行上下文正好是当前运行的执行上下文。
Javascript内部有一个执行上下文简称ECS,他是用与执行代码的调用栈。
全局代码为了执行会创建一个GEC,GEC会被放到ECS中执行。
GEC被放到ECS中会包含两个部分:
- 在代码执行前,由代码通过parse转换为AST的时候,会将全局定义的变量,函数,对象等统一放入到
Golbal Object中,但是并不会赋值,这就是、变量的作用域提升。 - 在代码执行中,对变量赋值,或者执行其他函数
VO是什么?
VO是Variable Object的缩写,每一个函数上下文都会关联一个VO,其中变量和函数声明也会被添加到里面。当全局对象被执行的时候,VO就是GO了。
官方的解释
- 作用域链被创建和初始化只包含全局对象而不包含其他对象
- 变量实例是通过使用全局对象作为变量对象,并且使用其属性得来的。
- this的值是全局对象。


AO是什么?
当进入一个函数执行上下文时,会创建一个AO对象Actvation Object
这个AO会使用aarguments作为初始化,并且初始值是传入的参数。
这个AO对象会做为执行上下文的VO来存放变量的初始化。
ECMA文档中的介绍
当控制权进入一个函数的执行上下文时,一个成为激活对象的对象被创建,并与执行上下文关联,激活对象被初始化,拥有一个名为arguments的属性以及{DontDelete}属性。这个属性的初始是下面描述的参数对象。
激活多谢随后被用作变量实例化的变量对象。
AO执行图示
函数执行前

函数执行后
感谢大家观看
@秋风于渭水 确实
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中,大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境,然后在不同的工具中起作用,比如autoprefixer/babel/postess preset env等,在进行了正确的配置后,开发的Vue或者React项目在进行打包时[...]
[...]在BFC中,box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中,相邻两个box之间的margin会折叠(collapse)在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的?总结BFC是什么?W3C文档讲:在标准流中,我们所有的盒子,不管是块级盒子还是行内盒子,它们都属于某一个FC格式化上下文,块级盒子属于BFC`块级格[...]
[...]什么是FC呢这里我们给出W3C给出的文档,FC文档FC的全称是FormattingContext,元素在标准流里面都是属于一个FC的。那么什么又是IFC,BFC呢?IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]
这确实是一个盲点,这个还是很有必要的,处理不好会导致网页内的元素出现抖动问题。
[...]我们知道,当浏览器在执行到script标签的时候,首先会停止构建DOM树,然后下载Javascript文件并且执行,当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢?原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘,尤其是现[...]
[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞,这一点和defer属性类似。然而async属性比较任性,只要脚本被浏览器下载完成之后就会立即执行,不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]
我热爱 旅游专栏。令人惊艳了解路线。
欣赏你的照片, 我明白, 世界很美。感谢 旅行灵感。
读起来像小说。继续保持 带来的灵感。