从内存图中看JS的世界

浏览器的功能

1. 发送请求，下载HTML,解析HTML,下载CSS,解析CSS,渲染界面，下载JS,解析JS,执行JS等
2. 功能模块：用户界面、渲染引擎、JS引擎、存储等
3. 上面的功能模块一般处于不同的线程（比进程更小）
4. 比喻：进程是车间，线程就是车间里面的流水线

JS引擎

1. 各大浏览器用的JS引擎

• Chrome对应V8引擎，C++开发
• 网景对应SpiderMonkey，后被Firefox使用，C++开发
• Safari对应JavaScriptCore
• IE对应Chakra(JScript9)
• Edge对应Chakra(JavaScript)
• Node.js对应V8

2. 主要作用

• 编译：把JS代码翻译为机器能够执行的字节码或者机器码
• 优化：改写代码，使其更高效
• 执行：执行上面的字节码或者机器码
• 垃圾回收： 把JS用完的内存回收，方便再次使用

怎么执行JS代码

1. 浏览完提供的API:window/document/setTimeout
2. 第一点都不是JS自身具备的功能
3. 将第一点的功能称之为运行环境 runtime env
4. JS载入页面，开始执行JS
5. JS的代码在内存中运行

内存图

红色区域的作用

1. 用来存储数据
2. 不存储变量名，变量名在不知道什么区
3. 各个浏览器的分配规则不一样
4. 上图区域不完整
5. 还有【调用栈】、【任务队列】等区域没画
6. 它分为Stack区和Heap区
7. Stack区特点：每个数据顺序存放
8. Heap区特点：每个数据随机存放

window内存图分析

1. window变量不是window对象
2. window变量是一个容器，用来存放window对象的地址
3. window对象是Heap里面的一堆数据
4. console和console对象不是同一个动作
5. Object和Object函数对象不是同一个东西
6. 前者是内存地址，后者是一堆内存

用内存图分析prototype

1.举例

var obj = {};
obj.toString();//为啥不报错？为啥可以运行

• obj中有一个隐藏属性
• 隐藏属性存储了Object.prototype对象的地址
• obj.toString()发现obj上没有toString
• 去隐藏属性对应的对象里面找
• 找到Object.prototype.toString

var obj={};
var obj2 = {};
obj2.toString();//obj和obj2有什么联系

• 都可以调用toString()
• 地址不同 obj !== obj2
• 可以拥有不同属性
  X.prototype存储X对象的共同属性，这就是原型

原型的好处

1. 无需重复声明共有属性，省代码
2. 省内存

prototype和__proto__

1. 每个对象都有一个隐藏属性（指向原型【对象】）
2. 它们都存放着原型的地址
3. prototype挂在函数上
4. __proto__挂在每个新生对象上