js中的深复制和浅复制也被叫作深拷贝和浅拷贝,它们的功能都是像一个对象复制成另一个新对象。
下来我们用代码解释一下深复制和浅复制的实现和差异:
基础对象:
var obj = {
name: 'yuuk',
age: '23',
favorite: ['basketball', 'swimming', { a: 1, b: 2 }, null],
skill: function() {
console.log(this.name);
},
};
浅复制:
var shallowCopy = function(src) {
var result = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
result[prop] = src[prop];
}
}
return result;
};
var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]); // football
console.log(obj.favorite[0]); // football
打印数据发现,修改了newObj的value也会改变obj的value
深复制:
var deepCopy = function(src) {
var result, prop;
if (src instanceof Array ) {
result = [];
} else {
result = {};
}
for (prop in src) {
if (typeof src[prop] === 'object' && src[prop] !== null) {
result[prop] = arguments.callee(src[prop]); // 降低耦合
} else {
if (src.hasOwnProperty(prop)) {
result[prop] = src[prop];
}
}
}
return result;
};
var newObj = deepCopy(obj);
newObj.favorite[0] = 'football';
console.log(newObj.favorite[0]); // football
console.log(obj.favorite[0]); // basketball 区别就在这里
打印数据发现,修改了newObj的value不会改变obj的value
由此发现它们的区别在于浅复制仅仅复制第一层对象,而深复制就利用递归循环的方式复制了所有层级。