从内存角度理解JS代码执行过程

下面这段代码是如何执行的呢

js 复制代码
var message = "why"
function foo(){
  var message = "foo"
  console.log(message)
}
var num1 = 20
var num2 = 30
var result = num1 + num2
console.log(result)
foo()

全局代码执行之前

  1. JS 引擎在执行代码之前,先在堆内存中创建一个全局对象 GO 。该对象所有的作用域都可以访问。 在浏览器中这个对象就是 window,里面有 Date Array Number setTimeout等等,还会有一个 window 属性指向自己。
  1. JS 引擎中有一个执行上下文栈,用于执行代码的调用栈,用来执行全局的代码块
  2. 全局的代码块为了执行,会创建一个全局执行上下文,被放入全局执行上下文栈中
  3. 在代码执行之前,代码转换 AST 的过程中 ,会将全局定义的变量、函数加入到全局对象 GO中,这个过程是变量的作用域提升 ,这些变量提升之后,var定义的变量赋值是undefined,函数赋值地址。
  4. 每一个执行上下文会关联一个 VO(变量对象) ,变量和函数声明会被添加到这个 VO 对象中,在全局执行上下文 VO = GO,VO是执行上下文中的概念,GO是堆内存中概念。 在下图中,函数对象中的name是foo,外层作用域就是GO了

全局代码执行之后

  1. 普通变量赋值
  2. foo函数执行
  • 当执行到函数时,会根据函数体创建一个函数执行上下文(FEC)并被压入到全局执行上下文栈中。
  • 并在堆内存中创建AO对象,每一个执行上下文都有 VO 对象,在函数中 VO=AO

函数执行前:

函数执行后:

相关推荐
gnip23 分钟前
SSE技术介绍
前端·javascript
yinke小琪37 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
爱编程的喵44 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
yinke小琪1 小时前
JavaScript 事件冒泡与事件捕获
前端·javascript
gzzeason1 小时前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone1081 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
iccb10132 小时前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
宇宙全栈Link2 小时前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny2 小时前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript