JavaScript 深拷贝问题

本人初学者,在学习的过程中遇到了一个深拷贝相关的问题,JS代码如下:


let personArr = [],
    allPerson = [],
    data = [{//初始数据
        name: "bill",
        age: 19
    }, {
        name: "tom",
        age: 20
    }]

function Person(obj) { //对象构造函数
    let val;

    for (let key in obj) {
        val = obj[key];
        this[key] = val;
    }
}

for (let i = 0, len = data.length; i < len; i++) {
    let temp;

    temp = new Person(data[i]);//循环创建对象
    personArr = personArr.concat(temp);//将对象合并入对象数组 注:查阅相关资料concat
}

$.extend(true, allPerson, personArr);//jQuery深拷贝对象数组
console.log(personArr[0].name);//输出bill
console.log(allPerson[0].name);//输出bill
personArr[0].name = "test";    //修改属性
console.log(personArr[0].name);//输出test
console.log(allPerson[0].name);//输出test

并没有想我预期的那样成功深拷贝了每一个对象,从输出值可以看出两个对象数组之间还是存在联系,我试过使用jQuery的extend方法深拷贝一个对象字面量形式存放的对象数组,如:
[{
    name: "bill",
    age: 19
}, {
    name: "tom",
    age: 20
}]
在这种情况下修改personArr中的对象属性,allPerson不会随之变化,我很疑惑,出现这种情况的原因是什么?该如何解决?经过下午的尝试我猜测问题是在temp = new Person(data[i]);这一步上,是不是new的对象可能只是一个指向目标对象的指针?求高人指点

codepen:https://codepen.io/Vincedd/pr...

阅读 3.1k
1 个回答

看了下jquery.extend源码

clipboard.png
可以发现在判断 jquery.isPlainObject(copy)时为false;
即personArr[0]不是一个纯粹的对象(即字面量或者构造函数为Object)
这时候执行的是

 target[ name ] = copy;

即为对象的引用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题