javascript深拷贝详解

深克隆与浅克隆的定义

深克隆

将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象

浅克隆

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，假如属性是引用类型，则拷贝的是内存地址。因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

浅克隆

let target = {};
let sources = {a:{b:2}};
Object.assign(target,sources);
target.a === sources.a

浅克隆.png

判断类型

typeof

bigint,undefined,function,object,number,boolean,symbol,string

instanceof

instanceof 用于判断一个变量是否属于某个对象的实例,原理是右边变量的prototype是否在左边变量的原型链上

Object.prototype.toString

15.2.4.2 Object.prototype.toString()
在toString方法被调用时,会执行下面的操作步骤:
1.如果this的值为undefined,则返回"[object Undefined]".
2.如果this的值为null,则返回"[object Null]".
3.让O成为调用ToObject(this)的结果.
4.如果O有[[NativeBrand]]内部属性,让tag成为表29中对应的值.
5.否则
1.让hasTag成为调用O的[[HasProperty]]内部方法后的结果,参数为@@toStringTag.
2.如果hasTag为false,则让tag为"Object".
3.否则,
1.让tag成为调用O的[[Get]]内部方法后的结果,参数为@@toStringTag.
2.如果tag是一个abrupt completion,则让tag成为NormalCompletion("???").
3.让tag成为tag.[[value]].
4.如果Type(tag)不是字符串,则让tag成为"???".
5.如果tag的值为"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp",或者"String"中的任一个,则让tag成为字符串"~"和tag当前的值连接后的结果.
6.返回三个字符串"[object ", tag, and "]"连接后的新字符串.

业务中常用的深拷贝

JSON.parse(JSON.stringify())
但是这种深拷贝并不能解决正则表达式，拷贝函数，循环引用等问题

测试用例

function Obj(){
    this.func = function(){
        alert(1)
    };
    this.obj = {a:1};
    this.arr = [1,2,3];
    this.und = undefined;
    this.reg = /123/;
    this.date = new Date(0);
    this.NaN = NaN;
    this.infinity = Infinity;
    this.sym = Symbol(1);
    this.set = new Set([1,2,3]);
    this.map = new Map([['a',1],['b',9]]);
}
let obj1 = new Obj();
Object.defineProperty(obj1,'innumerable',{
    enumerable:false,
    value:'innumerable'
})
console.log({obj1});
let str = JSON.stringify(obj1);
let obj2 = JSON.parse(str);
console.log({obj2})

测试结果如图所示

测试深拷贝.png

解决问题的简单版本

function deepCopy(obj){
    if(typeof obj === 'object'){
        if(obj.constructor === Array){
            var newArr = []
            for(var i = 0; i < obj.length; i++)  newArr.push(obj(i));
            return newArr;
        }else{
            var newObj = {};
            for(var key in obj){
                newObj[key] = this.deepCopy(obj[key])
            }
            return newObj
        }
    }else{
        return obj
    }
}

解决问题的常规操作引用第三方库loadsh

如下是loadsh中的深拷贝的源码

https://github.com/lodash/lodash/blob/master/.internal/baseClone.js

自己尝试解决的代码

const isComplexDataType = obj=> (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)

const deepClone = function (obj,hash = new WeakMap()){
    if(hash.has(obj)) return hash.get(obj);
    let type = [Date,RegExp,Set,Map,WeakMap,WeakSet];
    if(type.includes(obj.constructor)) return new obj.constructor(obj);
    //如果成环了，参数obj = obj.loop,最初的obj会在WeakMap中找到第一次放入的obj键前返回第一次放入WeakMap的cloneObj
    
    let allDesc = Object.getOwnPropertyDescriptors(obj); //遍历传入参数所有键的特性
    let cloneObj = Object.create(Object.getPrototypeOf(obj),allDesc);//继承原型
    hash.set(obj,cloneObj);
    for(let key of Reflect.ownKeys(obj)){
        //Reflect.ownKeys()可以拷贝不可枚举属性和符号类型
        cloneObj[key] = (isComplexDataType(obj)[key]&&typeof obj[key] !== 'function'?deepClone(obj[key],hash):obj[key])
        //如果值是引用类型（函数）则递归调用deepClone
    }
    return cloneObj;
}