一篇文章弄懂javascript中的执行栈与执行上下文


Posted in Javascript onAugust 09, 2019

前言

作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等。

执行栈

执行栈用于存储代码执行期间创建的所有执行上下文。具有FILO接口,也被称为调用栈。
当JavaScript代码被运行的时候,会创建一个全局上下文,并push到当前执行栈。之后当发生函数调用的时候,引擎会为函数创建一个函数执行上下文并push到栈顶。引擎会先执行调用栈顶部的函数,当函数执行完成后,当前函数的执行上下文会被移除当前执行栈。并移动到下一个上下文。

let a = 'Hello'

function first() {
  console.log('Inside first function')
  second()
  console.log('Again inside first function')
}

function second() {
  console.log('Inside second function')
}

first()

console.log('Inside Global execution context')

一篇文章弄懂javascript中的执行栈与执行上下文

执行上下文

我们可以理解为执行上下文是js代码被解析和执行时所在环境的抽象概念。
JavaScript的执行上下文分为三种类型:

  • 全局执行上下文:最基本的上下文,只有一个。创建了一个全局对象(eg:浏览器中的window),将this指向全局对象。
  • 函数执行上下文:每次调用函数都会创建一个函数上下文。函数上下文可以存在无数个。
  • Eval函数执行上下文:运行在eval函数中的代码会有一个自己的执行上下文(本文不讨论)。

执行上下文的创建

创建执行上下文又可以分为两个阶段: 1. 创建阶段 2. 执行阶段

创建阶段

在创建阶段,JavaScript引擎会创建LexicalEnvironment(词法环境)组件,VariableEnvironment(变量环境)组件以及this绑定(在全局上下文中,this指向全局对象。在函数执行上下文中,this取决与函数在哪里被调用。)

Lexical  Environment(词法环境)

ES2015规范对词法环境的描述

我们可以理解为词法环境是一种包含标识符(变量/函数的名称)和变量(实际对象:函数/原始值/数组对象等)映射的数据结构。

每个词法环境由两部分组成:Environment Record环境记录(存储变量和函数声明的实际位置)和对外部环境的引用(可以访问其外部词法环境)

环境记录分为两种:

  • Declarative environment record(声明性环境记录): 存储变量和函数声明。
  • Object environment record(对象环境记录):全局词法环境。除了变量和函数声明外,对象环境记录还存储全局绑定对象。

tips:对于函数执行上下文来说,环境记录还包含了一个arguments对象,包含了传递给函数的索引和参数之间的映射以及函数参数的数量。

例如:

function foo(a, b) {
  var c = a + b
}

// argument object
Arguments: {0: 2, 1: 3, length: 2}

VariableEnvironment(变量环境)

变量环境也是一个词汇环境,因此它具有上面定义的词法环境的所有属性和组件。在ES6中,LexicalEnvironment组件和VariableEnvironment组件之间的一个区别是前者用于存储函数声明和变量let和const绑定,而后者仅用于存储变量var绑定。

执行阶段

在执行阶段,会完成对所有变量的分配,代码也会被最终执行。执行上下文的代码会被分成两个阶段:

  1. 进入执行上下文
  2. 代码执行
let a = 20
const b = 30
var c

function multiply(e, f) {
  var g = 20
  return e * f * g
}

c = multiply(20, 30)

当上面的代码被执行的时候,JavaScript引擎会创建一个全局上下文来执行全局代码。

此时的全局上下文:

GlobalExectionContext = {  // 全局上下文
  LexicalEnvironment: {  // 词法环境
    EnvironmentRecord: {  // 环境记录
      type: 'Object', // 类型
      // 标识符
      a: <uninitialized>,
      b: <uninitialized>,
      multiply: <func>
    },
    outer: <null>, // 对外部环境引用
  },
  VariableEnvironment: { // 变量环境
    EnvironmentRecord: {  // 环境记录
      type: 'Object',
      c: undefined
    },
    outer: <null>, // 对外部环境引用
  },
  ThisBinding: <Global Object>  // this绑定
}

在执行阶段,变量会被赋值,此时的全局上下文变成:

GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      type: 'Object',
      a: 20,
      b: 30,
      multiply: <func>
    },
    outer: <null>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      type: 'Object',
      c: undefined
    }
    outer: <null>
  },
  ThisBinding: <Global Object>
}

当JavaScript引擎遇到函数multiply(20, 30)的时候,会创建一个新的函数上下文:

FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      type: 'Declarative',
      arguments: {
        0: 20,
        1: 30,
        length: 2
      }
    },
    outer: <GlobalLexicalEnvironment>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
     Type: "Declarative",
     g: undefined
    },
    outer: <GlobalLexicalEnvironment>,
  },
  thisBinding: <Global Object or undefined>
}

之后执行上下文会进入执行阶段, 此时的函数上下文:

FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      type: 'Declarative',
      arguments: {
        0: 20,
        1: 30,
        length: 2
      }
    },
    outer: <GlobalLexicalEnvironment>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
     Type: "Declarative",
     g: 20
    },
    outer: <GlobalLexicalEnvironment>,
  },
  thisBinding: <Global Object or undefined>
}

当函数执行完毕后。会返回一个值并赋值给变量c,全局上下文被更新。更新完成后,代码执行完毕,程序结束。

参考文章

Understanding Execution Context and Execution Stack in Javascript

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 #Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 #Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 #Javascript
微信小程序如何连接Java后台
Aug 08 #Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 #Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python机器学习之决策树算法
2017/12/22 Python
python+opencv识别图片中的圆形
2020/03/25 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
python实现滑雪者小游戏
2020/02/22 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
基于Python实现简单学生管理系统
2020/07/24 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
物流创业计划书
2014/02/01 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python os和os.path模块详情
2022/04/02 Python