美文网首页让前端飞
从内存到js垃圾回收、深浅拷贝

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

作者: 临安linan | 来源:发表于2019-03-20 22:38 被阅读29次

今天学习了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

相关文章

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

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

  • JS 里的数据类型转换

    内容: 类型转换 五个falsy值 内存图 垃圾回收 深浅拷贝 强制转换 一. 任意类型转Number 五种...

  • python 深浅拷贝 属性获取,垃圾回收

    说下对python深浅拷贝的理解。并有代码简单实现 浅拷贝:浅拷贝是对于一个对象的顶层拷贝,拷贝了引用,并没有拷贝...

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • js的深浅拷贝

    js的深浅拷贝可以分为数组的深浅拷贝和对象的深浅拷贝 一、数组的深浅拷贝如果只是简单的将数组中的元素付给另外一个数...

  • js深浅拷贝

    项目中,一般会用loadsh库,地址:https://github.com/lodash/lodash 浅拷贝方法...

  • js 深浅拷贝

    浅拷贝 是 把对象或者数组的第一层 key 或者 索引 赋到 新的 对象或者对象上 深拷贝是迭代浅拷贝的操作,也就...

  • js 深浅拷贝

    深拷贝 更好的写法: 浅拷贝 浅拷贝,还可以用 Object.assign 、展开运算符 ...

  • JS深浅拷贝

  • JS深浅拷贝

    JS存储方式 JS中存在基本数据类型和引用数据类型1.基本数据类型:number,string,boolean,n...

网友评论

    本文标题:从内存到js垃圾回收、深浅拷贝

    本文链接:https://www.haomeiwen.com/subject/zogtvqtx.html