浅谈针对引用类型来说 赋值 深拷贝 浅拷贝的区别

针对引用类型来说 赋值 深拷贝 浅拷贝的区别

1. 赋值 浅拷贝 深拷贝的区别

–赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

        /* 赋值 */
        var userInfo = {
            name: '张益达',
            age: 13,
            Specialty: ['跳绳', '广播', ['学习', '读书']]
        }

        var userInfo1 = userInfo

        userInfo1.name = '斯内克'
        userInfo1.Specialty[1] = '当僚机'

        console.log(userInfo);
        console.log(userInfo1);

–浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会互相影响。

         /* 浅拷贝 */
         var userInfo = {
            name: '张益达',
            age: 13,
            Specialty: ['跳绳', '广播', ['学习', '读书']]
        }
        function shallowCopy(obj) {
            var result = {}
            if (obj.hasOwnProperty) {
                for (var i in obj) {
                    result[i] = obj[i]
                }
            }
            return result;
        }

        var userInfo1 = shallowCopy(userInfo) 

        userInfo1.name = '斯内克'
        userInfo1.Specialty[1] = '当僚机'

        console.log('打印的userInfo',userInfo);
        console.log('打印的userInfo1',userInfo1);

–深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

           /* 深拷贝 */
      
        function deepClone(obj = {}) {
            //判断传入的obj是否为数组  或为null  如果是直接return返回
            if (typeof obj !== 'object' || obj == null) {
                return obj;
            }

            //初始化结果
            let result;
            if (obj instanceof Array) {
                result = []
            } else {
                result = {}
            }

            if (obj.hasOwnProperty) {
                for (var key in obj) {
                    //递归拷贝
                    result[key] = deepClone(obj[key])
                }
            }

            return result;

        }

        var userInfo1 = deepClone(userInfo)

        userInfo1.name = '斯内克'
        userInfo1.Specialty[1] = '当僚机'

        console.log('打印的userInfo', userInfo);
        console.log('打印的userInfo1', userInfo1);