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
由此发现它们的区别在于浅复制仅仅复制第一层对象,而深复制就利用递归循环的方式复制了所有层级。