初窥JS世界以及内存图详解

操作系统

常用英语

  1. shell
    操作界面
  2. os
    操作系统
  3. runtime
    运行时(也就是运行时所需要的东西)
  4. kernel
    内存
  5. compile
    编码

过程

  1. 开机过程
  • 通电
  • 读取固态硬盘
  • 将操作系统加载到内存
  1. 打开chrome
    每开一个网页就会开一个新的进程

chrome功能

  • 发起请求
  1. 下载HTML,CSS,JS
  2. 解析HTML,CSS,
  • 功能模块(说是功能模块其实也是代码拼砌得到的)
  1. 网页界面
  2. 渲染引擎
    主要用于渲染HTML,CSS,如果JS要渲染也会在这里渲染。渲染的意思就是在HTML,CSS解析后,将他们放在屏幕上成为样式的过程。
  3. JS引擎
    解析执行JS
  4. 储存
    Tips:
  5. 进程>子进程>线程,子进程是进程但是线程不是,他是进程下面的一级单位
  6. 一般来说,要把程序加载到内存才能运行
  7. 双击 Chrome 快捷方式,会启动一个 Chrome 进程,这个进程会启动其他子进程,每开一个新的页面,都会开一个JS线程和一个渲染线程,如果JS要渲染一定要跨线程通信,在渲染引擎中渲染。这样会比别的同线程通信的慢。
  8. 线程不是进程,线程是一种比进程更轻量的概念
  9. JS 只能单线程执行,
    我们将着重分析JS引擎和储存部分

JS引擎

chrome的JS引擎是V8引擎,C++编写的,这并不是第八代,而仅仅是作者写了很多不同类型的引擎,第八个类型正好是JS。

功能
  1. 编译:把JS代码翻译成机器能够看懂执行的字节码
  2. 优化:改写代码,使其更加的高效
  3. 执行:执行上面的机器码/字节码
  • 准备工作:
    1.提供API,也就是运行环境,提供window/document/SetTimeout,这些事JS里面没有的,浏览器提供的
  1. 把JS放进页面
  • 执行JS
  1. 垃圾回收:把JS用完的内存回收,方便下次用

内存

内存的模样

每一格就是一个内存区域。

  1. 每一个内存区域的构造如图:
    内存构造
  2. 而在chrome进程中


    chrome进程
  3. 而在JS引擎中


    JS引擎

    Tips:

  4. Stack区是连续储存,Heap是随机存放,哪里有地方就放在哪里,这两个区合起来是数据区,用于存放数据,里面没有变量名,所有变量名字都存在了‘不知道什么区’里面

  5. 每个浏览器的分配规则不同,这里只介绍chrome的

  6. 上图区域并不完整,还有调用栈等没画

数据区
  1. 如果有会改变的量存在Heap区,因为Heap是随机存的,Stack是按顺序,如果在stack中,改变其中一个要全部下面都要改动,非常低效。在Heap区存储的数据会产生一个内存地址,这个地址会存在Stack区。一般来说:对象在Heap,非对象在Stack
    eg.
let p={
name:'Jack'
child:'Tom'}

此时假设p生成的地址是#300,child是#200


储存例子

Tips:

  1. =是赋值,将右边的复制到左边,===才是等于
    eg.
let p={name:'jack'}
let p1=p
p1={name:'x'}

则它们两个的内存地址是相同的,且这个时候p和p1name都是x

JS相关的与数据区关系

写代码前,浏览器提供

  1. Window
  2. Window.Console(控制台)
  3. Window.Document(文档)
  4. Window.Object(对象)
  5. Window.Array(数组)
  6. Window.Function(函数)
    Tips:
  7. 23456都是挂在window下面,可以直接使用,目的是为了方便,可以直接用而不是每次重新打
  8. window变量和window对象不同,变量是存放对象的地址,是存放在stack的内存地址,对象则是在Heap区的数据
JS三座大山之原型与数据区关系

JS三座大山

  • 原型
  • AJAX
  • this

原型

原型
每个对象都有原型

  1. 原型里存着对象的共有属性
    eg. obj 的原型就是一个对象

  2. obj.__proto__存着这个对象的地址
    这个对象里有 toString/constructor/valueOf 等属性

  3. 对象的原型也是对象

  4. 所有对象的原型也有原型
    obj={}的原型即为所有对象的原型, 这个原型包含所有对象的共有属性,是对象的根
    这个对象的共有属性的这个原型也有原型,是 null

  5. 所有函数一出生就有一个 prototype 属性

  • 所有 prototype 一出生就有一个 constructor 属性
  • 所有 constructor 属性一出生就保存了对应的函数的地址
  • 如果一个函数不是构造函数,它依然拥有 prototype 属性,只不过这个属性暂时没什么用

原型和数据区关系

每一个新的object(对象)/array(数组)/function(函数)里面都有一个隐藏的属性,为proto,它里面有很多属性,而且与Window.Object(对象)/ Window.Array(数组) /Window.Function(函数)里面的隐藏属性Prototype内存地址相同,这里Prototype里面就是这些object(对象)/array(数组)/function(函数)的共有属性,我们称之为原型,可以方便你写代码更快而不用每个属性都重新写。这些都是浏览器开始就写好的,不然用到常用指令还要自己再写很麻烦
######## 相关属性

  1. 改对象
    eg
let a={}
let b={}
a.tostring=b.tostring
b.tostring = 'xx'

此时a.tostring不会是'xx',因为画内存图就可以轻松的知道是怎么回事了,假设隐藏属性proto和Prototype的地址为#409,a为#300,b为#200.


内存图

可以发现,这里对b中tostring进行赋值,与a一点关系都没有,因为这里如果b的tostring要指向a需要两次,而且最为关键的是,直接在b中修改tostring是没办法影响到#409里面的属性,而且#409里面的是永远无法通过改变自身的所有属性来改变,谁来都不行,也就无法影响a
但若是

let a={}
let b={}
a.tostring=‘aa’
b.tostring = 'xx'
a.tostring=b.tostring

这样ab的tostring都是xx了,因为
![内存图](https://upload-images.jianshu.io/upload_images/19247518-bb2a3eeb479696e9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
他们只有一次指向,可以直接修改。

**因此!!!如果内存图只有一次指向,就可以直接修改,两次或以上的指向就没办法修改**
Tips:
1. 所有大写开头的,
1. Window
2. Window.Console(控制台)
3. Window.Document(文档)
4. Window.Object(对象)
5. Window.Array(数组)
6. Window.Function(函数)
都有Prototype,也就是原型,小写的都有proto这个隐藏属性,这里的共有属性是没法修改的,只能读取。
## 原型链
修改原型:
`object.create(common)`
eg.

var common={'name':'xxx'}
var person=object.create(common)

![原型链](https://upload-images.jianshu.io/upload_images/19247518-c9494b880ddccaa2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355