javascript中的深拷贝和浅拷贝

深拷贝和浅拷贝

浅度拷贝：
复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。

深度拷贝:
重新开辟一个内存空间，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

javaScript的变量类型

基本类型：
变量是直接按值存放的，存放在栈内存中的简单数据段，可以直接访问。

引用类型：
存放在堆内存中的对象，变量保存的是一个指针，这个指针指向另一个位置。当需要访问引用类型的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

实现浅拷贝

简单的引用复制

    function shallowClone(copyObj) {
        let obj = {};
        for ( let i in copyObj) {
            obj[i] = copyObj[i];
        }
        return obj;
    }
    let x = {
        a: 1,
        b: { f: { g: 1 } },
        c: [ 1, 2, 3 ]
    };
    let y = shallowClone(x);
    console.log(y.b.f === x.b.f); // true

Object.assign()方法

一级属性不受影响

    let sourceObj = {
        a: 1,
        c: {
            cc: 2
        }
    };

    let copyObj = Object.assign({}, sourceObj);
    sourceObj.a = 2;
    console.log(copyObj); // {a: 1, c: {cc: 2}}
    console.log(sourceObj); // {a: 2, c: {cc: 2}}

二级属性还是没能拷贝成功

    let sourceObj = {
        a: 1,
        c: {
            cc: 2
        }
    };

    let copyObj = Object.assign({}, sourceObj);
    sourceObj.c.cc = 3;
    console.log(copyObj); // {a: 1, c: {cc: 3}}
    console.log(sourceObj); // {a: 1, c: {cc: 3}}

concat与slice方法同Object.assign()方法
第一层的属性确实深拷贝，拥有了独立的内存，但更深的属性却仍然公用了地址，所以才会造成上面的问题。

    let a = [1,2,3,4];
    b = a.slice();
    a[0] = 2;
    console.log(a, b); // [2,2,3,4] [1,2,3,4]

    let a = [0,1,[2,3],4];
    b = a.slice();
    a[0] = 1;
    a[2][0] = 1;
    console.log(a, b); // [1,1,[1,3],4] [0,1,[1,3],4]

这里引用知乎问答里面的一张图

image

实现深拷贝

封装一个深拷贝的函数

    (function ($) {
        'use strict';
    
        var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');
    
        function type () {
           return Object.prototype.toString.call(this).slice(8, -1);
        }
    
        for (var i = types.length; i--;) {
            $['is' + types[i]] = (function (self) {
                return function (elem) {
                   return type.call(elem) === self;
                };
            })(types[i]);
        }
    
        return $;
    })(window.$ || (window.$ = {}));//类型判断
    
    function copy (obj,deep) { 
        if ($.isFunction(obj)) {
            return new Function("return " + obj.toString())();
        } else if (obj === null || (typeof obj !== "object")) { 
            return obj; 
        } else {
            var name, target = $.isArray(obj) ? [] : {}, value; 
    
            for (name in obj) { 
                value = obj[name]; 
    
                if (value === obj) {
                    continue;
                }
    
                if (deep) {
                    if ($.isArray(value) || $.isObject(value)) {
                        target[name] = copy(value,deep);
                    } else if ($.isFunction(value)) {
                        target[name] = new Function("return " + value.toString())();
                    } else {
                        target[name] = value;
                    } 
                } else {
                    target[name] = value;
                } 
            } 
            return target;
        }　        
    }
    let arr = [1,2,[3,4,5]];
    let copyArr = copy(arr, true);
    arr[2][0] = 2;
    console.log(copyArr); // [1,2,[3,4,5]]

借用JSON对象的parse和stringify

let arr = [1,2,[3,4,5]];
let _obj = JSON.parse(JSON.stringify(arr));
arr[2][1] = 3;
console.log(_obj); // [1,2,[3,4,5]]