从内存角度理解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

函数执行前:

函数执行后:

相关推荐
haaaaaaarry1 小时前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
我是ed.2 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
前端Hardy4 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
Tminihu4 小时前
前端大文件上传的时候,采用切片上传的方式,如果断网了,应该如何处理
前端·javascript
颜酱4 小时前
理解vue3中的compiler-core
前端·javascript·vue.js
果粒chenl4 小时前
06-原型和原型链
前端·javascript·原型模式
Entropy-Lee4 小时前
JavaScript语法、关键字和变量
开发语言·javascript·ecmascript
谢尔登4 小时前
【JavaScript】手写 Object.prototype.toString()
前端·javascript·原型模式