16·灵魂前端工程师养成-JavaScript内存图

• 操作系统常识
• JS引擎
• JavaScript的世界
• JavaScript的三座大山

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

操作系统常识

请见博客：Linux系统的开机启动流程

1.发起请求

下载HTML 解析HTML 下载CSS 解析CSS 渲染界面 下载JS 解析JS 执行JS

2.功能模块

用户界面 渲染引擎 JS引擎（跨线程通信） 存储等

JS引擎

1.Chrome 用的是V8引擎，C++编写 2.网景用的是SpiderMonkey，后被Firefox使用，C++编写 3.Safari使用的是JavaScriptCore 4.IE用的是Chakra（JScript9） 5.Edge用的是Chakra（JavaScript） 6.Node.js用的是V8引擎

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

准备工作：

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





红色区域作用：

1.专门用来存储数据。 2.不存储变量名。 3.每种浏览器分配规则不一样。

上图分配并不完整，因为还有 调用栈，任务队列，垃圾回收 等区域

Stack：栈，特点，每个数据顺序存放。 Heap：堆，特点，每个数据随机存放。

 var a = 1
 var b = 2
 
 var person = {name: 'zls',child:{name: 'zhang3'}}
 var person2 = person

规律： 数据分为两种，对象 和 非对象

非对象都在Stack 对象都在Heap

篡改对象：

var person = {name:'zls'}
var person2 = person
person2.name = 'qls'

console.log(person.name)
qls

JavaScript的世界

盘古开天辟地，神说，要有光，于是就有了光...

JS刚出来的时候，JS的开发者说，要有window，于是... 就有了window



还要控制台，document，对象，属组，函数...

于是就把所有东西都挂在了window上

而且自己也可以写内容，直接挂在window上





1.window变量和window对象是两个东西 2.window变量是一个容器，存放window对象的地址 3.window对象是Heap里的一坨数据

JavaScript的三座大山

可以看见下图中：

window有个Object，在Object中又有个prototype window有个Array，在Array中又有个prototype



可以看到里面有很多个函数。



接下来我们定义一个Object,里面是空。然后运行obj，居然不会报错

var obj = {}

obj.toString()



console.dir(wiindow.Object.prototype)



obj.toString === window.Object.prototype.toString



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

XXX.prototype存储了XXX对象的共同属性，因此我们就不需要重新写共同属性了。

Array.prototype存储了Array对象的共同属性 Object.prototype存储了Object对象的共同属性...

这就是原型，如果没有原型...

声明一个对象：

var obj = {
    toString: window.Object.prototype.toString,hasOwnPropertype: window.Object...
}

var obj.toString = {
    toString: window.Object.prototype.toString,hasOwnPropertype: window.Object...
}

var obj2.toString = {
    toString: window.Object.prototype.toString,hasOwnPropertype: window.Object...
}

这样不累么？

原型，让你无需重复的赋值，这样就可以提升效率节省内存

每个对象都有自己的隐藏属性。

我们只关心，小写开头的对象，不关心大写字母开头的对象。

prototype 和 __proto__的区别就是，都存着原型的地址，只不过prototype挂载函数上__proto__挂在每个新生成的对象上。