内存图与 JS 世界

操作系统常识（一切都运行在内存里）

开机

按开机键——主板通电——读取固件——加载开机程序——将文件里的操作系统加载到内存运行

操作系统（以Linux为例）

• 加载内核——启动初始化进程——启动系统服务（文件、安全、联网）——等待用户登录——登录后运行 shell
• bash 是一种 shell ，图形化界面也可以认为是一种 shell

浏览器

开启浏览器进程作为主进程，它会开启一些辅助进程，如网络服务，GPU加速，每新建一个网页，都有可能开启一个子进程。

浏览器的功能

发起请求，下载 HTML，解析 HTML，下载 CSS，解析 CSS，渲染界面，下载 JS，解析 JS，执行 JS等，JS 想要去修改 HTML 或者 CSS 需要线程通信，这就叫跨线程通信，也是 DOM 操作慢的原因。

功能模块：用户界面、渲染引擎、JS 引擎、存储等，功能模块一般都处于不同线程。

线程：是操作系统能够进行运算调度的最小单位，JS 就是单线程的。

JS 引擎

主要功能

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

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

执行：执行上面的字节码或机器码

垃圾回收：把 JS 用完的内存回收，方便之后再次使用

执行 JS 代码

准备工作

提供API: window / document / setTimeout

这些功能是浏览器提供的，不是 JS 自身具备的功能

这些功能被称为运行环境 ( runtime environment )

JS 代码会在内存中运行

内存图

• 红色区域存放数据，变量名在不知什么区，每种浏览器的分配规则并不一样
• 红色区域分为 Stack 栈 和 Heap 堆
• Stack 区的特点是每种数据顺序存放
• Heap 区的特点是每种数据随机存放

数据分为两种：非对象和对象（只有数字、字符串、布尔不是对象）

• 非对象存在 Stack 区
• 对象存在 Heap 区
• = 号总是会把右边的东西复制到左边（不存在传值和传址）

对象

var person={} 等价于 var person=new Object()

数组

var a=[1,2,3] 等价于 var a=new Array(1,2,3)

函数

function f (){} 等价于 var f=new Function()

后者是正规写法，但是不好用

window 内存图

• window 对象和 window 变量是两个东西
• 变量在不知什么区，对象在 Heap 区
• 变量是个容器，存放对象的地址
• 对象只是 Heap 里的数据

Object 和 object 的区别？

Object 是一个全局函数，可以用来生成对象，var obj = new Object() ，可以简写成 var obj = {}；而 object 什么也不是，除非声明一个 var object

篡改对象

一层可以篡改，两层不行

var person={name:'jack'}

var person2=person

person2.name='tom'

console.log(person.name)

'tom'

原型链

console.dir()可以显示一个对象所有的属性和方法

prototype 属性

下列代码为何不报错？

var obj={}
undefined

obj.toString()
"[object Object]"

obj 有一个隐藏属性，存储了 Object.prototype 对象的地址

obj.toString() 发现 obj 上没有 toString，就会去隐藏属性对应的对象的里去找

obj 和 obj2 的区别

var obj={}
undefined

obj.toString()
"[object Object]"

var obj2={}
undefined

obj2.toString()
"[object Object]"

obj.toString()===obj2.toString()
true

obj===obj2
false

相同点

都可以调用.toString()

不同点

地址不同 obj!==obj2

• 一般来说，首字母大写就会有 prototype 属性
• xxx.prototype 存储了 xxx 对象的共同属性，这就是原型
• 原型的好处：无需重复申明共有属性，可以省代码，省内存
• 每个对象都有一个隐藏属性 也就是指定原型（对象）

prototype 和 --proto-- 的区别

• 都存着原型的地址
• 只是 prototype 挂在函数上
• --proto-- 挂在每个新生成的对象上

假设如下代码，那么obj、arr 与 window、Object 和 Array 的关系是什么？

var obj = {}
var arr = [1,2,3]

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源