谈谈对深拷贝 浅拷贝的理解

一、首先需要知道的是js的数据类型有两大类

1 简单数据类型   主要包括: string, number, null, undefined, boolean,  symbol(es6后新增的)

2 复杂数据类型(也叫引用类型): object(往小了分为: Array, Function, Object)

 

二、两种数据类型在内存中存放的位置

1 简单数据类型的值  存放在栈里边

2 引用类型的引用地址 存放在栈，值存在堆里面，然后这个引用地址的指针指向堆里边对应的值

三，浅拷贝  直接赋值 和深拷贝的区别

    //    原理：浅拷贝针对引用类型只会拷贝引用地址,引用地址指向同一个对象，并不会拷贝其中的值

    //    结果：当改变原对象或者新对象的值时 会影响另外一个对象的值

    //    代码实现：

    //    1 利用for in循环

          var oldObj = {

              name: 'zs',

              age: '18',

              hobby:{

                  id: 1,

                  sing:function() {}

              }

          }

          var newObj = {}

          for(var key in oldObj) {

              newObj[key] = oldObj[key]

          }

        //   console.log(newObj === oldObj);   false

        oldObj.hobby.id = 2

    // console.log(oldObj, newObj);   结果是 newObj的id 也变成2

    

    //  2 利用assign() 方法

    // Object.assign(newObj, oldObj)   newObj要拷贝的新对象  oldObj被拷贝对象 返回值为新对象

    // var newObj = Object.assign({}, oldObj)

 

    // 3 利用assign() 方法和扩展运算符简化assign()操作

    // Object.assign({...oldObj})  

 

    // 深拷贝

    // 原理：针对引用类型数据拷贝的是该引用类型的值

    // 结果：拷贝对象和被拷贝对象值不会互相影响

    // 代码实现：利用for in 结合函数递归实现

    var oldObj1 = {

        name:['zs', 'ls'],

        hobby:{

            id:1

        },

        sing:function() {

 

        }

    }

        var newObj1 = { }

        function deepCopy(newObj1, oldObj1) {

            for(var key in oldObj1) {

                // 先将oldObj1 里面的每个值拿到

                var item = oldObj1[key]

                // 1 先判断是否为数组  因为数组也属于对象

                if(item instanceof Array) {

                    newObj1[key] = []

                    deepCopy(newObj1[key], item)

                } else if(item instanceof Object) {

                    // 在判断该值是否为对象

                    newObj1[key] = {}

                    deepCopy(newObj1[key], item)

                } else {

                    // 直到所有的值为基本数据类型时 才将值赋值给对应的newObj1

                    newObj1[key] = oldObj1[key]

                }

            }

        }

        deepCopy(newObj1, oldObj1)

 

        // 直接赋值  则表示新对象和旧对象相等 共用一个内存空间

        // 而不管是浅拷贝还是深拷贝都会在内存中新开一个空间

        var newObj2 = oldObj1 

        // console.log(newObj2 = oldObj1);  true

  

        // 利用jqeury的extend() 既可以浅拷贝也可以实现深拷贝

        // flag控制深浅拷贝(当falg为true时 则表示深拷贝 反之flag为false时则为浅拷贝)，target为被拷贝对象， newObj为新对象

        $.extend(flag, target, newObj)