在这篇文章中,我将深入探讨JavaScript的一个最基本的部分,即执行上下文。在本文结束时,您应该更清楚地了解js解释器尝试做什么,为什么某些函数/变量可以在他们声明前使用,以及它们的值是如何确定的。
什么是执行上下文
当js代码运行时,它的执行环境非常重要,并且为以下之一:
- 全局代码:首次执行代码的默认环境。
- 函数代码 - 每当执行流程进入函数体时。
- Eval代码 - 要在内部eval函数内执行的文本。
你可能在网上读了很多文章关于作用域,这篇文章的目的是让你更容易的理解他们。让我们将执行上下文视为当前正在运行代码的环境/作用域。现在我们来看一个简单的例子,包含全局和函数(局部)环境下运行代码。
这里没有什么特别之处,我们有一个由紫色边框表示的全局上下文和由绿色,蓝色和橙色边框表示的3个不同的函数上下文。只能有1个全局上下文,并且它可以被程序中的任何其他上下文访问。
您可以拥有任意数量的函数上下文,并且每个函数调用都会创建一个新的上下文,从而创建一个私有作用域,在函数内部声明的任何内容都无法从当前函数作用域外直接访问。在上面的示例中,函数可以访问在其当前上下文之外声明的变量(全局上下文中的变量),但外部上下文无法访问person函数中的变量/函数。为什么会这样?这段代码究竟是如何评估的?
执行上下文栈
浏览器中的JavaScript解释器实现为单线程。这实际上意味着在浏览器中一次只能发生一件事,其他动作或事件在所谓的执行堆栈中排队。下图是单线程堆栈的抽象视图:
我们已经知道,当浏览器首次加载脚本时,它默认进入全局执行上下文。如果在全局代码中调用一个函数,程序的顺序流进入被调用的函数,创建一个新的执行上下文并将该上下文推送到执行堆栈的顶部。
如果在当前函数中调用另一个函数,则会发生同样的事情。代码的执行流程进入内部函数,该函数创建一个新的执行上下文,该上下文被推送到现有堆栈的顶部。浏览器将始终执行位于堆栈顶部的当前执行上下文,并且一旦函数完成执行当前执行上下文,它将从堆栈顶部弹出,将控制权返回到当前堆栈中的下一个z上下文。下面的示例显示了递归函数和程序的执行堆栈:
代码只调用自身3次,将i的值递增1.每次调用函数foo时,都会创建一个新的执行上下文。一旦上下文完成执行,它就会弹出堆栈并且控制返回到它下面的上下文,直到再次达到全局上下文。
有五个关键点可以帮助你记忆执行上下文
- 单线程
- 同步执行代码
- 一个全局环境
- 可以有很多个函数环境
- 每个函数调用都会创建一个新的执行上下文,对自身的调用也是
执行上下文的细节
现在我们知道每次调用一个函数时,都会创建一个新的执行上下文。但是,在JavaScript解释器中,对执行上下文的每次调用都有两个阶段:
创建(准备)阶段(函数被调用,但是函数内部代码还未执行)
- 创建范围链
- 创建变量,函数和函数参数
- 确定“this”的值
激活/代码执行阶段( 分配值,引用函数,解释/执行代码
我们可以将每个执行上下文在概念上表示为具有3个属性的对象:
1 | executionContextObj = { |
变量对象[VO] / 激活对象[AO]
executionContextObj在函数调用时创建,但是在函数代码被执行之前。这就是我们之前说的第1阶段,即准备阶段。在这阶段,解释器通过扫描传入的参数或函数的参数,本地函数声明,局部变量声明来创建executionContextObj。此扫描的结果将成为executionContextObj中的variableObject。
以下是解释器如何评估代码的伪概述:
- 发现某些代码调用了一个函数
- 在执行这个函数的代码前,创建了这个函数的执行上下文(execution context)
- 进入执行的第一阶段,准备阶段
- 初始化作用域链(scope chain)
- 创建名为arguments的对象。检查调用函数的参数,初始化参数名字和值(个人理解为把调用函数的实参复制一份放到VO中,都说js函数是值传递大概和这里关系很密切)
- 扫描函数内容寻找函数定义
- 对于找到的每个函数,在变量对象中创建一个属性,该属性是确切的函数名称,该属性具有指向内存中函数的引用指针
- 如果函数名已存在,则将覆盖引用指针值
- 扫描函数寻找变量定义
- 对于找到的每个变量声明,在变量对象中创建一个属性,该属性是变量名称,并将值初始化为undefined
- 如果变量名称已存在于变量对象中,则不执行任何操作并继续扫描
- 确定上下文中“this”的值
- 激活对象 / 代码执行阶段
执行函数代码,并在代码逐行执行时分配变量值
举个例子:
1 | function foo(i) { |
当执行foo(22)调用函数时,该函数的执行上下文在准备阶段应该是下面这样的:
1 | fooExecutionContext = { |
如你所见,创建阶段处理定义属性的名称,而不是为它们赋值,但正式参数(实参)除外。创建阶段完成后,执行流程进入函数内,激活/代码执行阶段在函数执行完毕后如下所示:
1 | fooExecutionContext = { |
关于变量提升
在掌握了关于js解释器如何创建激活对象的知识后,我们很容易解释变量,函数提升是怎么一回事。使用以下代码示例:
1 | (function() { |
为什么我们可以在声明foo之前访问他
这段代码是立即执行函数,执行时创建相应执行上下文。在执行代码前即准备阶段,进行参数扫描,函数扫描,变量扫描,此时foo函数已经出现在VO中,所以可以访问。
Foo被声明两次,为什么foo显示为函数而不是未定义或字符串
接上一问,在准备阶段进行完函数扫描开始进行变量扫描,发现foo变量,但是此时VO内已经有同名的变量名,按照规则将略过。准备阶段完成,开始逐行执行代码并赋值,由于foo定义在console语句下面,所以还是输出VO中之前定义的foo,即函数。
为什么bar的值是undefined
接上一问,在准备阶段进行变量扫描时发现bar,VO中没有所以bar作为属性名,值为undefined。进入执行阶段bar赋值语句在console语句下面,所以还是输出undefined。
原文链接
传送:http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/