js 中的深拷贝与浅拷贝

在面试中经常会问到js的深拷贝和浅拷贝，也常常让我们手写，下面我们彻底搞懂js的深拷贝与浅拷贝。

在js中 Array 和 Object  这种引用类型的值，当把一个变量赋值给另一个变量时，这个值得副本其实是一个指针，这是两个变量的指针指向的是同一片推内存，当我们改变其中一个值的时候，另一个值也会受到影响。

那么这就分为两种情况，浅拷贝和深拷贝

浅拷贝：拷贝对象的引用

// 对象
var obj1 = {
    a: 1,
    b: 2
};
var obj2 = obj1;

obj2.a = 3;

console.log(obj1); // {a: 3, b； 2}
console.log(obj2); // {a: 3, b: 2}

// 数组
var arr1 = [1, 2, 3];
var arr2 = arr1;

arr2.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3 ,4]

可以看出，拷贝的是一个对象的引用，常用的方法有 jQuery 的extend({}, obj) 或者 Array.prototype.slice() 和 Array.prototype.concat() 都会返回一个数组或者对象的浅拷贝

var arr1 = ['a', {a: 1}];
var arr2 = arr1.slice();

console.log(arr1 === arr2); // false

arr2[0] = 'b';
console.log(arr1); // ['a', {a: 1}] 基本类型的值不会相互影响

arr2[1].a = 2;
console.log(arr1); // ['a', {a: 2}] 引用类型的值还是无法拷贝

为了加深印象，我们可以手动实现一个slice 或者jq 的extend({}, obj)

function shallowClone(source) {
    if (!source || typeof source !== 'object') {
        throw new Error('error');
    }
    var resultObj = source.constructor === Array ? [] : {};
    for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
            resultObj[keys] = source[keys];
        }
    }
    return resultObj;
}

var obj1 = {a: 1, b: [1, 2]}
var obj2 = shallowClone(obj1);

obj2.a = 2;
console.log(obj1); // {a: 1, b: [1, 2]}

obj2.b.push(3)
console.log(obj1); // {a: 1, b: [1, 2, 3]} 

深拷贝：拷贝对象的实例

深拷贝就是拷贝出一个新的实例，新的实例与原来的实例互不影响，实现深拷贝的方法有几种：

1、使用jq 的第三个参数来递归调用 $.extend(true, obj, ...)，或者是lodash等第三方库函数实现

2、自己实现一个深拷贝，自己实现也有两种方法，一种是使用递归的方式拷贝，另一种是JSON.parse和JSON.stringfy

// 递归实现深拷贝
function deepClone(source) {
    if (!source || typeof source !== 'object') {
        throw new Error('error');
    }
    var resultObj = source.constructor === Array ? [] : {};
    for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
            if (source[keys] && typeof source[keys] === 'object') {
                resultObj[keys] = source[keys].constructor === Array ? [] : {};
                resultObj[keys] = deepClone(source[keys]);
            }
            else {
                resultObj[keys] = source[keys];
            }
        }
    }
    return resultObj;
}

var a1 = {
    a: 1,
    b: [1, 2],
    c: {
        a: 1,
        b: 2
    }
};

var a2 = deepClone(a1);
a2.b.push(3)

console.log(a1); // {a: 1, b: [1, 2], c: {a: 1, b: 2}}
console.log(a2); // {a: 1, b: [1, 2, 3], c: {a: 1, b: 2}}