前言
前天,一次面试,一个挺专业的面试官问我,如何用原生js方法简单实现深拷贝?
我一脸问号,有么?然后面试官暗示了我半天,我说,莫非你是指Object.assign?
我就有点流汗,从没听说Object.assign跟深拷贝有什么关系,我又孤陋寡闻了?
测试
赶紧查了查资料,经过测试得知,Object.assign 是浅拷贝。测试代码如下:
let a = {name: {asd: '123'}};
let b = Object.assign({}, a);
a = {w: []};
console.log(a); // w: []
let m = {name: {asd: '123'}};
let n = Object.assign({}, m);
m.name = [];
console.log(n); // name: {asd: "123"}
let x = {name: {asd: '123'}};
let y = Object.assign({}, x);
x.name.asd = 456;
console.log(y); // name: {asd: 456}
let p = {name: {asd: {xyz: '123'}}};
let q = Object.assign({}, p);
p.name.asd.xyz = 456;
console.log(p); // name: asd: {xyz: 456}
结论
所以结论是:
Object.assign的拷贝,是对于第一层属性的拷贝,所以是浅拷贝。
先用Object.freeze冻结原对象行不行?
那就要了解一下Object.freeze冻结原理,测试过程我就不说了,结论是:
Object.freeze也是只能冻结第一层属性。
所以不要有“用Object.freeze先冻结再深拷贝”的念头!
怎样才是严谨的深拷贝?
严谨是一个相对概念,深拷贝的写法也有N种,我个人是采用3种办法,一个是JSON.parse(JSON.stringify(obj))
,一个是去github上找一个深拷贝的开源代码,或者是使用lodash的深拷贝就得了。