JavaScript 代码在执行时,会进入 个执行上下文中。 执行上下文可以理解为当前代码的运行环境
JavaScript 中的运行环境主要包括以下 种情况
1.全局环境:代码运行起来后会首先进入全局环境。
2.函数环境 当函数被调用执行时,会进入当前函数中执行代码。
3.eval 环境:不建议使用。
//demo01
var color = 'blue';
function changeColor(){
var anotherColor='red'
function swapColors(){
var tempColor = anotherColor
anotherColor=color;
color=tempColor;
}
swapColors();
}
changeColor();
我们用 ECStack 来表示处理执行上下文的堆栈。
1.全局上下文入栈,并一直存于栈底, 如图
image.png
2.,全局上下文入战之后,从可执行代码开始执行 直到遇到 changeColor(),这句代码激活了函数changeColor ,从而创 hangeColor 自己的执行上下文,因而此时是 changeColor EC 的上下文入栈,如图
image.png
3.changeColor EC 的上下文入栈之后,开始执行其中的可执行代码,并在遇到 swapColor()这句代码之后又激活了 swapColors 的执行上下文。 swapColors EC 的上下文入钱,如图
image.png
4.在 swapColors 的可执行代码中,没有其他能生成执行上下文的情况,因此这段代码
顺利执行完毕, swapColors 的上下文从栈中弹出,如图
image.png
5.swapColors 的执行上下文弹出之后,继续执行changeColor 的可执行代码,没有再遇到其他执行上下文,顺利执行完毕后弹出。这样, ECStack 中就只剩下全局上下文了,如图
image.png
最后,全局上下文在浏览器窗口关闭后出栈
注意:函数执行过程中遇到 return 能直接终止可执行代码的执行,因此会直接将当前上下文弹出栈
如图
image.png
生命周期
当一个函数调用时, 一个新的执行上下文就会被创建。一个执行上下文的生命周期大致分为两个阶段:创建阶段和执行阶段
创建阶段
在这个阶段,执行上下文会分别创建变量对象,确认作用域链,以及确 this 的指向
执行阶段
执行阶段
创建阶段之后,就开始执行代码,这个时候会完成变量赋值、函数引用,以及执行其他可执
行代码,如图
image.png
从执行上下文的生命周期可以看到它的重要性,其中涉及了变量对象、作用域链、 this 等许多重要但并不那么容易搞清楚的概念,这些概念有助于我们真正理解 JavaScript 代码的运行机制