js深度拷贝(克隆)与浅度拷贝(克隆)原理及应用

如果你想真正自己理解和运用深度克隆的话,首先必须要了解的就是js中的原始值和应用值,以及它们的储存位置及方式。这里简单的说一下,原始值呢是存储在栈里的,而且存储的是变量的实际值。引用值存储在堆里,且存储的是一个指针,该指针指向内存中的某个位置,该位置存储变量的实际值。

浅度拷贝

var a = 2 ;
var a_copy = a ;
a_copy  = 3;
console.log(a);

var arr = [1,2,3,4];
var arr_copy = arr ;
arr_copy.push(5);
console.log(arr);

var obj = {
    name:'sunshine',
    age:18
};
var obj_copy = obj ;
obj_copy.name = '过客';
console.log(obj.name);

最终输出结果如下:

可以看出当复制引用值(数组、对象)时,修改复制后的变量,原来的变量也跟着变了,原因就是当引用值复制时复制的是指针,所以修改它们的变量时指针没有改变,而是指针指向的值变了,所以指向同一指针的原变量也就变了,不过在有一种情况下,修改复制后的变量,被复制的变量不会跟着改变,那就是复制后,给复制变量重新定义值得时候,原来的变量不会受影响,因为此时已经给复制后的变量重新分配指针了。

var arr = [1,2,3,4];
var arr_copy = arr ;
arr_copy = [1,2,3,4,5];
console.log(arr);
console.log(arr_copy);

var obj = {
    name:'sunshine',
    age:18
};
var obj_copy = obj ;
obj_copy = {
    name:'过客',
    age:18
};
console.log(obj.name);
console.log(obj_copy.name);

最终输出结果如下:

深度拷贝

有点麻烦但是通用的方法prototype判断变量的类型,由于函数具有不可遍历性,所以尽管函数也是引用值,我们也可以按照浅度的方法复制即可。

var userInfo = {
    name : 'sunshine',
    sex:'女',
    age:18,
    hobbies:['抽烟','喝酒','烫头'],
    job:{
        addr:'深圳',
        position:'前端',
        salary: 'low'
    }
}

function getType(obj){
    if(Object.prototype.toString.call(obj)=='[object Object]'){
        return 'Object';
    }else if(Object.prototype.toString.call(obj)=='[object Array]'){
        return 'Array';
    }else{
        return 'nomal';
    }
}

function deepCopy(obj) {
    if (getType(obj)=='nomal') {
        return obj ;
    }else{
        var newObj = getType(obj)=='Object'?{}:[];
        for(var key in obj){
            if(obj.hasOwnProperty(key)){
                newObj[key] = deepCopy(obj[key]) ;
            }
        }
    }
    return newObj;
}
var newInfo = deepCopy(userInfo) ;
newInfo.name = '过客。。。。';
console.log(newInfo);
console.log(userInfo);

最终结果输出如下:

这里用到.hasOwnProperty是为了避免在拷贝有继承时拷贝到继承自对象中的值(也就是a继承b,使用.hasOwnProperty就是为了只拷贝a中的变量,过滤继承自b中的变量。)

*浅拷贝是拷贝一层,深层次的对象级别的就拷贝引用;深拷贝是拷贝多层,每一级别的数据都会拷贝出来;

 

发布了4 篇原创文章 · 获赞 2 · 访问量 848
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览