JavaScript内存图与原型

110 阅读2分钟

进程与线程

  1. 一切都运行在内存里
  2. JS是单线程的
  3. JS引擎和渲染引擎通过跨线程通信(DOM操作慢的原因)
  4. 如果进程是车间,那么线程就是车间里的流水线

浏览器的功能

发起请求,下载HTML,解析HTML,下载CSS,解析CSS,渲染界面,下载JS,解析JS,执行JS等

功能模块:用户界面、渲染引擎、JS引擎、存储等

内存图

Stack区特点:每个数据顺序存放

Heap区特点:每个数据随机存放

规律:

  • 数据分两种:非对象和对象
  • 非对象都存在Stack
  • 对象都存在Heap
  • =号总是会把右边的东西复制到左边

window内存图

36.png

image.png

  • window变量和window对象是两个东西
  • window变量是一个容器,存放window对象的地址
  • window对象是Heap里的一堆数据
  • console和console对象不是同一个东西
  • Object和Object函数对象不是同一个东西
  • 前者是内存地址,后者是一堆内存
window.Object
console.dir(window.Object)

原型链

38.png

var obj = {}
obj.toString()
  • obj有一个隐藏属性,隐藏属性存储了Object.prototype对象的地址
  • obj.toString()发现obj上没有toString,就去隐藏属性对应的对象里面找,于是就找到了Object.prototype.toString

XXX.prototype存储了XXX对象的共同属性,这就是原型

原型可以让你无需重复声明共有属性,省代码,省内存

每个对象都有一个隐藏属性,指向原型(对象)。这个隐藏属性叫__proto__

39.png

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

var arr = [1,2,3]
arr.join('-')
  • arr有一个隐藏属性,隐藏属性存储了Array.prototype对象的地址
  • arr.join()发现arr上没有join,就去隐藏属性对应的对象里面找,于是就找到了Array.prototype.join

JS世界

40.png

资料来源:饥人谷