Js复制对象/克隆对象 Js浅拷贝与深拷贝 浅拷贝和深拷贝的实现方法

Js复制对象/克隆对象 Js浅拷贝与深拷贝 浅拷贝和深拷贝的实现方法

前言

学习Js克隆一个对象，作为准备工作，需要理解Js中的数据类型和按值传递：Js中的数据类型和按值传递

浅拷贝最后两种方法涉及到了继承和es5新特性中的call方法，可以读es5替换函数中的this的方法
Js中的prototype、__proto__和constructor

1. 浅拷贝

1.1. 赋值和浅拷贝

概念：

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是原始类型，拷贝的就是原始类型的值；如果属性是引用类型，拷贝的就是内存地址 。

代码示例：

var student={
   
    name:"Lily",
    age:15,
    sex:"女",
    friends:["Jack","Rose","Ben"]
}
var obj1=student;
function clone(obj){
   
    var newObj={
   };
    for(var key in obj){
   
        newObj[key]=obj[key]
    }
    return newObj;
}
var obj2=clone(student)
obj1.name="Tom";
obj2.sex="男";
obj2.friends[0]="Lilei";
console.log(student.name) //Tom 
console.log(student.age) //15
console.log(student.friends) //["Lilei", "Rose", "Ben"]

解析：

i. 赋值：

上面一段代码，student变量中保存着所创建对象的地址，obj1由赋值得到，根据按值传递，我们知道，obj1变量中保存的是student所存地址的副本，这两个地址指向同一个实例化对象，无论哪个对象发生改变，都会改变这个实例化对象，两个对象是联动的。

ii. 浅拷贝：

a. 重新创建一个新对象，逐个拷贝源对象的属性;

b. 如果属性值是原始类型数据，拷贝的是原始类型的值的副本，原始类型的属性在新对象和源对象之间互不影响

c. 如果属性值是引用类型数据，拷贝的是地址，如果其中一个的地址发生改变，就会影响到另外一个对象

1.2. 浅拷贝的方法

1.2.1. Object.assign()

Object.assign()方法可以将源对象自身的可枚举属性(任意多个)拷贝给目标对象，然后返回目标对象

var student={
   
    name:"Lily",
    age:</