一次javascript深拷贝引发的深入思考

砖业洋__

发布于 2023-05-06 20:18:11

920

发布于 2023-05-06 20:18:11

A同学和B同学因为一次js深拷贝发生的一次争执。

A同学：深拷贝是另一个对象占用另一块内存就行了，随手写出了如下代码：

let a = {
    name: "lcy",
    age: 18
};
let b = Object.assign({}, a);
console.log(JSON.stringify(b, null, 2));
let c = {};
for (let key in a) {
    c[key] = a[key];
}
console.log(JSON.stringify(c, null, 2));
b.name = "123";
c.name = "456";
console.log(JSON.stringify(a, null, 2));
console.log(JSON.stringify(b, null, 2));
console.log(JSON.stringify(c, null, 2));

B同学：突然一看这两种方法好像确实都是深拷贝，b和c对象修改属性后对a对象没什么影响，但是也会面临其他问题，如下

let a = {
    name: "lcy",
    age: 18,
    user: {
        u: "uu_c"
    }
};
let b = Object.assign({}, a);

let c = {};
for (let key in a) {
    c[key] = a[key];
}

b.user.u = "123";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
console.log(JSON.stringify(c));
c.user.u = "456";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
console.log(JSON.stringify(c));

我们会发现，这种方式如果属性值是对象的话，那么这个对象是浅拷贝的，并么有完全深拷贝。

于是A同学灵机一动，迅速展示思维能力，随手就是一个代码~

let a = {
    name: "lcy",
    age: 18,
    user: {
        u: "uu_c"
    }
};

function deepClone(obj) {
    let res = {};
    for (let key in obj) {
        res[key] = typeof obj[key] == "object" ? 
            deepClone(obj[key]) : obj[key];
    }
    return res;
}

let b = deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
b.user.u = "123";
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

A同学拍拍胸脯，搞定，然后B同学问，万一你这个拷贝的源对象属性是它原型上的呢？我们可能并不需要原型上的属性

A同学：那就在for循环的时候加一个判断，if(obj.hasOwnProperty(key))就行了，其他代码不用动，这个可难不倒我。

B同学：你要不加个数组到a对象试试，如下

let a = {
    name: "lcy",
    age: 18,
    user: {
        u: "uu_c"
    },
    arr: [1, 3, 5]
};

function deepClone(obj) {
    let res = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            res[key] = typeof obj[key] == "object" ? 
                deepClone(obj[key]) : obj[key];
        }
    }
    return res;
}

let b = deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

这一下把A同学干懵了，居然数组还有这一情况，typeof 数组类型也是object，看来不能简单的判断object类型，于是A同学深思熟虑之后终于写出了如下代码

let a = {
    name: "lcy",
    age: 18,
    user: {
        u: "uu_c"
    },
    arr: [1, 3, 5]
};

function deepClone(obj) {
    let res = obj instanceof Array ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            res[key] = typeof obj[key] == "object" ? 
                deepClone(obj[key]) : obj[key];
        }
    }
    return res;
}

let b = deepClone(a);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));