JS 引擎和内存图

JS 引擎

JS 引擎举例：

• Chrome 用的是 V8 引擎，C++编写
• 最新版 Edge 换成了 V8 引擎
• Node.js 用的是 V8 引擎

JS 引擎的主要功能：

编译：把 JS 代码翻译为机器能执行的字节码或机器码。

想了解可自行补 编译原理知识

优化：改写代码，使其更高效。

优化属于编译原理比较重要的内容，会的人少。

执行：执行上面的字节码或机器码。
垃圾回收：把 JS 用完的内存回收，方便之火再次使用。

执行 JS 代码的准备工作

• 提供 API：window / document / seTimeout
• 这些都不是 JS 自身具备的功能，这些功能称为运行环境 runtime env
• 一旦把 JS 放进页面，就开始执行 JS

JS 代码在哪里运行？

• 内存

  哪里的内存？

• 内存图

内存图

红色区域——数据区

作用：

• 红色区域专门用来存放数据，目前只研究该区
• 红色区域并不存变量名，变量名在红色前面的不知名区
• 每种浏览器的分配规则并不一样

• 上图的区域不完整，还没有画 【调用栈】、【任务队列】等区域

  Stack 和 Heap

• 红色区域分为 Stack 栈和 Heap 堆

  要解释为什么叫栈和堆需要数据结构知识

• Stack 区的特点：每个数据顺序存放

• Heap 区的特点：每个数据随机存放

Stack 和 Heap 举例

var a = 1
var b = a
var person = {name:'frank',child:{name:'jack'}}
var person2 = person

规律

• 数据分两种：非对象和对象
• 非对象都存在 **Stacck**
• 对象都存在 **Heap**
• 只要看到一个对象，就随机在 **Heap** 区开辟一块区域存放内容
• **= 号** 总是会把右边的东西复制到左边 存了一个地址（不存在什么传值和传址）

  不会画内存图的人才需要区分值和地址

var person = {name:'frank'}
var person2 = person
person2.name = 'ryan'
console.log(person.name) //'ryan'