JavaScript之深浅拷贝

在JavaScript中,数据类型包括:Undefined类型，Null类型，Boolean类型，Number类型，String类型，Object类型。

基本数据（Undefined类型，Null类型，Boolean类型，Number类型，String类型）类型保存在栈内存，

引用类型（Object类型）保存在堆内存中。

根本原因在于保存在栈内存的必须是大小固定的数据，引用类型的大小不固定，只能保存在堆内存中，但是可以把它的地址写在栈内存中以供我们访问。

如果是基本数据类型，则按值访问，操作的就是变量保存的值；如果是引用类型的值，我们只是通过保存在变量中的引用类型的地址来操作实际对象。

举例：

var num=10;    //Number类型
var name="张三";    //String类型
   
var person={        //object类型（引用类型）
    name:"李四",
    age:19
}

如图：

1，基本类型的复制

var num1= 10 ;    //10
var num2=num;    //10

num1=20;    //20  此时num2为10  赋值的时候，在栈内存中重新开辟内存 因此互不影响

 

2，引用类型的复制（浅拷贝与深拷贝） 先来看看浅拷贝！　　

var obj1={
    name:"张三",
    age:19
}

var obj2=obj1;  

obj1.age=20;  //修改obj1的age属性的值

console.log(obj1);  // age:20 ,name:"张三"
console.log(obj2);  // age:20 ,name:"张三"

 

你会发现你只修改了obj1里的数据，为什么obj2会跟着改变呢？我们来看看原理！

 

 

 

那什么是深拷贝呢？其实深拷贝就是简单的理解为：复制了它的属性（key）和值（value），但是一个对象修改了自己的值，另一个会不跟着改变（地址不会指向同一块内存）。

看看下面代码：

 var person1={
     name:"张三",
     age:19,
     sex:"男",
     source:[90,80,70],
     car:{
         name:"bw"
     }
    }

var person2=deepCopy(person1)

 //deepCopy
function deepCopy(obj){
     var temp=Array.isArray(obj)?[]:{}
     for(var key in obj){
        if(typeof obj[key] == "object"){
        temp[key]=deepCopy(obj[key])
     }else{
            temp[key]=obj[key]
    }
    }
    return temp
 }    

person1.age=20;
person1.name="李四";
person1.sex="女";

console.log(person1); // age=20,name="李四",sex="女" .....
console.log(person2); // age:19,name:"张三",sex:"男" ......
    

如图：