js之浅拷贝和深拷贝

版权声明：所有博客本人原创，转载注明出处即可 https://blog.csdn.net/qq_42813491/article/details/87537465

比较

浅拷贝	深拷贝	解释
说明	特点	原理
将另一个对象全部属性和方法都复制过去	浅拷贝结束，修改其中一个对象后，另一个对象同步被修改	栈内存中的堆地址一样
复制的同时开辟新空间	深拷贝结束，修改其中一个对象后，另一个对象不会同步被修改	栈内存中的堆地址不一样

浅拷贝代码

<script> 
    var obj1={
      name:"冷月心",
      sex:"男",
      language:["php","node","java","python"]，  
    };
    //另一个对象
    var obj2=obj1;
    //console.dir()用于显示对象的属性和方法，比console.log()更具体
    console.dir(obj1);
    console.dir(obj2);
  </script>

效果图

浅拷贝测试代码

  var obj1={
      name:"冷月心",
      sex:"男",
      language:["php","node","java","python"],
      introduce:function(){
      }
    };
    //另一个对象
   var obj2=obj1;
    obj2.name="杨梦言";
    obj2.sex="女";
    obj2.language[0]="ruby";
    console.dir(obj1);

浅拷贝测试结果

• 更改obj2,发现obj1也随之改变
  

深拷贝代码

		var obj1 = {
		      name: "冷月心",
		      sex: "男",
		      language: ["php", "node", "java", "python"],
		      introduce: function () {}
		    };
		    
	   var obj2 = {}; 
	   
	    function extend(obj1, obj2) {//深拷贝函数
	      for (var key in obj1) {
	         var item = obj1[key];
	        if (item instanceof Array) {//对数组的深拷贝
	         	 obj2[key] = [];
	             extend(item, obj2[key]);
	        } else if (item instanceof Object) {//对对象的深拷贝
		          obj2[key] = {};
		          extend(item, obj2[key]);
	        } else {
	             obj2[key] = item;//对基本类型值的深拷贝
	        }
	      }
	    }
	    extend(obj1, obj2);
	    obj2.sex = "女";
	    obj2.language[0]="ruby";
	    console.dir(obj1);

深拷贝效果图

• 更改obj2,发现obj1并未受影响