克隆（也就是拷贝）是javascript中很重要也很常见的问题。克隆就是将一个对象里的属性、方法等复制到另一个对象中，且互不影响（即克隆之后，对一个对象进行改动，不会影响到另一对象）。我们今天就来讨论一下原生js中克隆的问题。
action~
现在有一个对象
我们现在想把obj里的每一个属性拷贝到一个空对象var obj1 = {}中，那么需要写一个克隆方法，首先遍历一下obj对象，然后把里面的每一个属性都拷贝过去。代码如下：
在控制台中查看obj1，会发现实现了对obj的拷贝。
我们再对这个方法进行一些完善：有可能用户在执行clone方法时，只传origin一个参数，然后将函数执行结果赋给对象obj1，所以我们需要在方法最下方加一个返回值target，返回克隆结果，相应的也要在函数体里声明var target = {}。
还有一种情况obj1对象里事先有其他属性，那么函数体里写var target = {}显然是不符合预期的，所以要完善成var target = target || {};确保万无一失。最终该方法完善为：
浅度克隆
下面对obj进行拷贝，且obj1本身有自己的属性，执行代码如下：
查看一下拷贝结果
完美拷贝了obj的所有属性，又保留了自身属性。
到这就结束了么？要知道js有六大数据类型（本文不讨论ES6新增的Symbol类型）：number，string，boolean，undefined，null，object。
其中number，string，boolean，undefined，null归为原始值一类，而object属于引用值，具体包括狭义的object，array，function。
下面往obj对象里加点引用值，用我们已经写出来的克隆方法试试：
貌似拷贝成功了
当我们对obj对象进行一波这样的操作：
再查看obj1会发现
在obj1里也多了美容卡和一个儿子，函数没受影响。
我们可以得出这样的结论：对于数组和对象，用上面那种克隆方法是不行的。因为对于数组和对象而言，拷贝的是地址，他们指向的都是同一个空间，通过一个对象在这个空间里面加了东西，另一个对象必然也会受到影响。
而对于函数而言，通过上面这种普通的赋值拷贝，就可以实现，且互不影响，因为函数的克隆会在内存中单独开辟一块空间。
我们管上面写的这种克隆方法叫浅度克隆，它可应用于不包含对象（狭义的）和数组的对象之间的拷贝。有点绕哈~
下面我们来解决一下狭义的对象和数组的拷贝问题，即我们需要另一种万全之策——深度克隆。
先来整理下思路：
1.遍历待拷贝的对象；
2.判断每个元素是不是原始值，若是，则通过浅度克隆的手段进行拷贝；
3.若是引用值，则需要继续判断是对象还是数组；
4.再分别建立空数组或对象用来盛放里面即将拷贝而来的属性值；
5.数组和对象里面的若是原始值，则浅拷贝即可实现，若还有引用值，则还需要重复进行上述一系列的判断。
上述每一步思路怎么用代码实现呢：
1.使用for in进行遍历。但需要注意的是，for in方法会把对象原型里的属性也一起遍历了，所以要与hasOwnProperty()方法进行联用，hasOwnProperty()方法可以判断某属性是不是该对象自己的属性，从而过滤掉原型中的属性。
2.用typeof()返回值来进行判断，数组和对象的typeof返回值是'object'。
3.判断对象还是数组有多种方法，举出常见的三种：分别是constructor、instanceof和toString()方法。这里最好用toString()方法，因为在有父子域之间拷贝的情况，constructor和instanceof这两种是不好用的。
4.就是[]和{}呗。
5.重复判断，自然想到递归。
深度克隆方法如下：
深度克隆
注意到origin[prop] !== null这句了么？为啥要加上它，因为typeof(null)也是'object'。
来试试吧，我们把obj变得复杂一点，给隔壁老王的老婆增加俩儿子：王小宝和王二宝。执行过程如下：
看看结果，没毛病。
对obj的引用值增加一些属性试试。
发现obj1纹丝不动，完美拷贝实现！
综上，克隆方法白话完了，实战开发中针对实际需要采取不同的克隆手段。有不足之处欢迎在评论区进行指正，感激不尽~向大神们学习！
网友评论