再学JS--执行上下文

结合一个例子来总结下执行上下文的知识点：

var scope = 'global scope'
function checkScope(){
    var scope = 'local scope'
    function f() {
        return scope
    }
    return f
}
checkScope()

具体执行过程

1、执行全局代码，创建全局执行上下文，全局上下文被压入执行上下文栈

ECStack = [
    globalContext
]

2、全局上下文初始化

globalContext = {
    VO: [global, scope, checkScope],
    Scope: [globalContext.VO],
    this: globalContext.VO
}

​ 初始化的同时，checkScope函数被创建，保存作用域链到函数的内部属性[[scope]]

checkScope.[[scope]] = [
    globalContext.VO
]

3、执行checkScope函数，创建checkScope函数执行上下文，checkScope函数执行上下文被压入执行上下文栈

ECStack = [
    checkScopeContext,
    globalContext
]

4、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
}

5、执行f函数，创建f函数执行上下文，f函数执行上下文被压入执行上下文栈

ECStack = [
    fContext,
    checkScopeContext,
    globalContext
]

6、f函数执行上下文初始化

1. 复制函数[[scope]]属性创建作用域链
2. 用arguments创建活动对象
3. 初始化活动对象，即加入形参、函数声明、变量声明
4. 将活动对象压入f作用域顶端

fContext = {
    AO: {
        arguments: {
            length: 0
        },
    },
    Scope: [AO, checkScopeContext.AO, globalContext.VO],
    this: undefined
}

7、f函数执行，沿着作用域链查找scope值，返回scope值

8、f函数执行完毕，f函数上下文从执行上下文栈弹出

ECStack = [
    checkScopeContext,
    globalContext
]

9、checkScope函数执行完毕，checkScope函数上下文从执行上下文栈弹出

ECStack = [
    globalContext
]