博客

深度克隆是面试高频问题，他背后涵盖了很多js的知识点，为了强化记忆在这里总结一下

1.浅度克隆

function shallowClone(o) {
  const obj = {};
  for ( let i in o) {
    obj[i] = o[i];
  }
  return obj;
}
const oldObj = {
  a: 1,
  b: [ 'e', 'f', 'g' ],
  c: { h: { i: 2 } }
};

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

我们知道，在js中每个数据都需要一个内存空间，内存空间又被分为两种，栈内存和堆内存。栈内存遵循先进后出的原则，堆内存的访问则是从栈中获取了该对象的地址引用，然后再从堆内存中获取我们需要的数据。

在上面的代码中

oldobj

虽然被克隆了但只被克隆了最外面的一层，还是与

oldobj.c.h

相等，说明他们依然指向同一段堆内存，也就是说如果改变了

newobj.c.h

，之前的oldobj也会被改变。

深度克隆

function type(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}

function clone(target) {
    var result;
    var targetType = type(target);
    if (targetType === 'Object') {
        result = {};
    } else if (targetType === 'Array') {
        result = [];
    } else {
        return target;
    }
    for (var i in target) {
        var value = target[i];
        if (type(value) === 'Object' || type(value) === 'Array') {
            result[i] = clone(value);
        } else {
            result[i] = value;
        }
    }
    return result;
}

在进行深度克隆的时候要对目标进行数据类型的检测，不同的数据类型有不同的检测方法，所以先创建一个检测数据类型的函数

type()

，把要检测的目标传进去，调用对象原型上的

toString

方法检测，使用

call

改变

this

的指向，同时截取第8位到倒数第一位，得到完整的数据类型的一个字符串，并返回。

然后就是进行深度克隆，创建深度克隆的函数

clong()

，定义一个结果，用于存储克隆之后的数据，接着就开始检测需要进行克隆的数据类型，如果数据类型检测出来是需要克隆一个对象，最终要返回的就是一个对象，相同的如果是要克隆一个数组，最终返回的结果就是一个数组。如果不是数组，也不是对象，那么就只能是基本数据类型或者一个函数，直接返回需要克隆的数据就行了，它不需要进行深度克隆。再遍历目标数据，将每一项单独拿出来进行判断，如果目标数据中的某一项是对象或者数组就使用递归，将这一项继续调用本函数，进行后续判断，如果是基本数据类型或者一个函数，放回目标数据的i位置即可。