我的JS笔记 -- 执行上下文

2017-12-13 本文已影响0人骷髅不会笑丶

执行上下文，就是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；
执行完成的执行上下文从执行上下文栈顶弹出；
关闭浏览器后全局执行上下文从执行上下文栈中弹出，执行上下文栈清空；

更多文章在这里，觉得不错希望点个 star

我的JS笔记 -- 执行上下文

猜你喜欢

热点阅读