关于克隆的那些事(未完)

前言

所谓深克隆就是创造一个完全一样的对象，将原对象的的所有元素拷贝过来即可。

浅克隆就是复制一份引用，所有引用指向同一份数据。

克隆，也有很多小伙伴叫复制或者拷贝，其实都是一个意思。首先，了解下JavaScript数据类型。

原始类型 undefined/null/number/string/boolean/symbol(es6新增类型)

对象（引用类型） object

克隆只针对对象、数组、函数等复杂数据。

原因：

栈：

优点：读取速度很快，仅次于寄存器；栈内存数据可以共享

缺点：栈内存大小和生存期必须是确定的，缺乏灵活性

基本变量（js的原始类型undefined,null,number,string,boolean）一般所占内存一半较小且大小固定，所以一般放在栈中，如果放在堆中可能查找耗时较多。

堆内存中的数组、函数、对象等，一方面可能较大，另一方面不确定大小，所以不能放在栈中，只能在堆里面，由栈内存中的句柄（指针）加以引用操作。

1.浅克隆

浅克隆是指对象只会被克隆最外部的一层（栈内存中的引用），赋给一个新的变量，至于更深层的对象，实际上仍旧是通过引用指向同一块堆内存，内容也相同，其中一个变化另一个内容也会变化。

// 被克隆对象
const oldObj = {
  a: 1,
  b: [ 'e', 'f', 'g' ],
  c: { h: { i: 2 } }
};
// 浅克隆函数
function shallowClone(o) {
  const obj = {};
  for ( let i in o) {
    obj[i] = o[i];
  }
  return obj;
}
const newObj = shallowClone(oldObj);
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // true

这段代码容易坑到新人，或者说理解不深的人。但是很明显虽然oldObj.c.h被克隆了,但是它还与oldObj.c.h相等,这表明他们依然指向同一段堆内存,这就造成了如果对newObj.c.h进行修改,也会影响oldObj.c.h。

1 2	newObj.c.h = "change"; console.log(newObj.c.h, oldObj.c.h);

当然有一个新的apiObject.assign()也可以实现浅复制,但是效果跟上面没有差别。

2.深克隆

深克隆就是创建一个新的空对象，开辟一块内存，然后将原对象中的数据全部复制过去，完全切断两个对象间的联系。

2.1 递归完成深度克隆

talk is cheap show me the code

function deepClone(arr){
    if(typeof arr != "object"){//判断元素是否是object
        return arr;
    }
    var result = {};//创建一个新的对象
    for(var i in arr){//遍历arr中所有的元素
        result[i] = deepClone(arr[i]);//递归判断是否是深层对象
    }
    return result;
}

test it

var arrOne = {
  name:"小明",
  age:"12",
  sister:{
    name:"小美",
    age:"10"
  }
}
var arrTwo = arrOne;
var arrThree = deepClone(arrOne);
arrOne.name = "小光";
arrOne.sister.name = "小雅";
console.log(arrTwo);
console.log(arrThree);

console

Object:
    name:"小明",
    age:"12",
    Object:
        name:"小美",
         age:"10"
Object:
    name:"小光",
    age:"12",
    Object:
        name:"小雅",
         age:"10"

这里可以看到在对原数组操作时，克隆返回的数组内容不会改变。两个数组是完全不同的两个对象，在堆内存中各占一块，没有关联。

2.2 JSON.parse方法

还是直接上代码，仍旧是上面这个例子

var arrOne = {
  name:"小明",
  age:"12",
  sister:{
    name:"小美",
    age:"10"
  }
}var arrTwo = arrOne;
var arrThree = JSON.parse(JSON.stringify(arrTwo));//重点在这呢！！！看我(｡･ω･)
arrOne.name = "小光";
arrOne.sister.name = "小雅";
console.log(arrTwo);
console.log(arrThree);

一行代码搞定深度克隆，我们这边先来看来原理，然后再来说说遇到的坑。

dash上是这样介绍这个api的

JSON.parse()

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

JSON.parse()这个api是解析一个json字符串，并描述这个字符串的JavaScript值或者对象。可以提供一个可选的reviver函数，以便在返回结果对象之前执行。

JSON.stringify()

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

JSON.stringify()这个api将JavaScript的值转换为json字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定replacer是一个数组，则可以选择仅包含指定的属性。

什么意思呢？就是将一个对象先解析为json对象，然后再解析成object对象。嗯，so easy~~变来变去顺道创建个对象完成复制。

下面再来看看以下几行代码（就是所谓的坑）

// 构造函数
function person(pname) {
  this.name = pname;
}

const Messi = new person('Messi');

// 函数
function say() {
  console.log('hi');
};

const oldObj = {
  a: say,
  b: new Array(1),
  c: new RegExp('ab+c', 'i'),
  d: Messi
};

const newObj = JSON.parse(JSON.stringify(oldObj));

// 无法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 无法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]

结论：

它无法实现对函数、RegExp等特殊对象的克隆

会抛弃对象的constructor，所有的构造函数会指向Object

对象有循环引用，会报错

2.3 构造一个深克隆函数

2.4 第三方库的实现

2.4.1 Underscore —— _.clone()

在 Underscore 中有这样一个方法：_.clone()，也是一种浅复制，所有嵌套的对象和数组都是直接复制引用而并没有进行深复制。For example

var x = {
    a: 1,
    b: { z: 0 }
};

var y = _.clone(x);

y === x       // false
y.b === x.b   // true

x.b.z = 100;
console.log(y.b.z);        // 100

下面来看看它的源码，参考 underscore.js #L1067

// Create a (shallow-cloned) duplicate of an object.
  _.clone = function(obj) {
    if (!_.isObject(obj)) return obj;
    return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
};

2.4.1 jQuery —— $.clone() / $.extend()

在jQuery中，千万不要混淆$.clone() 和$.extend()。$.clone()是DOM操作方法。而$.extend()才是js的深克隆。在jQuery中我们可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, ...),就可以实现了。

var x = {
    a: 1,
    b: { f: { g: 1 } },
    c: [ 1, 2, 3 ]
};

var y = $.extend({}, x),          //shallow copy
    z = $.extend(true, {}, x);    //deep copy

y.b.f === x.b.f       // true
z.b.f === x.b.f       // false

这边也可以看下源码， link

前言