js中的深度克隆的简单实现

引子：

js中的深浅拷贝一直是一个热门的话题，简单来说，拷贝就是通过一些方法产生与被拷贝数据（几乎）完全一样的数据。在js中，拷贝可以分为深拷贝（深度克隆）和浅拷贝两种。
浅拷贝：对拷贝后的数据进行修改会影响原数据的一种拷贝方式。
深拷贝（深度克隆）：对拷贝后的数据进行修改不会影响原数据的一种拷贝方式。
按照一般的理解来说通过拷贝得到的数据无论如何被修改应该也不会影响原数据呀，比如我们日常生活中使用的复制粘贴，一般情况下，我们没见过谁修改一个复制得到的word文档导致原文档也发生了修改呀！这就得从js的内存空间说起。

js内存空间的补充：

js中的内存空间由常量池、栈和堆组成，其中堆用来存放引用类型的数据，像数组、对象这些都属于引用类型的数据。一个对象在内存空间中的存放形式为：将对象的名称和引用存放在栈空间，该引用指向堆空间中的该对象，数组同理。
而我们都知道通过赋值运算等方法产生一个拷贝对象，拿到的其实还是原对象，因为我们复制的仅仅是该对象的引用，修改新的对象，原对象的内容也会发送改变，因为原对象和新对象的引用一样，所以深浅拷贝问题就诞生了。

实现拷贝的方式

那么说完了什么是深度拷贝和浅拷贝以及它们产生的原因，接下来要说的就是在js中实现深拷贝和浅拷贝的方法分别有哪些。我们先来看几种常见的拷贝方式：
1. 直接赋值
这是最常见的一种拷贝方式，它把要拷贝的数据通过“=”运算符将其赋值给另一个变量，从而得到一个拷贝数据，代码如下：

let arr1 = [1, 2, 3]
let arr2 = arr1
arr2[1] = 'a'
console.log(arr1, arr2) // [1, "a", 3]  [1, "a", 3] 

由此可见为浅拷贝，因为arr1的值随着arr2的改变而被改变了。
2. Object.assgin():
Object.assign()是ES6新增的方法，主要的用途是用来合并多个JavaScript的对象。Object.assign()接口可以接收多个参数，第一个参数是目标对象，后面的都是源对象，assign方法将多个源对象的属性和方法都合并到了目标对象上面，如果在这个过程中出现同名的属性（方法），后合并的属性（方法）会覆盖之前的同名属性（方法）。

let arr1 = [1, 2, 3]
let arr2 = Object.assign(arr1)
arr2[0] = 5
console.log(arr1) // [5, 2, 3]
console.log(arr2) // [5, 2, 3]

由此可见通过Object.assign()产生的拷贝都是浅拷贝，理由与第一点类似。
3. Array.prototype.concat()：
该方法是利用Array原型链上的concat方法进行实现，concat方法进行数组的合并返回一个新数组，如果我们传入的是一个空数组（即用原数组与空数组合并），那么显而易见返回的数组就是拷贝得到的数组，下面是代码：

let arr1 = [1, 2, {username: 'Wayne'}]
let arr2 = arr1.concat()
arr2[0] = 5
arr2[2].username = 'Jack'
console.log(arr1) // [1, 2, {username: 'Jack'}]
console.log(arr2) // [1, 5, {username: 'Jack'}]

虽然我们修改arr2中的下标为0的项，arr1并没有受到影响，但是当我们修改arr2[2]时，因为arr2[2]是一个对象，arr1数组保存的只是它的引用，在进行拷贝时，arr2把arr1[2]的引用给拷贝了过来，当我们进行修改时实际上还是在修改同一个引用指向的对象的内容，所以原数组(arr1)的数据还是随着拷贝得到的数组(arr2)中的数据的变化而发生变化。因此它也是浅拷贝。
4. Array.prototype.slice()：
该拷贝方法是通过slice()截取数组进行实现，与concat方法类似，下面是代码：

let arr1 = [1, 2, {username: 'Wayne'}]
let arr2 = arr1.slice()
arr2[0] = 5
arr2[2].username = 'Jack'
console.log(arr1) // [1, 2, {username: 'Jack'}]
console.log(arr2) // [1, 5, {username: 'Jack'}]

由此可见它也是浅拷贝，理由同第三点的Array.prototype.slice()
5. JQuery中的$.extend()：
使用形式为：$.extend( deep, [], obj)
deep表示是否深拷贝，为true为深拷贝，反之则为浅拷贝，obj表示被拷贝的对象。代码如下：

// 得先引入Jquery包
let arr1 = [1, 2, {username: 'Wayne'}]
let arr2 = $.extend(true, [], arr1)
arr2[0] = 5
arr2[2].username = 'Jack'
console.log(arr1) // [1, 2, {username: 'Wayne'}]
console.log(arr2) // [5, 2, {username: 'Jack'}]，arr2的改变没有影响arr1

所以它也可以实现深度克隆，但是得先引入JQuery，在我们不使用jQuery进行开发时比较浪费空间，会使得项目变大。
6. JSON.parse(JSON.stringify(data))：
这种方法也可以实现深度克隆，我们先将要拷贝的对象或数组传入JSON.stringify()中，此时得到了一个JSON字符串，我们把一个引用类型的数据变成了基本的字符串类型，假设此时的这个JSON字符串就叫str吧，那么再将str传入JSON.parse()中，此时str被变成了一个普通的js对象（或数组），所以会得到一个新的对象（或数组）。此数组是由字符串str新产生的，与原对象（或）数组自然没有关系，因此能实现深度克隆。下面是代码：

let arr1 = [1, 2, {username: 'Wayne'}]
let arr2 = JSON.parse(JSON.stringify(arr1)) // 深度拷贝：js对象->JSON字符串->新js对象
arr2[0] = 5
arr2[2].username = 'Jack'
console.log(arr1) // [1, 2, {username: 'Wayne'}]
console.log(arr2) // [5, 2, {username: 'Jack'}]

我们可以看到，当我们修改arr2[2]的内容时，arr1[2]的内容不会发生改变，同时，当我们修改arr2中其他内容时，arr1也不会发生变化，所以是深度拷贝。

实现一个深度克隆

说了这么多，下面该到实践环节了，我们将要自己实现一个深度克隆，那么应该先想好思路。其实思路很简单：
1.判断被拷贝对象的类型
2.根据类型生成空对象或空数组，其他基本数据类型直接返回即可
3.调用for in方法对被拷贝对象（数组）进行遍历，往新对象（数组）中添加数据，如果是基本数据类型，则直接将其添加到新数组（对象）中，否则深度克隆该数据，这样子进行递归即可。

下面我们要考虑一个问题：怎么判断被拷贝数据的类型？
假设被拷贝数据叫做obj，一般来说，我们会想到type of，obj.toString()等方法，其实最好的方法是Object.prototype.toString.call(obj)。为什么呢因为type of 无法判断obj是否为数组，而obj.toString()有问题呢？其实产生实例对象时，Object.prototype中的toString方法是确实被继承下来了，但是很多东西总不会一成不变，作为儿子的数组重写了toString方法，所以直接调用数组对象上面的toString方法调用到的实际是重写后的方法，并不是Object.prototype中的toString方法。所以应该使用Object的原型上的方法Object.prototype.toString.call(obj)

好了，扯了这么多，开始写代码了：

        function checkType(data) { // 用来判断被拷贝对象数据类型的函数
            return Object.prototype.toString.call(data).slice(8, -1)
        }
        function deepClone(target) { // 实现深度拷贝的函数
            let result, targetType = checkType(target)
            if (targetType === 'Object') { // 只有对象和数组才进行深度拷贝
                result = {}
            } else if (targetType === 'Array') {
                result = []
            } else {
                return target
            }
            for (let i in target) { // i为对象的key或数组的下标
                let value = target[i]
                let valueType = checkType(value)
                if (valueType === 'Object' || valueType === 'Array') {
                    result[i] = deepClone(value) // 当拷贝的对象中还有数组或是对象时进行递归，克隆它们中的内容，直到递归完所有数组或对象为止
                } else {
                    result[i] = value
                }
            }
            return result // 返回最终的结果
        }
        // 测试部分
        let arr1 = [1, 2, {username: 'Wayne'}]
        arr2 = deepClone(arr1)
        arr2[2].username = 'Jack'
        console.log(arr1) // [1, 2, {username: 'Wayne'}]
        console.log(arr2) // [1, 2, {username: 'Jack'}]

        let obj1 = {
            username: 'Wayne',
            arr: ['teacher']
        }
        let obj2 = deepClone(obj1)
        obj2.arr[0] = 'student'
        console.log(obj1) // {username: 'Wayne', arr: ['teacher']}
        console.log(obj2) // {username: 'Wayne', arr: ['student']}

小结：

浅拷贝：对拷贝后的数据进行修改会影响原数据的一种拷贝方式。
深拷贝（深度克隆）：对拷贝后的数据进行修改不会影响原数据的一种拷贝方式。

js中的深度克隆是非常重要的一个东西，在实际项目中也会使用到，例如：后台返回了一堆数据，我们需要对这堆数据做操作，但是很多情况下我们并不知道这堆数据是否有其它功能也需要使用，直接修改可能会造成一些难以发现的问题，深拷贝能帮我们更安全安心的去操作数据，使得数据使用起来更加安全。

实现深度克隆常见方法：
1.JSON.parse(JSON.stringify(data))
2.$.extend(deep, [], obj)
3.自己手写进行实现