JavaScript的浅拷贝 VS 深拷贝

2024年5月3日 129次阅读 来源: nanaistaken

我们常常会用到拷贝对象的功能，而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面：

1: 浅拷贝和深拷贝的区别
2: 浅拷贝和深拷贝的具体实现

拷贝，我们常常用在把A对象的属性copy到B对象，这样B对象就拥有了A对象的属性。当B对象的属性不是基本数据类型，而是数组或者对象的时候，就会出现浅拷贝和深拷贝的区别，具体看下文的解释：

1: 什么是浅拷贝？
紧接上文，当B对象的属性是数组或者对象的时候，浅拷贝是通过使A对象的同名属性指向B对象的属性的内存地址，从而达到copy的目的。这样的做法会造成一个问题，当我们改变B对象这个属性时，A对象的这个属性也会被改变，因为它们是指向同一段内存地址的。

我们直接看例子：

function shallowCopy(origin, destination) {
    for (let i in origin) {
        if (origin.hasOwnProperty(i)) {
            destination[i] = origin[i];
        }
    }
    return destination;
}

let origin = {age: 20, name: {firstName: 'nana'}};
let destination = {};

let result = shallowCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(origin.name.firstName); // 'Lian'

上面就是一个浅拷贝的实现。我们可以看到，因为name属性是一个对象，由于浅拷贝的实现机制，当我们改变result的name属性之后，origin对象的name属性也被影响了，这种结果可能不是我们想看到的。那我们来看一下深拷贝是怎么做的：

2: 深拷贝的实现机制
和浅拷贝不同的是，当源对象的属性是一个对象或者数组时，深拷贝会为目标对象开辟一段新的内存地址，然后把源对象属性的值一一拷贝到目标对象，而不是直接使二者指向同一段内存地址。我们来看代码实现：

function deepCopy(origin, destination) {
    for(let i in origin){
        if(typeof origin[i] === 'object'){
            if(origin[i].constructor === 'Array'){
                destination[i] = [];
            }else{
                destination[i] = {};
            }
            deepCopy(origin[i], destination[i]);
        }else{
            destination[i] = origin[i];
        }
    }

    return destination;
}

let destination = {class: '1-1'};
let origin = {age: 22, name: {firstName: 'nana'}};
let result = deepCopy(origin, destination);
console.log(result.name.firstName); // 'nana'
result.name.firstName = 'Lian';
console.log(result.name.firstName); // 'Lian'
console.log(origin.name.firstName);// 'nana'

当我们使用深拷贝来拷贝属性为对象或者数组的对象时，当我们改变结果对象的属性值时，源对象的同名属性并不会因此而改变。

深拷贝看起来似乎很完美，但是当源对象层级很深的时候，却面临一个性能的问题。所以在实际的使用中，要根据自己的需求来选择是采用浅拷贝还是深拷贝。

    原文作者：nanaistaken
    原文地址: https://segmentfault.com/a/1190000020303028
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞