本文共 949 字，大约阅读时间需要 3 分钟。

函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？

JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

从上面的流程图，我们需要记住几个关键点：

JavaScript 执行在单线程上，所有的代码都是排队执行。

一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。 每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。 浏览器的 JS 执行引擎总是访问栈顶的执行上下文。 全局上下文只有唯一的一个，它在浏览器关闭时出栈。 我们再来看个例子：

var color = "blue";function changeColor() {
       var anotherColor = "red";    function swapColors() {
           var tempColor = anotherColor;        anotherColor = color;        color = tempColor;    }    swapColors();}changeColor();

上述代码运行按照如下步骤：

当上述代码在浏览器中加载时，JavaScript 引擎会创建一个全局执行上下文并且将它推入当前的执行栈

调用 changeColor 函数时，此时 changeColor 函数内部代码还未执行，js 执行引擎立即创建一个 changeColor 的执行上下文（简称 EC），然后把这执行上下文压入到执行栈（简称 ECStack）中。 执行 changeColor 函数过程中，调用 swapColors 函数，同样地，swapColors 函数执行之前也创建了一个 swapColors 的执行上下文，并压入到执行栈中。 swapColors 函数执行完成，swapColors 函数的执行上下文出栈，并且被销毁。 changeColor 函数执行完成，changeColor 函数的执行上下文出栈，并且被销毁。

转载地址：http://cdqii.baihongyu.com/