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;

推荐阅读更多精彩内容