执行上下文
Last updated
Last updated
原文 What is the Execution Context & Stack in JavaScript?
我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢
这就要从他的执行上下文(execution context)来说起来。
执行一段代码,就会存在上下文。上下文主要分为两种:
global context
function context
看下图,比较直观
可以很清楚的看到,最外层的就是全局上下文,函数里的是function context, 里面的execution context 就是 function execution context.
我们应该知道,这段代码可以访问上下文之外的代码(变量,函数...), 但是外部却无法获取内部的变量等,这是为什么?
我们前面说过,浏览器是单线程在执行,一次只能做一件事,后面的需要排队进入execution stack。
看下面的例子:
可以看到,执行的上下文会放入 execution context 去执行,如果当前的额上下文执行结束,就会回到前一个上下文去执行,直到全局上下文结束。
关于execution stack
的五个点:
单线程
同步执行
一个全局上下文
可以无数个函数上下文
每个函数的调用都会创建一个上下文,包括自调用
上面说了,每次调用函数时都会创建一个上下文。js的解释器对于上下文的执行分了两个阶段.
创建阶段 Creation Stage 这个发生在调用函数的时候,并且在执行内部任何代码之前。
创建作用域链(Scope chain)
创建变量,函数,参数...
确定当前上下文的this
代码执行阶段(Activation / Code Execution Stage)
分配值,引用函数和解释/执行代码。
上面的创建阶段,可以这么理解
上面的executionContextObj
是在调用函数并且真正的执行函数之前创建的,也就是在Creation Stage
创建的。 这里解释器会扫描传入的参数和内部的变量声明以及函数声明,最终的结果是在executionContextObj
中生成variableObject
.
简单的来概述下解释器是怎么来处理的.
运行代码来调用函数
在执行代码函数执行,先去创建上下文.
进入创建阶段
初始化作用域链
创建变量对象(vo)
创建arguments对象,检查当前上下文的参数,初始化名称和值并创建引用副本
扫描当前上下文的函数声明
扫描到来函数声明,那就在vo(variable object)里创建他的名称,并且指针是指向内存中函数引用的地址
如果扫描的函数声明已存在,那就覆盖vo中的引用指针
扫描当前上下文的变量声明
扫到变量声明,在vo中添加变量名称,并且初始化值是undefined
如果vo中存在变量名称,那就不做处理,继续扫描
确定当前上下文的this
指向
激活/执行阶段
在上下文中运行/解释函数,并在代码逐行执行时分配变量值。
在上面的VO的时候可以发现,函数是被特殊照顾了, 先于变量的处理,所以为啥在变量提升的时候,函数被提到函数顶部了,所以,函数是第一等公民,哈哈
下面来看一个例子:
当调用foo(22)
的时候,创建阶段看起来类似于下面这样
可以发现,在创建阶段, 对于变量,是初始化为undefined, 但是对于传递进来的参数却是不同,他是直接赋值。zai这里创建阶段完成之后,就会进入激活/执行阶段。
为什么一个是function 一个是undefined.你可能会说是因为变量提升,现在我们知道了上面的知识,可以回答了。
为什么我们可以在申明foo
之前访问到他?
很简单,在代码执行阶段(Activation / Code Execution Stage),我们已经过了创建阶段的VO
过程,这时候是function
.
为什么foo
被声明了两次,显示的是function,却不是undefined或者string
在VO
阶段,我们知道函数的处理会在变量的前面,在变量进行AO
(activation object)的时候,VO
已经存在了。对于变量,如果存在同名属性,就会向下扫描。
为什么bar
是undefined
因为在AO
的过程,对于变量 是需要初始化为undefined
存在VO
里。
不错的外链:
发现有人问了一些问题,特此来解释下:
example1:
执行上面代码会发现1
处报错,2
处是true
. 因为在代码解释阶段,是没有去解释块里的内容的,所以在当前的vo里不存在foo,会报错。2
打印true,是在代码执行阶段再去处理.
example2:
可以发现,1
处打印的是一个function
指向,因为执行vo,函数声明优先于变量。2
处打印的是个变量.因为在解释阶段是指向函数声明,但是在执行阶段,重新指向了变量。你可能会想,为啥第一行执行没有被覆盖,第二行执行被覆盖了。因为第一行执行的时候,就是变量提升,那时候按照vo的规则,变量声明的时候存在了function指向的名称,所以不会被重新定义。第二行执行的时候就不是变提升了,按照执行流程来,function在解释的时候就被提升到顶部了,在执行的时候不会再执行函数声明只会执行赋值a = 'var a'
.
看3
和4
标注的行,3
是输出func a
, 4
是报错,就是因为在执行的时候经过了a = var 'a'
的赋值。这个时候更新了a
。