My-JS之执行上下文

2017-12-30

执行上下文，就是Js执行的时候的一个运行环境/作用域（scope）。执行上下文决定了Js执行过程中可以获取哪些变量、函数、数据，一段程序可能被分割成许多不同的上下文，每一个上下文都会绑定一个变量对象（variable object），它就像一个容器，用来存储当前上下文中所有已定义或可获取的变量、函数等。

可执行代码

既然执行上下文是在JS执行的时候创建的，那么JS中可执行代码的类型有：

全局代码，这个是默认的代码运行环境，一旦代码被载入，引擎最先进入的就是这个环境；
函数级别的代码，当执行一个函数时，运行函数体中的代码；
Eval的代码，在Eval函数内运行的代码；

执行上下文特点

执行上下文有以下特点：

单线程；
同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待；
唯一的一个全局上下文，它在浏览器关闭时出栈；
函数的执行上下文的个数没有限制；
每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此；

执行上下文的创建和执行

上下文的创建阶段：函数被调用，但尚未开始执行（代码分析预处理阶段），此时会为执行上下文创建作用域链，创建变量、函数和参数以及求this的值。也就是发生声明提升的阶段，同时也是产生声明提升的原因；
执行阶段：指派变量的值和函数的引用并解释执行代码，也就是变量赋值，函数引用，执行其它代码，在执行阶段，JS引擎会创建执行上下文栈来管理执行上下文；

简单例子：

var a = 1; // ①
function f() { // ②
    var a = 2; // ③
    function sayA() { // ④
        console.log(a); // ⑤
    }
    sayA(); // ⑥
} 
f(); // ⑦

首先先将执行上下文和执行上下文栈具象化：

将每个执行上下文看作一个对象，它包含三个属性：

ECObj = {
    variableObject: {}, // 变量对象，函数中的arguments对象, 参数, 内部的变量以及函数声明 
       scopeChain: [], // 作用域链，包含执行上下文自身变量对象以及所有父执行上下文中的变量对象，也就是所有可访问的变量和函数
       this: {} // this指向的对象
};

将执行上下文栈看作一个数组；

ECStack = []; // 初始执行上下文栈为空数组

上面代码具体执行情况：

代码开始执行之前，首先创建全局执行上下文；

globalECObj = {
    variableObject: {
        f: pointer to function f(), // 函数声明会指向该函数在内存中的地址的一个引用，所以函数可以在声明之前调用
        a: undefined // 变量声明初始化会是undefined
    },
       scopeChain: Object.assign({}, globalECObj.variableObject), // 作用域链是全局作用域
       this: window
};

// 执行全局执行上下文，全局执行上下文入栈
ECStack.push(globalECObj);

全局执行上下文创建完毕，开始执行代码，从上至下，① 为赋值操作；

// ① var a = 1; 给全局变量a赋值
globalECObj = {
    variableObject: {
        f: pointer to function f(), 
        a: 1
    },
       scopeChain: Object.assign({}, globalECObj.variableObject),
       this: window
};

跳过函数声明直到遇到可执行到代码 ⑦ ；

// ⑦ f(); 遇到函数调用，创建函数f的执行上下文
fECObj = {
    variableObject: {
        sayA: pointer to function sayA(),
        a: undefined
    },
       scopeChain: Object.assign({}, globalECObj.variableObject, fECObj.variableObject), // 作用域链是全局作用域和f函数作用域
       this: window
};

// 函数f执行上下文入栈
ECStack.push(fECObj);

// 执行f执行上下文
// ③ var a = 2; 给局部变量a赋值
fECObj = {
    variableObject: {
        sayA: pointer to function sayA(),
        a: 2
    },
       scopeChain: Object.assign({}, globalECObj.variableObject, fECObj.variableObject),
       this: window
}

执行函数f执行上下文中又遇到可执行代码 ⑥ ；

// ⑥ sayA(); 遇到函数调用，创建函数sayA执行上下文
sayAECObj = {
    variableObject: {},
       scopeChain: Object.assign({}, globalECObj.variableObject, fECObj.variableObject, sayAECObj.variableObject), // 作用域链是全局作用域和f函数作用域和sayA函数作用域
       this: window
};

// 函数sayA执行上下文入栈
ECStack.push(sayAECObj);

// 执行sayA执行上下文
2 // 弹出结果2

sayA函数执行结束，从执行上下文栈弹出
```
ECStack.pop();
```
f函数执行结束，从执行上下文栈弹出
```
ECStack.pop();
```
现在只剩全局执行上下文了，它会在浏览器关闭从执行上下文栈中弹出

执行上下文过程

JS代码加载完成；
创建全局执行上下文，为全局执行上下文创建作用域链，创建变量、函数和参数以及求this的值；
全局执行上下文入执行上下文栈，开始执行代码；
JS为单线程，从上至下当遇到可执行代码，就新建一个执行上下文，为新建执行上下文创建作用域链，创建变量、函数和参数以及求this的值；
新建执行上下文入执行上下文栈，开始执行代码；
如果可执行代码中还有可执行代码就重复4和5；
执行完成的执行上下文从执行上下文栈顶弹出；
关闭浏览器后全局执行上下文从执行上下文栈中弹出，执行上下文栈清空；