执行上下文栈的工作机制-附例子详解

目录

一、什么是执行上下文栈

二、种类

三、代码示例

四、代码分析

五、总结

---

一、什么是执行上下文栈

执行上下文栈（Execution Context Stack）是JavaScript引擎用来管理代码执行的栈结构，又叫调用栈（Call Stack）。js中的所有代码都是在执行上下文中执行的，每当一个新的执行上下文被创建时，它会被推入栈中；当执行上下文完成时，它会从栈中弹出，所以执行上下文栈是后入先出的，顶层栈永远是正在执行的代码。

二、种类

• 全局执行上下文：

  • 当JavaScript程序开始执行时，会首先创建全局执行上下文，并将其推入执行上下文栈。
  • 全局执行上下文一直存在，直到程序退出。

• 函数执行上下文：

  • 每当一个函数被调用时，JavaScript引擎会创建一个新的函数执行上下文，并将其推入执行上下文栈。
  • 当函数执行完毕后，对应的函数执行上下文会从栈中弹出，控制权回到之前的上下文。
• Eval执行上下文：
  • 当执行 eval 函数时，会创建一个 eval 执行上下文（不常用，这里不举例） 

三、代码示例

function firstFunction() {
    console.log('First Function Start');
    secondFunction();
    console.log('First Function End');
}

function secondFunction() {
    console.log('Second Function Start');
    thirdFunction();
    console.log('Second Function End');
}

function thirdFunction() {
    console.log('Third Function');
}

console.log('Global Execution Context Start');
firstFunction();
console.log('Global Execution Context End');

四、代码分析

1、初始状态： 创建全局执行上下文，并将其推入执行上下文栈。 

• 【全局执行上下文】

2、执行到 console.log('Global Execution Context Start')，仍处于全局执行上下文。

• 【全局执行上下文】

3、 调用 firstFunction()，创建 firstFunction 的执行上下文，并将其推入栈。

• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

4、执行 console.log('First Function Start')，firstFunction 执行上下文在栈顶。

• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

5、调用 secondFunction()，创建 secondFunction 的执行上下文，并将其推入栈。

• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

6、执行 console.log('Second Function Start')，secondFunction 执行上下文在栈顶。

• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

7、调用 thirdFunction()，创建 thirdFunction 的执行上下文，并将其推入栈。

• 【thirdFunction 函数执行上下文】
• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

8、执行 console.log('Third Function')，thirdFunction 执行上下文在栈顶。

• 【thirdFunction 函数执行上下文】
• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

9、thirdFunction 执行完毕，弹出 thirdFunction 执行上下文，回到 secondFunction 执行上下文。

• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

10、执行 console.log('Second Function End')，secondFunction 执行上下文在栈顶。

• 【secondFunction 函数执行上下文】
• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

11、secondFunction 执行完毕，弹出 secondFunction 执行上下文，回到 firstFunction 执行上下文。

• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

12、执行 console.log('First Function End')，firstFunction 执行上下文在栈顶。

• 【firstFunction 函数执行上下文】
• 【全局执行上下文】

13、firstFunction 执行完毕，弹出 firstFunction 执行上下文，回到全局执行上下文。

• 【全局执行上下文】

14、执行 console.log('Global Execution Context End')，仍处于全局执行上下文。

• 【全局执行上下文】

五、总结

• 执行上下文栈 管理代码执行的顺序，通过将执行上下文推入和弹出栈来控制代码的执行。
• 执行上下文栈遵循后入先出原则，栈顶层为正在执行的上下文，
• 全局执行上下文 是整个程序执行期间一直存在的。
• 函数执行上下文 在函数调用时被创建，执行完毕后被销毁。