Vue对象传值问题：obj1的值赋给obj2,当obj2的值改变,obj1也会随之改变

最新推荐文章于 2025-01-20 14:00:17 发布

原创最新推荐文章于 2025-01-20 14:00:17 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了JavaScript中对象的引用传递与值传递的区别，通过具体示例展示了如何避免对象修改时的相互影响，强调了使用JSON.parse(JSON.stringify(obj))进行深拷贝的重要性。

场景如标题所示，上代码：

var obj1 = {
	id:1,
	name:'Jack',
	wage:'11',//工资，11表示选择了其他
	selfWage:'6000',//当wage为其他时，自己填写
	checked:true
}

var obj2 = obj1;
console.log(obj1);
console.log(obj2);

现在控制台打印出来的结果都是一样的。

Object { id: 1, name: "Jack", wage: "11", selfWage: "6000", checked: true }

Object { id: 1, name: "Jack", wage: "11", selfWage: "6000", checked: true }

此时需要对obj2进行操作：

obj2.wage=obj2.selfWage;
delete obj2.checked;
delete obj2.selfWage;
console.log(obj1);
console.log(obj2);

这时再来看控制台结果：

Object { id: 1, name: "Jack", wage: "6000" }

Object { id: 1, name: "Jack", wage: "6000" }

会发现，obj1也随着obj2的改变而改变了。这是因为这里发赋值是属于引用传递而非值传递，两者同时指向了同一内存地址。
若在操作obj2的数据时不影响到obj1的值，我们可以这样来赋值：

var obj1 = {
   id:1,
   name:'Jack',
   wage:'11',//工资，11表示选择了其他
   selfWage:'6000',//当wage为其他时，自己填写
   checked:true
}

var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.wage=obj2.selfWage;
delete obj2.checked;
delete obj2.selfWage;
console.log(obj1);
console.log(obj2);

再来看打印结果：

Object { id: 1, name: "Jack", wage: "11", selfWage: "6000", checked: true }

Object { id: 1, name: "Jack", wage: "6000" }

这时，obj1还是那个obj1，obj2已经不是那个obj2了，这里赋值主要是通过JSON将obj1转为字符串，然后再解析成对象传给obj2，这样就不会有问题了，目的达成，收工。