执行栈
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上下文
-
全局执行完毕,弹出全局上下文
- 最后一条上下文出栈后,执行栈清空,整个程序运行结束。