深拷贝与浅拷贝

一.引用类型与值类型

我们都知道，js有两种基本类型，引用类型与值类型。引用类型的“=”只是拷贝了引用，而基本类型则是拷贝了值。

值类型：数值、布尔值、null、undefined。
引用类型：对象、数组、函数。

一个简单的例子

var a=[1,2,3];
var b=a;
var c=5;
var d=c;

拷贝

如果a的数组值变了的话，b也会跟着变，有的时候这不是我们想要的。

二.从数组讲起

默认的数组赋值是浅拷贝，那么怎么实现深拷贝呢？

1.先来考虑一维数组，方法很多。

var a=[1,2,3];
//第一种，slice会返回一个数组拷贝，其他截取函数也可以，除了splice
var b=a.slice(0);
//第二种
a.forEach((one,i)=>{b[i]=one});
//第三种,es6的扩展运算符
var b=[...a]

2.多维数组

为了通用，直接给Array增加原型方法

Array.prototype.deepCopy = function() {
        var temp = [];
        this.forEach((one)=>{
        //如果子项是数组就调用deepCopy
        temp.push(one instanceof Array?one.deepCopy:one);
        })        
        return temp;
    };

三.扩展

数组中不止会有数组，通常还会有Object，对象数组是很常见的，所以干脆直接把deepCopy增加到Object上

Object.prototype.deepCopy = function() {
        var temp = this instanceof Array ? [] : {};//如果是数组，初始化为[],否则初始化维{}
        for (var i in this) {//Object的遍历，数组和对象通用
            if (this.hasOwnProperty(i)) {//保证只复制自带的属性
               //遇到基本值类型，直接复制，否则继续深拷贝               
                temp[i] = typeof(this[i]) === 'object' ? this[i].deepCopy() : this[i];
            }
        }
        return temp;
    };

测试一下，没问题

var a = [{ a: 's' },[1]];
var m = { s: 'h', d: { a: 's' } };
var c = m.deepCopy();
var b = a.deepCopy();
a[0].a = 'm';
a[1][0] = 'm';
m.d.a = 'k';
console.log(a, b, m, c);