js深拷贝与浅拷贝

什么是拷贝?

简单来说、从字面理解就是复制;
浅拷贝:好比是一个苹果,我通过镜子有映射出来一个苹果,苹果本身发生了改变,映射的苹果也跟着发生改变
深拷贝:你通过我这个苹果培养一个全新的苹果;有着一样的外观;一样的果肉;我这个苹果发生改变不会影响你的苹果;

深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用,
1)深复制在计算机中开辟了一块内存地址用于存放复制的对象,
2)而浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变。

简单的浅拷贝

var obj1 = { a: 10, b: 20, c: 30 };
//这里的obj1是个引用类型的值 会保存在计算机堆(heap)内存中
var obj2 = obj1;
//这里其实复制的其实是obj1在计算机堆(heap)内存中保存的一个引用地址
obj1.b = 100;
console.log(obj1);  //{ a: 10, b: 100, c: 30 };
console.log(obj2);  //{ a: 10, b: 100, c: 30 };

//高级写法
function cloneShallow(source) {
    var target = {};
    for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 测试用例
var a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    },
    a1: undefined,
    a2: null,
    a3: 123
}
var b = cloneShallow(a);

a.name = "高级前端进阶";
a.book.price = "55";

console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '55' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

简单深拷贝

function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === 'object') {
                target[key] = cloneDeep1(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep1(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' }, 
//   a1: undefined,
//   a2: {},
//   a3: 123
// }

关于堆和栈的理解点这里
call和apply的区别
原文地址

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、对象拷贝有两种方式:浅复制和深复制。顾名思义,浅复制,并不拷贝对象本身,仅仅是拷贝指向对象的指针;深复制是直接...
    滴答大阅读 895评论 0 2
  • 【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法
    Volcaner阅读 1,100评论 1 1
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,837评论 1 32
  • 看过《大鱼海棠》,那你看过《大鱼》吗? 《大鱼》里讲述了一对父子的故事,父亲总是将他的人生经历赋予奇幻色彩,来通过...
    知鱼君阅读 251评论 0 0
  • 感恩三天的学习中遇到的每一个家人。在与你们的相处中我学到了很多知识,感恩有你们的陪伴,感恩与你们的相逢。 感恩父母...
    语晗阅读 272评论 0 0

友情链接更多精彩内容