js-克隆(浅克隆 & 深克隆)
js-克隆
浅克隆
- 浅克隆的对象的引用值是拷贝对象里的引用,这两个对象里面的引用(如对象里的数组或者内嵌对象)指向的地方是一致的。
var obj = {
name:"chen",
age:18,
gender:"female",
card:['visa','cb'],
wife:{
name:'abc',
son:{
name:'hehe'
}
}
};
var obj1 = {
};
function clone(origin,target){
for(var prop in origin){
if(origin.hasOwnProperty(prop)){
target[prop] = origin[prop];
}
}
return target;
}
clone(obj,obj1);
obj1.name = 'ge';
console.log(obj1.name);//ge
console.log(obj.name);//chen
obj1.card.push("abc");
console.log(obj.card);//['visa','cb','abc'];因为浅克隆的对象的引用值是拷贝对象里的引用,这两个对象的card指向的地方是一致的。
深克隆
这两个对象里的引用的独立拷贝的,不指向同一个地方。
深克隆
- 思路方法:
- 遍历对象
- 判断是不是原始值 typeof() object, instanceof, toString(推荐), constructor
- 判断是数组还是对象
- 建立相应的数组或对象
- 递归
function deepClone(origin, target){
var target = target || {};
var toStr = Object.prototype.toString;
var arrStr = '[object Array]';
for (var prop in origin){
if(origin.hasOwnProperty(prop)){
if(origin[prop] !== null && typeof(origin[prop]) == 'object'){
// if(toStr.call(origin[prop]) == arrStr){
// target[prop] = [];
// }else{
// target[prop] = {};
// }
target[prop] = (toStr.call(origin[prop])==arrStr) ? [] : {};
deepClone(origin[prop],target[prop]);
}else{
target[prop] = origin[prop];
}
}
}
return target;
}
deepClone(obj,obj1);
obj1.card.push("abc");
console.log(obj.card);//['visa','cb'];这两个对象里的引用的独立拷贝的,不指向同一个地方。