JavaScript中的对象引用和复制

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中的对象引用和复制，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2237字，纯文字阅读大概需要4分钟。

内容图文

在JavaScript分为两种原始值和引用值类型，原始值之间的复制是值对值得复制，而引用类型则是引用对引用的复制；

// 原始值的复制；
let num1 = 1;
let num2 = num1;
num2++;
console.log(num1,num2); // 1,2

// 引用类型的复制；
let joe = {
    name:"joe",
    age:20    
}

let john = joe;
john.name = 'john';

console.log(john === joe,joe.name); // true john

如你所见，当我们把joe 赋值给john时实际上并没有完全复制一个新的，就好像是下面这样：

图片来自 “现代JavaScript教程” 网站；

Object.assign(target,arg1,arg2,...)方法用于将第二个参数及以后所有的对象都合并到第一个对象中，并返回第一个对象；

let user = {
    name:"申屠肆",
    hobbies:{
        first:'JavaScript',
        second:'Node'
    }
}

let user_copy = Object.assign({job:'Web开发'},user,);
user_copy.name = '谢必安';
user_copy.hobbies['third'] = 'Python';

console.log(user_copy.name,user.name);
console.log(user_copy.hobbies,user.hobbies);


//控制台

谢必安 申屠肆
{ first: 'JavaScript', second: 'Node', third: 'Python' } { first: 'JavaScript', second: 'Node', third: 'Python' }

虽然Object.assign可以达到我们想要的效果，但是，可以发现，如果合并的对象的某个键对应的值仍然是对象，则还是会存下对象的引用；

接下来，让我们探寻更进一步的方案

// 采用递归 + JSON对象的方法 来完成深度复制

function deep_clone(source,target = {}) {
    for(let key in source) {

        if(source[key].constructor === Object) {
            target[key] = deep_clone(source[key])
        }else if (source[key].constructor === Array) {
            target[key] = JSON.parse(JSON.stringify(source[key]))
        } else {
            target[key] = source[key];
        }

    }
    return target;
}

让我们来试一下

var ball = {
    name:'足球',
    shape:{
        text:'圆形',
        size:40
    },
    abc:[1],
    def:[{user:'谢绝'}]
}

function deep_clone(source,target = {}) {
    for(let key in source) {

        if(source[key].constructor === Object) {
            target[key] = deep_clone(source[key])
        }else if (source[key].constructor === Array) {
            target[key] = JSON.parse(JSON.stringify(source[key]))
        } else {
            target[key] = source[key];
        }

    }
    return target;
}

var ball_copy = deep_clone(ball);
ball_copy.shape.text="方形";
ball_copy.abc.push(2);
ball_copy.def[0].user = "谢绝-copy";
console.log(ball_copy,ball);

// 控制台打印
{
  name: '足球',
  shape: { text: '方形', size: 40 },
  abc: [ 1, 2 ],
  def: [ { user: '谢绝-copy' } ]
} {
  name: '足球',
  shape: { text: '圆形', size: 40 },
  abc: [ 1 ],
  def: [ { user: '谢绝' } ]
}

使用该方法需要注意的是，不能有“环形结构”

推荐阅读：《现代JavaScript教程》

内容总结

以上是互联网集市为您收集整理的JavaScript中的对象引用和复制全部内容，希望文章能够帮你解决JavaScript中的对象引用和复制所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端