Vue之JavaScript的对象引用和浅拷贝

Vue之JavaScript的对象引用和浅拷贝

对象引用

var param1={name:"111"};
var param2=param1;
param2.name="222";

console.log(param1.name); // 输出 "222"
console.log(param2.name); // 输出 "222"

在这段代码中，param1 是一个对象，它有一个名为 name 的属性，其值为 "111"。然后，param2 被赋值为 param1，这意味着 param2 和 param1 引用了同一个对象，而不是创建了一个新的对象。因此，当你修改 param2.name 的值为 "222" 时，实际上是修改了 param1 引用的对象的属性。因此，此时 param1.name 的值也变为了 "222"。

这是因为 JavaScript 中对象是通过引用传递的，而不是通过值传递。所以当你对一个对象进行操作时，无论是通过原始引用还是通过指向该对象的其他引用，对对象所做的更改都会影响所有引用该对象的地方。

浅拷贝

如果你想确保修改 param2 不会影响到 param1，你需要创建一个 param2 的新对象而不是将其赋值为 param1。这样，param2 就不再指向 param1 引用的同一对象，而是指向一个新的独立对象。

var param1 = { name: "111" };

// 使用对象的浅拷贝，可以使用 Object.assign 或者展开运算符
var param2 = Object.assign({}, param1); // 或者 var param2 = { ...param1 };

param2.name = "222";

console.log(param1.name); // 输出 "111"
console.log(param2.name); // 输出 "222"

在这个例子中，Object.assign({}, param1) 创建了 param1 的浅拷贝，将其属性复制到一个新的对象中，从而确保 param2 不再引用与 param1 相同的对象。