javascript基础：对象的引用、浅拷贝、深拷贝的理解

一直忙碌着项目，回过头来，发现对javascript的基础知识都理解不够，古人云：工欲善其事必先利其器，那么这段时间准备好好打牢一下基础，后面再做更深入的晋级。
今天主要来阐述对象的引用赋值、浅拷贝、深拷贝的理解。
前言
在javascript 中数据按照类型可分为基本数据类型 和 引用数据类型。
基本数据类型：String、Number、Boolean、Null、Undefined、Symbol（ES6中新增）。
引用数据类型：object对象、function函数、array数组、date日期等...

其中 “基本数据类型” 和 “引用数据类型”在声明时有着不同的内存分配机制
基本数据类型：占据空间大小固定并且比较小，会被存储在栈中，也就是变量访问的位置
引用数据类型：存储在堆当中，变量访问的其实是一个指针，它指向存储对象的内存地址

正因为如此，所以基本数据类型 和 引用数据类型的 赋值结果将存在差异

基本数据类型—赋值
我们来看下面一段代码的输出

    // 基本数据类型赋值
    let a ="123";
    let b =a;
    a ='456';
    console.log(b); //"123"

其中a 为String 类型，属于基本数据类型，将a赋值给b后，赋值的为实际的值，a 与 b相互独立，所有当a进行改变后，b不会随其变化。

引用数据类型—赋值
针对引用数据类型的赋值，主要分为 引用赋值、浅拷贝、深拷贝 几种情况。
下面我们将以对象为例，分别说明。

一、引用赋值

     // 对象的引用赋值
    let a = { name:'dell',age:18 };
    let b = a;
    a.age = 30;
    console.log(b.age); // 30

其中在给a赋值时，实质是赋值的对象的内存地址（即a=0x100），那么在将a赋值给b时，是将同样一个内存地址赋值给了b（即b=0x100），这时a、b都指向了同一份内存地址，所以当a中age属性发生变化时，实质是内存中的属性变化，所以b的age属性也将变化。如下图：

image.png

二、浅拷贝

    // 对象的浅拷贝
    let a ={ name:'dell',age:18 };
    let b = Object.assign({},a);
    a.age = 30;
    console.log(b.age); // 18

这里我们使用Object.assign()方法，将a拷贝一份并赋值给b，那么a的age属性发生变化后，将不影响b，所有b.age 依旧输出 18。如下图：

image.png

但浅拷贝存在一个很严重的问题，当对象中存在子对象时，此时拷贝不会将子对象复制，而是赋值的子对象的内存地址。我们看如下代码：

// 对象的浅拷贝
    let a ={ name:'dell',age:18 ,friend:{ name:'leng',age:20}};
    let b = Object.assign({},a);
    a.friend.name = 'cyan';
    console.log(b.friend.name); // cyan

此时当我们改变a.friend.name时，b.friend.name也将随之改变。这是因为此时friend依旧是赋值给b的内存地址，a.friend 与 b.friend 指向的同一份内存地址。如下图：

image.png

三、深拷贝

// 对象的深拷贝
    let a ={ name:'dell',age:18 ,friend:{ name:'leng',age:20}};
    let b = JSON.parse(JSON.stringify(a));
    a.friend.name = 'cyan';
    console.log(b.friend.name); // leng

这里我们可以使用JSON.stringify(a)将a转换成字符串，再将字符串转成成json对象，达到深拷贝效果，此时，改变a.friend.name将不会影响b.friend.name。

注意：JSON.parse(JSON.stringify(a))进行深拷贝将会存在一些弊端，这里我们只是说明引用赋值、浅拷贝、深拷贝原理便于理解。具体在实际开发中根据情况而定，但我们要知道这个是有弊端的。
JSON.parse(JSON.stringify(a))深拷贝弊端：（具体可自行测试）
1、obj里面有new Date()，深拷贝后，时间会变成字符串的形式。而不是时间对象；
2、obj里有RegExp、Error对象，则序列化的结果会变成空对象{}；
3、obj里有function，undefined，则序列化的结果会把function或 undefined丢失；
4、obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null;
5、obj中的对象是由构造函数生成的实例对象， 深拷贝后，会丢弃对象的constructor；
6、对象中存在循环引用的情况也无法正确实现深拷贝;

那么在需要深拷贝时，我们可以自己遍历进行实现，也可以使用第三方库如：https://www.lodashjs.com/，lodashjs中的_.cloneDeep()
这里我查找了实现深拷贝函数，自测有效，仅借鉴。

/**
 * 深度克隆
 * @type {Object}
 */

let cloneObj = new Object();
// eslint-disable-next-line complexity
(cloneObj.clone = (target, map = new WeakMap()) => {
    let result;
    const type = Object.prototype.toString.call(target).match(/\s(\w+)\]/)[1];

    if (typeof target !== "object" || target === null) {
        // 基本数据类型
        result = target;
    } else {
        if (["Array", "Set", "Map", "Object", "Arguments"].includes(type)) {
            // 可递归遍历的类型处理
            // 循环引用处理
            if (map.get(target)) {
                result = map.get(target);
            } else {
                const Constr = target.constructor;
                result = new Constr();
                map.set(target, result);

                if (type === "Array") {
                    // Array
                    target.forEach(v => {
                        result.push(cloneObj.clone(v, map));
                    });
                } else if (type === "Set") {
                    // Set
                    target.forEach(v => {
                        result.add(cloneObj.clone(v, map));
                    });
                } else if (type === "Map") {
                    // Map
                    target.forEach((v, k) => {
                        result.set(k, cloneObj.clone(v, map));
                    });
                } else {
                    // Object Arguments
                    Object.keys(target).forEach(k => {
                        result[k] = cloneObj.clone(target[k], map);
                    });
                }
            }
        } else {
            // 不可递归遍历的类型处理
            const Constr = target.constructor;
            if (type === "RegExp") {
                // RegExp
                result = new Constr(target.source, /\w*$/.exec(target));
                result.lastIndex = target.lastIndex;
            } else if (type.includes("Function")) {
                // Function AsyncFunction GeneratorFunction
                result = target;
            } else if (["Date"].includes(type)) {
                // Date
                result = new Constr(target);
            } else if (type === "Error") {
                // Error
                result = new Constr(target.message);
                result.stack = target.stack;
            } else if (type === "URL") {
                // URL
                result = new Constr(target.href);
            } else if (type.includes("Array")) {
                // ArrayBuffer TypeArray BigArray ...
                result = target.slice();
            } else if (type === "DataView") {
                // DataView
                result = new Constr(target.buffer.slice(0), target.byteOffset, target.byteLength);
            } else {
                try {
                    // 包装过的 Number String Symbol BigInt
                    const val = Constr.prototype.valueOf.call(target);
                    result = Object(val);
                } catch (err) {
                    // other
                    console.warn(`Uncatched type：${type}`);
                    console.warn(err);
                }
            }
        }
    }
    return result;
    // eslint-disable-next-line no-sequences
}),
    /**
     * @description: 深克隆方法
     * @param {any} target 源数据
     * @return {any} 克隆后的数据
     */
    (cloneObj.deepClone = target => {
        const res = cloneObj.clone(target);
        return res;
    });

export default cloneObj;