首页 > 代码库 > js浅拷贝(地址引用)和深拷贝(克隆)

js浅拷贝(地址引用)和深拷贝(克隆)

浅拷贝和深拷贝相对于引用类型而言的。

js有两大类型值类型(基本数据类型)和引用类型(object,function,array);

值类型保存在栈上,引用类型保存在堆上。

浅拷贝只是单纯的拷贝对象的地址。

//对象的浅拷贝                                                              
var aa = { name: ‘aa‘, age: 26, dx: { dxName: ‘dxName‘, dxAge: 24 } };
var bb = aa;    
console.log(bb===aa);     //true //这里表示是指向的同一个地址 console.log(bb.name);
//aa bb.name=‘bb‘; console.log(aa.name); //bb console.log(bb.name); //bb

技术分享

对象保存在堆上面,而aa变量只是保存的aa对象的地址6ff65a1c;

bb=aa只是把地址6ff65a1c给了bb,所以指向的还是同一个对象,所以改了bb.name,aa.name也跟着变化了。

 

深拷贝是把对象完全复制一份。

var a = { name: ‘aa‘, age: 26, dx: { dxName: ‘dxName‘, dxAge: 24 } }; 
var b = new Object();                                                 
                                                                      
b.name = a.name;                                                      
b.age = a.age;                                                        
b.dx = {};                //开辟一块空间,然后复制                                 
b.dx.dxName=a.dx.dxName;                                              
b.dx.dxAge=a.dx.dxAge;                                                
                                                                      
b.name = ‘bb‘;                                                        
b.dx.dxAge = 30;                                                      
console.log(a===b);                                                   
console.log(‘a‘);                                                     
console.log(a);                                                       
console.log(‘b‘);                                                     
console.log(b);                                                       

技术分享

技术分享

由于b是拿到的是a的一个副本,所以改变b不会影响的a

var deepCopy = function (source) {    //深拷贝函数                                                    
    var result = {};                                                                           
    for(var key in source) {                                                                   
        //递归把object类型的值复制出来,这里没考虑function类型                                                    
        result[key] = typeof(source[key]) === ‘object‘ ? deepCopy(source[key]) : source[key];  
    }                                                                                          
    return result;                                                                             
}                                                                                              
var a = { name: ‘aa‘, age: 26, dx: { dxName: ‘dxName‘, dxAge: 24 } }; 
/*var b = new Object();                                               
                                                                      
b.name = a.name;                                                      
b.age = a.age;                                                        
b.dx = {};                //开辟一块空间,然后复制                                 
b.dx.dxName=a.dx.dxName;                                              
b.dx.dxAge=a.dx.dxAge;*/                                              
var b=deepCopy(a);                                                    
                                                                      
b.name = ‘bb‘;                                                        
b.dx.dxAge = 30;                                                      
console.log(a===b);                                                   
console.log(‘a‘);                                                     
console.log(a);                                                       
console.log(‘b‘);                                                     
console.log(b);                                                       

数组的浅拷贝和深拷贝

//数组浅拷贝                                                                          
var arr = ["One", "Two", "Three"];                                               
var arrto = arr;                                                                 
arrto[1] = "test";                                                               
document.writeln("数组的原始值:" + arr + "<br />"); //Export:数组的原始值:One,test,Three     
document.writeln("数组的新值:" + arrto + "<br />"); //Export:数组的新值:One,test,Three     
                                                                                 
//数组深拷贝                                                                          
var arr2 = ["One", "Two", "Three"];                                              
var arrtoo = arr.slice(0);                                                       
arrtoo[1] = "set Map";                                                           
document.writeln("数组的原始值:" + arr2 + "<br />"); //Export:数组的原始值:One,Two,Three     
document.writeln("数组的新值:" + arrtoo + "<br />"); //Export:数组的新值:One,set Map,Three 

 

js浅拷贝(地址引用)和深拷贝(克隆)