首页 > 代码库 > 你了解JS执行过程吗?
你了解JS执行过程吗?
正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行)。刚才说的是JS执行的一个大的环境,今天我们学习一下,JS在解析器里的一个执行过程。
这个过程分为两个阶段:
- 进入执行上下文
- 执行代码
变量对象的变化,和这两个阶段息息相关。
在介绍这两个阶段之前,了解相关的概念。
如果变量和执行上下文相关,那么它应该知道在哪里存储数据和怎么访问数据,这种机制叫做变量对象(variable object,简称VO)。用于存储下列数据:
- 变量声明
- 函数声明(这个地方需要和函数表达式作区分)
- 函数参数
第一个阶段:进入执行上下文。此时VO将会被下面的属性初始化(按照下面的顺序进行初始化):
- 函数参数:VO的一个属性,这个属性是有形参名称和值组成,如果没有传递实参,那就是形参的名称和undefined。
- 函数声明:是由函数的名称和值组成,如果VO中存在该属性值,则替换这个属性。
- 变量声明:由变量名称和undefined组成,如果变量名和VO有的函数参数或函数声明相同,则变量声明不会干扰已存在属性。
VO的使用环境有:GlobalContext和FunctionContext。
来一个例子:
?
1 2 3 4 5 6 7 | function test(a, b) { var c = 20; function d(){} var e = function _e(){}; ( function x(){}); } test(30); |
当进入执行环境,VO如下:
?
1 2 3 4 5 6 7 | VO (test FunctionContext) = { a: 30, b: undefined, d: <reference to FunctionDeclaration "d" >, c: undeifined, e: undefined } |
注:其中x 、_e都是函数表达式,_e通过变量声明e进行访问。
接下来就会进入下一个阶段,执行代码阶段:
以上面的例子来说,会经历下面的过程:
?
1 2 | VO[ ‘c‘ ] = 20; VO[ ‘e‘ ] = <reference to FunctionDeclaration "_e" >; |
这样代码就执行完了。
再来一个经典的例子:
?
1 2 3 4 5 | alert(x); //function var x = 10; x = 20; function x() {} alert(x); //20 |
为什么第一个是function,而不是undeofined或者是not defined或者10、20?因为,根据规范 — 当进入上下文时,往VO里填入函数声明;在相同的阶段,还有一个变量声明“x”,那么正如我们在上一个阶段所说,变量声明在顺序上跟在函数声明和形式参数声明之后,而且,在这个阶段,变量声明不会干扰VO中已经存在的同名函数声明或形式参数声明,因此,在进入上下文时,VO的结构如下:
?
1 2 3 | VO = {} VO[ ‘x‘ ] = <reference to FunctionDeclaration "x" >; VO[ ‘x‘ ] = <the value is not disturbed, still function > |
在代码执行阶段:
?
1 2 | V[ ‘x‘ ] = 10; V[ ‘x‘ ] = 20; |
了解了这个过程,我相信对JS执行过程会有一个全新的理解。
留一个小小的问题(猜想一下输出结果):
?
1 2 3 4 5 6 7 8 | function test(a, b) { var c = 20; console.log(a); //结果是什么?为什么? function a(){} var e = function _e(){}; ( function x(){}); } test(30); |
参考文献:
http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。