JavaScript 对象引用与值传递的奥秘

---

理解 JavaScript 中的引用与值传递

作为前端工程师，我经常会遇到一些看似奇怪的行为，尤其是在处理对象和数组时。最近我在项目中遇到了一个有趣的现象，让我对 JavaScript 中的引用和值传递有了更深刻的理解。

问题重现

我发现自己定义了一个临时变量 currentData，并在其中添加了一些新属性。奇怪的是，当我修改这个临时变量时，另一个看似独立的变量 tableData.value.list 也会随之改变。这让我困惑不已，因为按照我的理解，这两个变量应该是相互独立的。

示例代码

	// 假设这是我们的初始数据const tableData = {value: {list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' }]}};// 创建一个临时变量let currentData = tableData.value.list[0];// 添加新属性currentData.newProperty = 'This is new';// 检查结果console.log(tableData.value.list[0].newProperty); // 输出: 'This is new'

为什么会这样？

这是因为 JavaScript 中对象（包括数组和函数）是通过引用传递的，而不是通过值传递的。

值传递 vs 引用传递

• 值传递：基本类型（如数字、字符串、布尔值）是按值传递的。这意味着当你将一个基本类型的值赋给另一个变量时，会创建该值的一个新副本。
• 引用传递：对象（包括数组、函数等）是按引用传递的。当你将一个对象赋给另一个变量时，实际上是在传递对该对象的引用（即内存地址），而不是创建该对象的一个新副本。

内存模型解释

	tableData.value.list[0] → [内存地址 0x123] → { id: 1, name: 'Item 1' }currentData → [同一个内存地址 0x123]

当你修改 currentData 时，实际上是在修改内存地址 0x123 处的对象，因此 tableData.value.list[0] 也会反映出这些变化，因为它们指向同一个对象。

如何创建真正的副本？

如果你确实需要一个独立的副本，可以使用以下方法：

1. 使用展开运算符（浅拷贝）

	let currentData = { ...tableData.value.list[0] };

2. 使用 JSON 方法（深拷贝，但有限制）

	let currentData = JSON.parse(JSON.stringify(tableData.value.list[0]));

3. 使用 Lodash 的深拷贝方法

	import _ from 'lodash';let currentData = _.cloneDeep(tableData.value.list[0]);

实际应用中的注意事项

1. Vue.js 中的响应性：在 Vue 中直接修改对象属性会触发响应式更新，这通常是期望的行为，但要小心意外的副作用。
2. 性能考虑：深拷贝操作可能代价高昂，特别是对于大型对象。在性能敏感的场景中要谨慎使用。
3. 不可变数据模式：考虑使用不可变数据模式，特别是在 Redux 或 Vuex 等状态管理库中。

总结

理解 JavaScript 中的引用和值传递是成为一名优秀前端开发者的关键。记住：

• 基本类型是按值传递的
• 对象是按引用传递的
• 需要独立副本时，使用适当的拷贝方法

下次当你遇到类似"为什么修改一个变量会影响另一个变量"的问题时，希望这篇文章能帮助你快速定位问题所在！