执行栈：JS线程执行JS代码的过程（异步）

执行栈

call stack

• 本质：一块内存空间
• 只要有一个函数被调用（函数声明不管），就会往执行栈里加入一个执行上下文
  • 执行上下文也是一块内存空间（记录函数执行的一些必须要的东西）
  • 没有执行上下文，函数无法执行
• JS代码只会在执行栈执行，不可能在其他地方执行

---

JS线程执行JS代码的过程

举例：下面代码输出什么？

const a = 1;
console.log(a);

function A() {
  console.log('A');
  B();
}

function B() {
  console.log('B');
}

A();

答案是：
1
A
B

执行过程解析:

• JS启动之前就会分配一块内存空间（执行引擎干的事），就是执行栈call stack

  • 所图所示：
    

• JS执行引擎会往执行栈内放入一块全局上下文

  • 全局上下文是一块内存空间，记录一些全局变量…
  • 如图所示：

• 执行全局代码(代码从上往下执行)

  • const a = 1;//常量声明和赋值
    

  • console.log(a);//调用了log函数
    

• 只要调用函数（无论是自己写的函数，还是浏览器写好的函数），就会产生新的上下文（该上下文记录函数内部的变量、声明的函数…)

• 产生的对应上下文（log上下文），并入栈

  • console对象是浏览器写好的，此处调用了里面的log函数
  • 如图所示：

  

• 执行log函数

输出 ： 1

• log函数执行完毕，该函数的上下文被弹出，直接出栈

  • 所图所示：
    

• 又回到全局上下文，继续执行

  • 只要调用函数，就一定会产生新的上下文，并入栈

  • 在执行栈中，一定是先执行顶部的上下文

  • 函数声明不做处理

  • 代码从上往下执行，该执行的语句为：

  • A();//函数调用
    

• 产生对应的函数A上下文，并入栈

  • 如图所示：
    

• 执行函数A

  • function A() {
      console.log('A');
      B();
    }
    

  • 代码从上往下执行，log函数被调用，产生log上下文，并入栈

  • 如图所示：

• 输出 ‘A’ ，log函数执行完毕

• log函数执行后，弹出log上下文，回到A上下文，继续执行A函数

• 执行语句如下：

• B();//函数被调用
  

• 产生函数B的上下文,并入栈

• 如图所示：

• 

• 执行函数B

• function B() {
    console.log('B');
  }
  

• 代码从上往下执行，

• console.log('B');//log函数被调用
  

• 产生log上下文，并入栈，如图所示：

• 输出 ’ B’

• log函数执行完毕，弹出log上下文

• 函数B，执行完毕，弹出B上下文

• 函数A，执行完毕，弹出A上下文

• 全局执行完毕，弹出全局上下文

• 最后一条上下文出栈后，执行栈清空，整个程序运行结束。