JavaScript进阶笔记(一):执行上下文和执行栈

一、执行上下文

1.1 定义

执行上下文是 JS 代码解释和执行时所处的抽象环境。

1.2 种类

  • 全局执行上下文:只有一个,浏览器中指定是 window 对象,this 指向这个对象。
  • 函数执行上下文:无数个,每次函数被调用都会创建一个。
  • Eval函数执行上下文:不常用,很少见。

二、执行栈

执行栈,也叫调用栈,具有后进先出的特点,用来存储程序执行过程中创建的所有的执行上下文。

在程序初次执行时,首先创建全局执行上下文 Push 到栈中。之后每次发生调用 JS 引擎都会创建新的函数执行上下文并 Push 到执行栈的栈顶。当栈顶的函数执行完成后,相应的执行上下文会被 Pop 出栈,继续执行下一个执行上下文。

关于调用栈有五个点需要清楚:

  • 执行是单线程的。
  • 同步执行。
  • 只有一个全局上下文,永远在栈底。
  • 函数上下文,不唯一。
  • 每次调用函数都会创建新的上下文,包括调用自身。

三、执行上下文的创建

上下文的创建分为两个阶段:创建阶段执行阶段

3.1 创建阶段(指的是函数被调用,但是函数内部还没执行的阶段)

创建阶段:绑定 this,词法环境,变量环境。

1
2
3
4
5
ExecutionContext = {  
ThisBinding = <this value>, // 确定this
LexicalEnvironment = { ... }, // 词法环境
VariableEnvironment = { ... }, // 变量环境
}

this 绑定,在全局上下文中,this 指向全局对象,浏览器中 this 指向 window 对象,而在 node 中指向 module 对象。函数上下文中,this 指向取决于调用方式。具体有:默认绑定、隐式绑定、显式绑定(硬绑定)、new 绑定、箭头函数。

3.1.1 词法环境

  1. 环境记录:存储变量和函数声明的实际位置。
  2. 对外部环境的引用:访问外部词法环境。

对于全局环境,没有外部环境所以为 null。有一个全局对象 window 及其关联的方法和属性以及用户定义的变量。this 指向这个对象。对于函数环境,外部环境是全局环境或者包含内部函数的外部函数环境。存储用户定义的变量,包括 arguments 对象。

3.1.2 变量环境

变量环境是特殊的词法环境。词法环境用于存储函数声明和变量(let和const) 绑定,而变量环境仅存储变量(var) 绑定。

使用例子进行介绍

1
2
3
4
5
6
7
8
9
10
let a = 20;  
const b = 30;
var c;

function multiply(e, f) {
var g = 20;
return e * f * g;
}

c = multiply(20, 30);

执行上下文如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 全局执行上下文
GlobalExectionContext = {

ThisBinding: <Global Object>, // this 指向 window

LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type: "Object", // 全局环境
// 标识符绑定在这里
a: < uninitialized >, // 未初始化状态
b: < uninitialized >,
multiply: < func > // 函数
}
outer: <null>
},

VariableEnvironment: { // 变量环境
EnvironmentRecord: {
Type: "Object",
// 标识符绑定在这里
c: undefined, // var 绑定,初始化为 undefined 。
}
outer: <null>
}
}
// 函数执行上下文
FunctionExectionContext = {

ThisBinding: <Global Object>,

LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative", // 函数环境
// 标识符绑定在这里
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment> // 外部环境
},
// 变量环境
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 标识符绑定在这里
g: undefined
},
outer: <GlobalLexicalEnvironment>
}
}

变量提升:创建阶段,函数声明存储在环境中,var声明的变量被设置为 undefined,而 let 和 const 声明的变量设置为未初始化。所以可以在声明前访问 var 定义的变量,但不可以在声明前访问 let 和 const 定义的变量。

3.2 执行阶段

完成对变量的分配,并执行。

四、执行上下文的应用

4.1 变量提升和函数提升

变量提升的原理:var 声明的变量是存储在执行上下文的变量环境中,并且默认是 undefined 。

函数声明的优先级高于变量。同一作用域下存在多个同名函数声明,后面的会替换前面的函数声明。

4.2 测验

两段代码的不同点,输出结果相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 代码一
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f(); // <<<<<
}
checkscope(); // <<<<<

// 代码二
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f; // <<<<
}
checkscope()(); // <<<<<

答案是:调用栈不同

代码一的调用栈顺序:

1
2
3
4
Stack.push(<checkscope>, functionContext);
Stack.push(<f>, functionContext);
Stack.pop();
Stack.pop();

代码二的调用栈顺序:

1
2
3
4
Stack.push(<checkscop>, functionContext);
Stack.pop()
Stack.push(<f>, functionContext)
Stack.pop()

五、函数上下文

函数上下文中,用活动对象来(AO)来表示变量对象。也就说活动对象和变量对象是一回事,只是叫法和所处的位置不同。变量对象是 JavaScript 规范中的叫法,进入执行上下文变量被激活,此时称为活动对象(AO)。

活动对象在进入函数上下文时被创建,通过 Arguments 属性初始化。

5.1 执行过程

执行上下文分为两个阶段:进入执行上下文和代码执行。

进入和执行阶段都做了什么以及 AO 的状态。

5.1.1 进入阶段

进入阶段没有执行代码,此时的变量对象:

  1. 函数的所有形参:没有实参,属性值为 undefined。
  2. 函数声明
  3. 变量声明
1
2
3
4
5
6
7
8
9
function foo(a) {
var b = 2;
function c() {}
var d = function() {};

b = 3;
}

foo(1);

此时的AO:

1
2
3
4
5
6
7
8
9
10
AO = {
arguments: {
0:1,
length: 1
},
a: 1, // 形参
b: undefined,
c: reference to function c() {},
d: undefined
}

形参 arguments 已经赋值,但是变量还只是 undefined 。

5.1.2 执行阶段

1
2
3
4
5
6
7
8
9
10
AO = {
argurments: {
0: 1,
length: 1
},
a: 1,
b: 2,
c: reference to function c() {},
d: referencde to FunctionExpress "d"
}

总结如下:

  1. 全局上下文的变量对象初始化是全局对象
  2. 函数上下文的变量对象初始化只包括 Arguments 对象
  3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
  4. 在代码执行阶段,会再次修改变量对象的属性值

参考

木易杨前端进阶

坚持原创技术分享,您的支持将鼓励我继续创作!