一文详解JavaScript中执行上下文与执行栈(图文结

编辑: admin 分类: .net 发布时间: 2023-06-08 来源:互联网

一文详解JavaScript中执行上下文与执行栈(图文结合)

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

1 何为执行上下文

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

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

2 分类

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

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

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

2.1 全局执行上下文

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

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

  • 全局对象(浏览器里是WindowNode环境下是Global
  • this变量(指向的还是全局对象)

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

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}
登录后复制

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

1.png

上图可以看到,我们明明给nameage赋值了,咋还会显示undefined呢?这是因为执行上下文分为两部分,创建阶段和执行阶段。

  • 创建阶段 —— 执行上下文的初始化状态,做一些准备工作
  • 执行阶段 —— 代码一行一行执行
更多阅读