小tips:JS之浅拷贝与深拷贝

时间:2021-11-30 22:24:49

浅拷贝:

function extendCopy(p) {
 
var c = {};
 
for (var i in p) {
   c[i]
= p[i];
 }
 
return c;
}

深拷贝:

function deepCopy(p, c) {
  
var c = c || {};
  
for (var i in p) {
    
if (typeof p[i] === 'object') {
      c[i]
= (p[i].constructor === Array) ? [] : {};
      deepCopy(p[i], c[i]);
    }
else {  
c[i]
= p[i];
    }
  }

  
return c;
}

浅拷贝的问题:如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

下面来个实例:

var obj1 = {
name:
'helloJack',
inner:{
sum:
5
}
};

var obj2 = extendCopy(obj1,{});

obj2.name
="sss";
obj2.inner.sum
= 7;
console.log(obj1.name);
//helloJack
console.log(obj1.inner.sum); //5

存在的问题,如果经常改写这个函数的方法extendCopy,内部再调用这个方法名就会出错,还得修改一下这个方法名,那么下面这样解决:

var extendCopy = (function f(p,c){
var c = c || {};
for (var i in p) {
if(typeof p[i] === 'object'){
c[i]
= (p[i] instanceof Array) ? [] : {};
f(p[i],c[i]);
}
else{
 c[i]
= p[i];
} 
}
return c;
});

可参考地址:
『小tip』JS严格模式(use strict)下不能使用arguments.callee的替代方案
Javascript 面向对象编程(一):封装
Javascript面向对象编程(二):构造函数的继承
Javascript面向对象编程(三):非构造函数的继承