美文网首页
关于javascript的浅拷贝和深拷贝

关于javascript的浅拷贝和深拷贝

作者: JK_TanTan | 来源:发表于2018-05-30 09:51 被阅读0次

基础须知

数据类型之基础类型

5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。

数据类型之引用类型

地址指针在栈内存中,实际数据在堆内存中。存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。

概述

JavaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。

浅拷贝只是让拷贝对象拥有了只想对象数据的指针地址,深拷贝才会字对内存中真正复制一份

这里有个点大家要注意下,对于function类型,一般是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝

深拷贝实现

function deepClone(data) {
    var t = type(data), o, i, ni;
    
    if(t === 'array') {
        o = [];
    }else if( t === 'object') {
        o = {};
    }else {
        return data;
    }
    
    if(t === 'array') {
        for (i = 0, ni = data.length; i < ni; i++) {
            o.push(deepClone(data[i]));
        }
        return o;
    }else if( t === 'object') {
        for( i in data) {
            o[i] = deepClone(data[i]);
        }
        return o;
    }
}

Array的slice和concat方法

Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。之所以把它放在深拷贝里,是因为它看起来像是深拷贝。而实际上它是浅拷贝。
取决于数组的值是基础类型还是引用类型。

JSON对象的parse和stringify

JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,可以实现对象的深拷贝。

jQuery.extend()方法

jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝

相关文章

网友评论

      本文标题:关于javascript的浅拷贝和深拷贝

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