阅读 1342

JS 深拷贝与浅拷贝

其实在工作写代码和面试中,会经常碰到这两个概念:深拷贝,浅拷贝。但今天的重点是深拷贝。

下面我将简单介绍下什么是深拷贝,浅拷贝?

浅拷贝就是直接将一个Object对象所有的属性和属性值复制给另一个Object对象。这样导致的后果是,新对象和老对象相同的Object类型的属性值在内存中的指向是一样的,也就是新对象和老对象的Object类型的同一属性值指向的是同一块内存。因此修改新对象或者原对象,都会互相干扰。

深拷贝是将一个Object对象的内容完全拷贝一份给新对象。修改原对象的属性或者属性值,都不会影响新对象。原对象和新对象是完全独立的,互不影响。

然后补充一点,直接赋值

直接赋值,如果针对的是基本类型,那么就是简单的赋值。如果针对的是Object类型,那就是将原Object对象的地址赋值给新对象,也就是说,原对象与新对象其实是一模一样的,一旦对(任何)属性或者(任何)属性值做修改,原对象和新对象都会互相影响。

今天的重点是深拷贝,浅拷贝没啥可讲的。 talk is cheap,show me the code!

上浅拷贝代码:

function shallowCopy(obj) {
    if (!(obj instanceof Object)) {
        return obj;
    }
    let newObj = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
复制代码

下面重点说说深拷贝

第一个方案是使用JSON.stringify将Object转化为Json字符串,然后在用JSON.parse将json字符串转为Object对象。我们来测试下:

let obj1 = {
    "name": "Umbrella", "sex": "man",
    "brothers": {
        "Umbrella001": 22, "Umbrella002": 23
    }
};
let obj2 = obj1;                    //直接赋值
let obj22 = shallowCopy(obj1);      //浅拷贝
obj2.name = "Umbrella1024";
console.log(obj1);
console.log(obj22);

let obj3 = JSON.parse(JSON.stringify(obj1));
console.log(obj3);
obj1.sex = "boy";
console.log(obj3);

obj1.brothers['Umbrella001'] = 99;
console.log(obj22);
复制代码

下面是运行截图

我们可以看到:
1.直接赋值后,修改任何属性或者属性值,源对象和新对象会互相影响,改了obj2,obj1就随之改变了。
2.浅拷贝,修改了属性值为Object类型的,源对象和新对象才会互相影响。可以观察obj22和obj1的变化。
3.观察obj3和obj1,可以知道利用JSON.stringify、JSON.parse实现的深拷贝,是可以实现深拷贝的。

我们再给对象加多点属性,比如加个函数。

let obj4 = {
    "name": "Umbrella",
    "sex": "man",
    "introduce": function () {
        console.log("My name is " + this.name);
    }
};

obj4.introduce();

let obj5 = JSON.parse(JSON.stringify(obj4));
console.log(obj5);
obj5.introduce();
复制代码

运行截图:

可以看到采用这种方法,只可以将对象的非Function属性拷贝出来。所以通过JSON.parse和JSON.stringify实现的深拷贝不完美。

那么我分享下我自己写的一个对象深拷贝的方法,这就是我个人比较常用的方案了。

function deepCopy(obj) {
    if (obj instanceof Object) {
        let newObj = {};
        if (Array.isArray(obj)) {
            let arr = [];
            obj.forEach(item => {
                arr.push(deepCopy(item));
            })
            return arr;
        } else if (typeof obj == 'function') {
            newObj = obj.bind(newObj);
        } else {
            for (let key in obj) {
                let value = obj[key];
                if (typeof value == 'function') {
                    newObj[key] = value.bind(newObj);
                } else if (typeof value == 'object') {
                    if (Array.isArray(value)) {
                        newObj[key] = [];
                        value.forEach(item => {
                            newObj[key].push(deepCopy(item));
                        })
                    } else {
                        newObj[key] = deepCopy(value);
                    }
                } else {
                    newObj[key] = value;
                }
            }
        }
        return newObj;
    } else {
        return obj;
    }
}
复制代码

可以看到,我写的这个方法中,对属性值为function的做了处理。

我们来对这个deepCopy做测试,看是否是满足需求,可用的。

let obj88 = {
    "name": "obj88",
    "sex": "man",
    "introduce": function () {
        console.log("My name is " + this.name);
    }
}

let obj8 = {
    "name": "Umbrella",
    "sex": "man",
    "introduce": function () {
        console.log("My name is " + this.name);
    },
    "brothers": [obj88]
};

console.log(obj8);

let obj9 = deepCopy(obj8);              //深拷贝
obj9.name = "Flex";

console.log(obj8);
console.log(obj9);

obj88.name = "obj88 Plus";
obj9.introduce();
obj9.brothers[0].introduce();
复制代码

运行结果:

可以看到,我们的deepCopy函数是能够实现深拷贝的,并且也兼容了属性值类型为function的处理,也是可以拷贝的。

如有错漏,欢迎大佬们拍砖~

文章分类
前端
文章标签