美文网首页前端学习笔记
内存图 & 垃圾回收 & 深拷贝 & 浅

内存图 & 垃圾回收 & 深拷贝 & 浅

作者: _ClariS_ | 来源:发表于2019-07-24 21:58 被阅读0次

    内存相关概念

    举例说明:

    1. 买一个 8G 的内存条
    2. 操作系统开机即占用 512MB
    3. Chrome 打开即占用 1G 内存
    4. Chrome 为每个网页各自分配一定数量的内存
    5. Chrome 分配给每个网页的内存又要分给页面渲染器、网络模块、浏览器外壳和 JS 引擎(V8引擎)等
    内存分配
    1. JS 引擎将内存分为代码区数据区。例如,代码 var a = 1 应先进行变量提升将 var a 存入代码区,然后将数字 1 存入数据区
    内存分为代码区和数据区
    1. 我们只研究数据区,数据区又分为 Stack(栈内存)和 Heap(堆内存)
    数据区分为 Stack(栈内存)和 Heap(堆内存)
    1. 简单类型的数据(number、string、boolean、symbol、undefined、null)直接存在 Stack 里,而复杂类型的数据(object)是先把 object 存入Heap 中并给它一个地址(address),然后把它的地址存在 Stack 中,这种存地址的方式被称为引用
    简单数据存入 Stack,复杂数据存入 Heap 简单数据存入 Stack,复杂数据存入 Heap

    4个关于内存的题目(解题方法:画内存图)

    题目一:

    var a = 1
    var b = a
    b = 2
    请问 a 显示是几?  
    

    题目二:

    var a = {name: 'a'}
    var b = a
    b = {name: 'b'}
    请问现在 a.name 是多少?
    

    题目三:

    var a = {name: 'a'}
    var b = a
    b.name = 'b'
    请问现在 a.name 是多少?
    

    题目四:

    var a = {name: 'a'}
    var b = a
    b = null
    请问现在 a 是什么?
    

    其他:一个面试题

    一个面试题

    垃圾 & 垃圾回收GC(Garbage Collection)

    如果一个对象没有被引用,它就是垃圾,将被回收。

    如果一个对象没有被引用,就会变成垃圾,浏览器就会回收这些垃圾,释放它们所占用的内存,然后把这些内存重新分配给新的页面或其它需要内存分配的地方

    什么是垃圾

    一个题目:

    var fn = function(){}
    document.body.onclick = fn
    fn = null
    问:function() 是否为垃圾?
    

    图解:

    function() 存在引用,因此不是垃圾。

    内存泄漏:由于浏览器的一些 bug,使得本该被标记为垃圾的东西没有被标记为垃圾,从而导致内存被永久占用。
      比如IE6的一个bug:无法在页面关闭的时候正常地把本应该标记为垃圾的函数标记为垃圾,例如 onclick,从而造成内存泄漏。解决方法是在页面关闭时把所有没有被引用的函数设为 null。
    例如:

    window.onunload = function(){
        document.body.onclick = null;
    }
    

    深拷贝 & 浅拷贝

    var a = 1
    var b = a
    b = 2 // 这个时候改变 b
    a === 1 // true
    可以看出 a 完全不受 b 的影响,那么我们就说这是一个深拷贝
    

    对于简单类型的数据来说,赋值就是深拷贝。对于复杂类型的数据(对象)来说,才要区分浅拷贝和深拷贝。下面是一个浅拷贝的例子:

    var a = {name: 'aa'}
    var b = a
    b.name = 'bb'
    a.name === 'bb' // true
    b 的变化导致 a 也发生变化,这是一个浅拷贝
    

    对象的深拷贝就是对 Heap 内存进行完全的拷贝,那么如何将一个浅拷贝其变为深拷贝呢?如下:

    var a = {name: 'aa'}
    var b = deepClone(a) // deepClone 还不知道怎么实现
    b.name = 'bb'
    a.name === 'aa' // true
    

    相关文章

      网友评论

        本文标题:内存图 & 垃圾回收 & 深拷贝 & 浅

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