Revan1i

vuePress-theme-reco revan1i    2019 - 2020
Revan1i Revan1i

Choose mode

  • dark
  • auto
  • light
Home
TimeLine
Category
  • javascript
  • css
  • react
  • js
  • how
  • math
  • regexp
  • algorithm
  • feeling
Tag
Contact
  • GitHub
author-avatar

revan1i

25

文章

20

标签

Home
TimeLine
Category
  • javascript
  • css
  • react
  • js
  • how
  • math
  • regexp
  • algorithm
  • feeling
Tag
Contact
  • GitHub

Javascript基础之执行上下文

vuePress-theme-reco revan1i    2019 - 2020

Javascript基础之执行上下文


revan1i 2019-11-13 09:32:15 javascript base

# 前言

当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context)。

每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object, VO)
  • 作用域链(Scope chain)
  • this

在之前的文章javascript基础之变量对象、javascript基础之作用域链、 javascript基础之this中分别对三个属性进行了讨论,接下来会结合上之前的内容,讲解执行上下文的具体处理过程。

# 具体执行分析

看一个具体的例子:

var scope = 'global scope';

function checkScope() {
  var scope = 'local scope';
  function f() {
    return scope;
  }
  return f();
}
checkScope()
1
2
3
4
5
6
7
8
9
10

执行过程如下:

  1. 执行全局代码,创建全局上下文,全局上下文压入执行上下文栈
ECStack = [
  globalContext
]
1
2
3
  1. 全局上下文初始化
globalContext = {
  VO: [global],
  Scope: [globalContext.VO],
  this: globalContext.VO
}
1
2
3
4
5
  1. 初始化的同时,checkScope 函数被创建,保存作用域链到函数的内部属性 [[scope]]
checkScope.[[scope]] = [
  globalContext.VO
]
1
2
3
  1. 执行 checkScope 函数,创建 checkScope 函数执行上下文,checkScope 函数执行上下文被压入执行上下文栈
ECStack = [
  checkScopeContext,
  globalContext
]
1
2
3
4
  1. checkScope 函数初始化上下文:

1). 复制函数 [[scope]] 属性创建作用域链
2). 用 arguments 创建活动对象
3). 初始化活动对象,即加入形参、函数声明、变量声明
4). 将活动对象压入 checkScope 作用域链顶端
同时 f 函数被创建,保存作用域链到 f 函数的内部属性 [[scope]]

checkScopeContext = {
  AO: {
    arguments: {
      length: 0
    },
    scope: undefined,
    f: reference to function f(){}
  },
  Scope: [AO, globalContext.VO],
  this: undefined
}
1
2
3
4
5
6
7
8
9
10
11
  1. 执行 f 函数,创建 f 函数执行上下文,f 函数执行上下文被压入执行上下文栈
ECStack = [
  fContext,
  checkScopeContext,
  globalContext
]
1
2
3
4
5
  1. f 函数执行上下文初始化,重复第4步的操作
fContext = {
  AO: {
    arguments: {
      length: 0
    }
  },
  Scope: [AO, checkScopeContext.AO, globalContext.VO],
  this: undifined
}
1
2
3
4
5
6
7
8
9
  1. f 函数执行,沿着作用域链查找 scope 值,返回 scope 值
  2. 函数执行完毕,f 函数上下文从执行上下文栈中弹出
ECStack = [
  checkScopeContext,
  globalContext
]
1
2
3
4
  1. checkScope 函数执行完毕,checkScope 执行上下文从执行上下文栈中弹出
ECStack = {
  globalContext
}
1
2
3

# 参考

  1. JavaScript深入之执行上下文