js笔记——克隆

浅克隆

• 例如：

 var obj = {
     name: "xiaoming",
     age: 18,
     card: ["visa", "master"]
 }

 function clone(origin, target) {
     var target = target || {};
     for (var prop in origin) {
         target[prop] = origin[prop];
     }
 }

 var obj1 = {};
 clone(obj, obj1);
 console.log(obj1);

运行结果：

• 虽然上面代码实现了两个对象的属性相同，但是如果改变obj1中的card属性（比如说push一个新元素），obj中的card属性也会跟着变化，这样的称为浅克隆。

深克隆

• 将一个对象里的所有属性完全复制给另一个对象，一个对象中属性改变不会引起另一个对象内容发生改变。
• 实现思路：

1. 遍历对象

   使用for in 循环遍历

2. 判断是不是原始值

   利用typeof操作符来判断

3. 判断是数组还是对象

   有三种方法(前面博客中有所介绍)，分别为：instanceof 、toString 、constructor，建议使用toString，因为其他两种方法在父子域中容易出现问题

4. 创建数组或对象，递归操作

• 代码实现

 var obj = {
     name: "xiaoming",
     age: 18,
     card: ["visa", "master"],
     wife: {
         name: "abc",
         son: {
             name: "aaa"
         }
     }
 }

 function deepClone(origin, target) {
     var target = target || {},
         toStr = Object.prototype.toString,
         arrStr = "[object Array]";
     for (var prop in origin) {
         // 排除原型链上属性
         if (origin.hasOwnProperty(prop)) {
             if (origin[prop] !== 'null' &&
                 typeof (origin[prop]) == 'object') {
                 target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};
                 deepClone(origin[prop], target[prop]);
             } else {
                 target[prop] = origin[prop];
             }
         }
     }
     return target;
 }
 var obj1 = {};
 deepClone(obj, obj1);
 console.log(obj1);

运行结果：