您的位置:首页 > Web前端 > JavaScript

js深度克隆和浅度克隆

2017-07-29 17:39 369 查看
“使用JavaScript深度克隆一个对象。”

这是一个出现概率很高的面试题,下面就来总结下,二者的区别以及其代码。

科普一下:

js一般有两种不同数据类型的值:

基本类型(包括undefined,Null,boolean,String,Number),按值传递;

引用类型(包括数组,对象),按址传递,引用类型在值传递的时候是内存中的地址。

1.概念

浅度克隆:基本类型为值传递,对象仍为引用传递。

深度克隆:所有元素或属性均完全克隆,并于原引用类型完全独立,即在后面修改对象的属性时,原对象不会被修改。

其实深度克隆就是把一个对象里面的东西一模一样地复制到另一个对象,并且这两个对象分别放在内存的不同地方。

无论是深度克隆还是浅度克隆,直接把克隆当做复制就好,一个复制的不干净,只复制其值,但另一个复制的比较彻底,直接将其属性等也复制过来了。

2.代码

浅度克隆:

//数值克隆的表现
var a="1";
var b=a;
b="2";
console.log(a);// "1"
console.log(b);// "2"
//字符串克隆的表现
var c="1";
var d=c;
d="2";
console.log(c);// "1"
console.log(d);// "2"
//字符串克隆的表现
var x=true;
var y=x;
y=false;
console.log(x);// true
console.log(y);// false
//对象克隆表现
var m=function(){alert(1);};
var n=m;
n=function(){
alert(2);
};
console.log(m());//1
console.log(n());//2


以上都是浅度克隆 的表现,其基本都是基本类型为值进行的传递,对象依旧是引用进行传递。

深度克隆:

//深度克隆一个对象
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
};


js代码实现JSON对象的深度克隆,并返回一个新对象:

function cloneObj(obj){
var newobj = obj.constructor === Object ? {} : [];
if(typeof JSON === 'object'){
var s = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(s); //反系列化(还原)
}else{
if(newobj.constructor === Array){
newobj.concat(obj);
}else{
for(var i in obj){
newobj[i] = obj[i];
}
}
}
return newobj;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息