从内存到js垃圾回收、深浅拷贝

今天学习了js内存相关知识,写此博客作为记录,我们常说,一个变量如果存的是对象,那它保存的是对象的引用,何为引用?这就要从内存说起。

目录:
1. 内存与数据存储
2. 从内存看数据变动
3. 关于内存一些比较坑人的题目
4. js的垃圾回收机制
5. 粗略谈谈深浅拷贝

1. 内存与数据存储

从电脑内存到chrome

以chrome为例,当打开chrome浏览器之后,会占用电脑的内存(占用的还挺多的),然后chrome会将内存分配给打开的各个页面,在各个页面里,又会再次进行分配:HTML+CSS的渲染、JS引擎、网络模块(用于发起请求之类)、插件、定时器等。

从js引擎到数据存储

当JS引擎拿到被分配的内存后,会将内存划分为两个区:代码区(用于存放代码)/ 数据区(用于存储数据),而数据区又被划分为栈内存(stack)和堆内存(heap),栈内存大概是这样存储数据的!


image.png

对于简单数据类型可以这样存进栈中,那,对象的话,又该怎么存?
试想一下:假如对象也像简单数据类型这样存储,会怎么样呢?


image.png

假如上面已经存完了对象,后面又存了其他东西,这时候,如果我要给obj对象添加属性呢?那岂不是没地方存,难道要将栈中obj后面的数据全部往后挪?这还了得?所以对象的话必然不能按照这种方法存储。

关于对象的存储,其实是这样的


image.png

对象在栈中只存储一个地址,这个地址是随机的,指向堆中唯一与之对应的一块区域。这样,就可以做到灵活存储对象类型的数据了。

2. 从内存看数据变动

假如存储在栈中的数据变动了,内存上是怎么变动的呢?

只需记住一点,赋值号的作用就是将右边的变量在栈中保存的东西覆盖左边
如果右边的变量的数据是简单类型,会将栈中保存的东西(值)覆盖左边

image.png

而如果右边的是复杂类型,会将栈中保存的东西(地址)覆盖左边
image.png

3. 关于内存一些比较坑人的题目

为何打印出a.x为undefined?
a.x = a = { m:2 };
console.log(a.x)  // undefined

这里有一个很坑的地方↓(第四点)


image.png

4. js的垃圾回收机制

前面讲了,内存是十分珍贵的,假如浏览器中的一些垃圾变量已经不被使用了,但仍然未被回收的话,就会一直占用着内存,造成资源浪费,js引擎有着自己的回收机制,下面简单说下垃圾对象的回收:
a保存的数据是一个对象,在stack中保存了它的地址(107),这个地址就指向了heap中107的区域。


image.png

但如果这样:

a = null; 

那原先heap中107区域的数据将会失去引用,这时他就成了一个垃圾对象,至于何时回收,这是浏览器决定的。
heap中,失去了引用的对象,就会成为垃圾对象

5. 粗略谈谈深浅拷贝

  • 深拷贝:将b赋值给a,b变不影响a就是深拷贝
    对于简单数据类型,赋值就是深拷贝

  • 浅拷贝: 直接将b对象在stack中存的地址拷贝,b变a变(除非改变b的地址,则a,b存着不同的地址)

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