深拷貝和淺拷貝

淺度拷貝：
復制一層對象的屬性瞳浦，并不包括對象里面的為引用類型的數(shù)據(jù)，當改變拷貝的對象里面的引用類型時废士，源對象也會改變叫潦。

深度拷貝:
重新開辟一個內存空間，需要遞歸拷貝對象里的引用官硝，直到子屬性都為基本類型矗蕊。兩個對象對應兩個不同的地址，修改一個對象的屬性氢架，不會改變另一個對象的屬性傻咖。

javaScript的變量類型

基本類型：
變量是直接按值存放的，存放在棧內存中的簡單數(shù)據(jù)段岖研，可以直接訪問没龙。

引用類型：
存放在堆內存中的對象，變量保存的是一個指針缎玫，這個指針指向另一個位置硬纤。當需要訪問引用類型的值時，首先從棧中獲得該對象的地址指針赃磨，然后再從堆內存中取得所需的數(shù)據(jù)筝家。

實現(xiàn)淺拷貝

簡單的引用復制

    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

實現(xiàn)深拷貝

封裝一個深拷貝的函數(shù)

    (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]]