一文详解JavaScript中执行上下文与执行栈(图文结
对于我们前端开发者来说理解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 } }登录后复制
全局执行上下文就会立刻变成这个样子:
上图可以看到,我们明明给name
和age
赋值了,咋还会显示undefined
呢?这是因为执行上下文分为两部分,创建阶段和执行阶段。
- 创建阶段 —— 执行上下文的初始化状态,做一些准备工作
- 执行阶段 —— 代码一行一行执行