包教包会，纯 CSS 实现步进环绕跑马灯效果

引言

对于我们前端开发者来说理解JS程序内部执行机制是必要的，其中一个关键概念就是Js的执行上下文和执行栈。执行上下文是JS语言较为底层的知识，学习掌握有助于我们更深入的把握JS这门语言的本质，也有助于理解作用域、闭包、变量提升等相关知识。

1 何为执行上下文

代码执行前，浏览器的Js引擎先会创建代码执行的环境来处理此Js代码的转换和执行，代码的执行环境称为执行上下文。

执行上下文是一个抽象概念，包含当前正在运行的代码以及帮助其执行的所有内容。

2 分类

执行上下文主要分为三类：

• 全局执行上下文 —— 全局代码所处的环境，不在函数内部代码都在全局执行。
• 函数执行上下文 —— 在函数调用时创建的上下文。
• Eval执行上下文 —— 运行在Eval函数中代码时创建的环境，Eval由于性能问题在我们平时开发中很少用到，所有这里我们不在讨论。

接下来我们重点来讲全局上下文和函数上下文。

2.1 全局执行上下文

当我们的JS文件跑起来之后，首先创建的就是全局执行上下文。

当我们的文件里没有一行代码时，全局执行上下文中比较干净，只有两个东西。

• 全局对象（浏览器里是Window，Node环境下是Global）
• this变量（指向的还是全局对象）

这时候如果我们在文件里写点东西，比如我写如下代码：

var name = '小明'
var age = 18
function showName(){return {name : name,age : age}
} 
1
2
3
4

全局执行上下文就会立刻变成这个样子：