理解JavaScript的内存模型和事件循环

所有的编程语言都会存在内存生命周期，不同的是 部分语言会暴露出来，比如C。而有些语言是将具体细节进行隐藏，用户只会看到变量定义，赋值，对象的创建，不会关注变量创建的时候，内存如何处理，比如Java和JavaScript 。 接下来， 简单描述一下Js的内存

先简单说一下，JavaScript的内存结构

• JavaScript的内存结构
  之前的博客，在说Js上下文对象时，简单提到了Javascript的上下文对象，和函数执行时栈结构，接下来，说一下，整个Js如何设计内存结构 ， 如下图所示
  
  Stack :
  Js的栈结构，和Java类似，栈中主要存放一些基本类型的变量和对象的引用。在JavaScript中“one thread === one call stack == one thing at a time”

  Heap
  JavaScript中的堆

  Queue
  用于存放异步任务与定时任务

• 内存模型介绍
  和JVM内存结构类似，都存在堆栈区， 堆区存放一系列对象 ；栈区主要存放基本变量和一些对象的引用。不同的是 JavaScript不需要本地方法栈、常量池等，此外为了处理事件，Javascript还需一个Queue处理事件
  

• 用户接口 （user interface ）
  用户提供在不同场景下都具有价值的功能，比如下边的一些浏览器工具栏按钮，具体细节参考 MDN
  

• Js运行内存 （JavaScript Runtime）
  Call Stack :
  下边是英文原文描述，翻译过来就是， 调用堆栈(Call Stack)是一种解释器机制，Js脚本中方法执行的trace , 包括当前执行的函数和已经被调用的函数 ，这点和Java的方法栈类似

  A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc

  之前讲Js执行上下文时，提到， 当执行一个函数时，会把对应函数的执行上下文压入方法栈顶，如果在该方法中在调用到其他函数会把其他函数的上下文压入栈顶 ，方法执行结束，会从栈顶弹出对应的上下文

  Heap ：
  就是JavaScipt中用来存放对象的，和Java类似，就不多介绍了

• 浏览器接口 （Web Apis）

  When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.

  上边是MDN中对Wep APIS 描述，简单理解就是，浏览器接口是浏览器提供给开发者用来编写网站或者Web等， 很多接口，可以参考 Web APIS | MDN

  下图中是包含的一些接口，比如圈起来的 Canvas 接口
  

• 事件循环 （Event loop）

  上边图片中，比如 DOM操作、网络操作、定时器队列等，接下来的内容会在下片博文 中描述

​