浏览器的功能
- 发送请求,下载HTML,解析HTML,下载CSS,解析CSS,渲染界面,下载JS,解析JS,执行JS等
- 功能模块:用户界面、渲染引擎、JS引擎、存储等
- 上面的功能模块一般处于不同的线程(比进程更小)
- 比喻:进程是车间,线程就是车间里面的流水线
JS引擎
- 各大浏览器用的JS引擎
- Chrome对应V8引擎,C++开发
- 网景对应SpiderMonkey,后被Firefox使用,C++开发
- Safari对应JavaScriptCore
- IE对应Chakra(JScript9)
- Edge对应Chakra(JavaScript)
- Node.js对应V8
- 主要作用
- 编译:把JS代码翻译为机器能够执行的字节码或者机器码
- 优化:改写代码,使其更高效
- 执行:执行上面的字节码或者机器码
- 垃圾回收: 把JS用完的内存回收,方便再次使用
怎么执行JS代码
- 浏览完提供的API:window/document/setTimeout
- 第一点都不是JS自身具备的功能
- 将第一点的功能称之为运行环境 runtime env
- JS载入页面,开始执行JS
- JS的代码在内存中运行
内存图
红色区域的作用
- 用来存储数据
- 不存储变量名,变量名在不知道什么区
- 各个浏览器的分配规则不一样
- 上图区域不完整
- 还有【调用栈】、【任务队列】等区域没画
- 它分为Stack区和Heap区
- Stack区特点:每个数据顺序存放
- Heap区特点:每个数据随机存放
window内存图分析
- window变量不是window对象
- window变量是一个容器,用来存放window对象的地址
- window对象是Heap里面的一堆数据
- console和console对象不是同一个动作
- Object和Object函数对象不是同一个东西
- 前者是内存地址,后者是一堆内存
用内存图分析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对象的共同属性,这就是原型
原型的好处
- 无需重复声明共有属性,省代码
- 省内存
prototype和__proto__
- 每个对象都有一个隐藏属性(指向原型【对象】)
- 它们都存放着原型的地址
- prototype挂在函数上
- __proto__挂在每个新生对象上