美文网首页
浅克隆、深克隆

浅克隆、深克隆

作者: 你期待的花开 | 来源:发表于2017-05-11 17:18 被阅读35次

说克隆之前,首先要说一下,js的数据类型

js中的数据类型分为两大类:原始类型和对象类型。
1)原始类型包括:数值、字符串、布尔值、null、undefined
2)对象类型包括:函数、数组

原始类型存储的是对象的实际数据,而对象类型存储的是对象的引用地址。

克隆的概念

浅度克隆

原始类型为值传递,对象类型仍为引用传递。把一个对象里面的东西复制到另一个对象,新对象原始类型值的修改不会影响到原对象,新对象的对象类型的修改会影响到原对象。

深度克隆

所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。也就是把一个对象里面的东西一模一样地复制到另一个对象,并且这两个对象分别放在内存的不同地方。

浅克隆

    var obj = {
        name: '张三',
        age: 20,
        sex: 'female',
        address: {
            province: 'beijing'
        },
        favorite: ['red', 'pink']
    };
    var obj1 = {};
    function clone(orgin, target) {
        var target = target || {};
        for (prop in orgin) {
            target[prop] = orgin[prop];
        }
    }
    clone(obj, obj1);
    console.log(obj.address.province);
    obj1.address.province="shenzhen";
    console.log(obj.address.province);
结果

对象类型存储的是对象的引用地址,并不是真实的值,所以当新对象更改时会影响到原对象,在上面的例子中将obj1的address的province属性设置为“shenzhen”,原对象对应的部分也被改变了。

深克隆

为了保证所有的属性都被复制到,我们需要for循环遍历对象,判断是否为原始类型,如果不是继续进行递归,直到得到的元素为原始类型或者函数类型。

    var obj = {
            name: '张三',
            age: 20,
            sex: 'female',
            address: {
                province: 'beijing'
            },
            favorite: ['red', 'pink']
        };
        var obj1 = {};
        function deepClone(orgin, target) {
            var target = target || {};
            var tostr = Object.prototype.toString;
            var arrstr = "[object Array]";
            for (var prop in orgin) {
                if (orgin.hasOwnProperty(prop)) {
                    if (orgin[prop] !== "null" && typeof (orgin[prop]) == 'object') {
                        if (tostr.call(orgin[prop]) == arrstr) {
                            target[prop] = [];
                        } else {
                            target[prop] = {};
                        }
                        deepClone(orgin[prop], target[prop]);
                    } else {
                        target[prop] = orgin[prop];
                    }
                }
            }
            return target;
        }
       //深度克隆一个对象
        deepClone(obj, obj1);
        console.log(obj.address.province);
        obj1.address.province = "shenzhen";
        console.log(obj.address.province);
结果

相关文章

网友评论

      本文标题:浅克隆、深克隆

      本文链接:https://www.haomeiwen.com/subject/ekpotxtx.html