JavaScript中的执行上下文，既然碰见了这篇图文并茂的文章，干脆看完吧！（系列四）

JavaScript中的执行上下文

本文主要会讲解咱们常常看到的上下文知识点，旨在帮助本身和你们加深对它理解。本篇文章能够避开了变量提高相关知识，是但愿篇幅能够控制在必定范围，方便你们浏览，剧透一下《变量对象》会在下一篇和你们见面～ 持续更新，您的三连就是我最大的动力，虚心接受大佬们的批评和指点，共勉！

目录

• 前言
• 1、怎么描述执行上下文？
• 2、执行栈
• 3、形象化执行栈
• 4、思考与总结
• 5、写在最后

前言

又到了修炼JavaScript内功的时候了，继上一篇《从做用域到做用域链》以后，咱们来谈一谈执行上下文，在写这篇文章的时候总感受没法完整的将知识点串联起来，因此但愿你们也能提些建议哦，让这篇文章更值得收藏、点赞哦～

1、怎么描述执行上下文

1.1 本节知识导图：

1.2 若是描述执行上下文

1. 当函数执行时，会建立一个称为执行上下文的内部对象。一个执行上下文定义了一个函数执行时的环境；
2. 当一个函数被调用时，会建立一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息 ；
3. 每一个函数在被定义时，就会有一个[[scope]]属性，这个属性里保存着做用域链，而执行的前一刻都会建立一个OA对象，这个对象就是执行上下文，这个OA对象会被插入[[scope]]中做用域链的最顶端，这个对象里保存着函数体声明的全部变量、参数和方法。一个OA对象的有序列表。

上述三条描述都符合执行上下文的一些特色，但侧重点都不同。

1.3 执行上下文的类型

1. 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。

2. 函数执行上下文：存在无数个，只有在函数被调用的时候才会被建立，每次调用函数都会建立一个新的执行上下文。

3. Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，不多用并且不建议使用。

2、执行栈（Execution context stack）

你们都明白，函数的执行顺序和它的定义顺序不要紧，但如何解释，就须要从执行栈提及了。

2.1 本节知识导图

2.2 描述执行栈

执行栈，也叫调用栈，具备 LIFO（后进先出）结构，用于存储在代码执行期间建立的全部执行上下文。

首次运行JS代码时，会建立一个全局执行上下文并Push到当前的执行上下文栈中。每当发生函数调用，引擎都会为该函数建立一个新的函数执行上下文并push到当前执行栈的栈顶。

当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中pop出，上下文控制权将移到当前执行栈的下一个执行上下文。

接下来问题来了，咱们写的函数多了去了，如何管理建立的那么多执行上下文呢？

3、形象化执行栈

咱们利用图片+文字描述的方式来解释这样几段代码：

3.1 为了模拟执行上下文栈的行为，让咱们定义执行上下文栈为一个数组：

var ECStack = [];
复制代码

试想当 JavaScript 开始要解释执行代码的时候，最早遇到的就是全局代码，因此初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，咱们用 globalContext 表示它，而且只有当整个应用程序结束的时候，ECStack 才会被清空，因此程序结束以前， ECStack 最底部永远有个globalContext：

ECStack.push('globalContext');
ECStack // ["globalContext"]
复制代码

如今 JavaScript 遇到下面的这段代码了：

function fun1() {
    fun2();
}
function fun2() {
    fun3();
}
function fun3() {
    console.log('最后打印3')
}
fun1(); // 最后打印3
复制代码

当执行一个函数的时候，就会建立一个执行上下文，而且压入（push）执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出（pop）。知道了这样的工做原理，让咱们来看看如何处理上面这段代码：

// 伪代码

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中居然调用了fun2，还要建立fun2的执行上下文
ECStack.push(<fun2> functionContext);

// 擦，fun2还调用了fun3！
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

// javascript接着执行下面的代码，可是ECStack底层永远有个globalContext
复制代码

再看以下代码：

console.log(1);

function father() {
    console.log(2);
    (function child() {
        console.log(3);
    }());
    console.log(4);
}
father();

console.log(5);
//会依次输出 1 2 3 4 5
复制代码

分析它的执行栈经历了什么：

其实到这里咱们已经大体了解了执行栈在函数执行前->执行后的流程了，但下一篇文章咱们会详细了解释一下，感兴趣的小伙伴不妨点个关注，不跑丢哦～

4、思考题

如今咱们已经了解了执行上下文栈是如何处理执行上下文的，因此让咱们看看上篇文章《从做用域到做用域链》最后的问题：

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()();
复制代码

两段代码执行的结果同样，可是两段代码究竟有哪些不一样呢？

答案就是执行上下文栈的变化不同。

让咱们模拟第一段代码：

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
复制代码

让咱们模拟第二段代码：

ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
复制代码

参考

• 《你不知道的JavaScript》
• JavaScript深刻之执行上下文栈

5、写在最后

JavaScript内功基础部分已经总结到第四篇了，本系列大约会有15篇文章，都是咱们在面试最高频的，但工做中经常被忽略的知识点。

JavaScript内功系列：

完整版被我放在了CSDN，感兴趣的能够过去看看哦～ 传送门

1. this、call、apply详解，系列（一）
2. 从原型到原型链，系列（二）
3. 从做用域到做用域链，系列（三）
4. JavaScript中的执行上下文（本文）
5. 下一篇预告：执行上下文的“伴生姐妹”——变量对象

关于我

• 花名：余光
• WX：j565017805
• 沉迷JS，水平有限，虚心学习中

其余沉淀

• JavaScript版LeetCode题解
• 前端进阶笔记

若是您看到了最后，不妨收藏、点赞、评论一下吧！！！ 持续更新，您的三连就是我最大的动力，虚心接受大佬们的批评和指点，共勉！