js深拷贝与浅拷贝

2019-01-24  本文已影响0人  chasing_dream

什么是拷贝?

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

深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用,
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的区别
原文地址

上一篇 下一篇

猜你喜欢

热点阅读