JS 之 克隆人

开场

最近科学技术日新月异，各种技术百花齐放，我想总结一下 JS clone对象的方法和用法（哎，说了这么多跟我想表达--我长得帅，好像真没啥关系呀）。

ES6 +

1. Object.assign()
   作为新标准ES6 推出了Object.assign()这个方法，该方法能向目标对象拷贝一个或多个对象的自身的所有可枚举属性。具体的用法请点击上面MDN的链接，非常详细。
   例子：

let cloned = Object.assign({}, obj);  //new {a:1, b:2, c:3};

这里我对这个方法的用法说一点，就是在进行 deep clone （深度克隆）的时候可能需要变换方法，因为Object.assign()只是复制了属性的值，如果这个被复制对象的属性值是一个引用对象，那他将只会复制这个引用地址（ because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.），所以如果你改变了这个引用对象的值，那么原对象也会改变。不太明白？！别急，客官，小二！~~ 上代码~~~！

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3; // 敲黑板，重点在这
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

LOL，看来咱们之间，代码才是最好的沟通方式。

2....
什么是...呢，...就是 spread operator（扩展运算符），当然在这也不展开讲其运用（代替数组的apply，合并数组等），欲知详情点击上面的...。本文只关注其中的复制对象的功能。

let obj = {a:1, b:2, c:3}; //ES6
let cloned = {...obj}; //new {a:1, b:2, c:3};

注意：
1.Only for iterables(可迭代的)
扩展运算符(除了在扩展属性的情况下)只能应用于可迭代对象:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

2.基本用法和Object.assign()相同，也是只能进行 Shallow-cloning。但是有一点不同：Note that Object.assign()
triggers setters whereas spread syntax doesn't.（前者自动触发 stetters 方法，而后者不会。）

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

ES5

ES5 能用的直接方法就比较少了。

1. JSON.parse(JSON.stringify(obj)); 这个方法不会改变原对象，对象中如果有函数function则不能正确复制，也不能用于带有大量数据的obj,性能问题。

var obj = {a:1, b:2, c:3};
let cloned = JSON.parse(JSON.stringify(obj)); // 如果对象中有Function 直接被忽略 

2. 既然直接的方法比较少，那就自己写个能深度克隆所有obj的方法吧，来来来，上代码，我先干，各位随意。

        //深复制对象方法    
        var cloneObj = function (obj) {  
            var newObj = {};  
            // 判断是否为Array 还可以用 obj instanceof Array 不过首选 Array.isArray();
            if (Array.isArray(obj)) {   
                newObj = [];  
            } else if ( typeof obj === "function") { 
            // 在这加上function的判断，如果是function直接返回。
                return obj;
            }
            for (var key in obj) {  
                var val = obj[key];  
                //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; 
                //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。  
                newObj[key] = typeof val === 'object' ? cloneObj(val): val;       
            }  
            return newObj;  
        };  
        //测试    
        var obj = {a:function (){console.log(this.b.c);},b:{c:1}};//设置一个对象 
        newObj = cloneObj(obj);//复制对象 
        console.log(newObj) 
        newObj.b.c=2;//给新对象赋新值  
        obj.a(); //1，不受影响  
        newObj.a(); //2  
        var obj0 = [1, 3 ,4 ,[3,4]]; // 完美复制数组
        console.log(typeof obj0); // Array 的typeof 为object
        newObj0 = cloneObj(obj0);
        console.log(newObj0) // [1, 3 ,4 ,[3,4]];
        var obj00 = function hello() { console.log('world') } //  完美复制function
        var newObj00 = cloneObj(obj00); // 'world'
        newObj00.prototype.hello = "hello";
        var hhh = new newObj00();
        console.log(obj00.hello); // undefined
         console.log(hhh.hello); // 'hello'
        console.log(newObj00()) // 'world'

3. 只针对数组的方法：arrayObject.concat(arrayX,arrayX,......,arrayX)

        var a=[1,2,3];  
        var b=a;  
        var c=[].concat(a);  
        a.push(4);  
        console.log(b);  // b 就是a 
        console.log(c);  // c 只是c

克隆人

绝不标题党，下面我就给大家展示克隆人。

// 母体
var human = {
  sex: '',
  name:'',
  age: '',
  address:'',
  say: function () {
    console.log(`Hello, My name is ${this.name}, I'm a ${this.sex},  How are you ?`);
  },
  setPerson: function (sex,name,age,address) {
    this.sex = sex || this.sex ;
    this.name = name || this.name;
    this.age = age || this.age;
    this.address = address || this.address;
  },
  init: function (sex,name,age,address) {
    this.setPerson(...arguments);
    this.say();
  }
}

var wind = cloneObj(human) // 克隆 母体
wind.init('boy','wind','18','Earth');// 风生
var water= cloneObj(wind); // 克隆 风
water.init('girl','water'); // 水起

哈哈，在JS里，万物皆对象，知道了克隆对象的法门还怕克隆不了人？哼，笑话，你就说干啥我不能？！ 神马？！让我给你找个对象，咳咳，这个，这个嘛，哎呀，时间不早了，今天先聊到这里，下次有缘再见，再聊啦，我很忙的......ヘ(￣ω￣ヘ)

落幕

以上就是鄙人粗浅的总结，如果有好想法和方法，还请客官留言，不吝赐教。
感谢阅读~

参考链接：

How do I correctly clone a JavaScript object?
javascript中对象的深度克隆