JS 科普篇：原始值与引用值的奇妙世界

前端

2023-12-30 23:26:27

在 JavaScript 奇幻世界中，探索原始值与引用值的奥秘

JavaScript 是一个强大且灵活的编程语言，而其变量扮演着至关重要的角色。它们就像一个个神奇的盒子，承载着各种各样的数据。这些数据又可以分为两大阵营：原始值 和引用值 。

就像探险家踏上新大陆，今天我们将深入了解这两个神秘的领域，揭开它们各自的特性和行为。

原始值的独立王国

原始值就像独立自强的国王，高高在上，独享着自己的领土。它们直接驻扎在栈内存中，包括字符串、数字、布尔值、null 和 undefined 等忠诚的臣民。

当我们向原始值发号施令时，它们会立刻执行，毫不迟疑。例如，如果我们让数字士兵 1 和 2 决斗，结果会毫不留情地显示为 3。原始值之间的运算都是纯粹的数字游戏，不涉及任何外部因素。

引用值的迷人王国

与原始值的独来独往不同，引用值就好似隐形刺客，它们指向堆内存中某个地址处的对象。对象是一个复杂的数据结构，包含各种属性和方法，就像一个王国般繁荣昌盛。

当我们向引用值发出指令时，它们不会直接执行，而是充当使者，向其所指向的对象传达指令。因此，当我们修改引用值指向的对象时，原始对象本身也会发生改变，就像刺客刺杀国王，影响波及整个王国。

识别原始值与引用值

如何识别原始值和引用值呢？这就好比探测器扫描宇宙，寻找不同的信号。在 JavaScript 中，我们可以使用 typeof 运算符来探究变量的本质。

对于原始值，typeof 会返回它们的类型名称，如 "string" 或 "number"。而对于引用值，typeof 会返回 "object"，即使它们不是真正的对象，如数组或函数。

原始值与引用值之间的互动

当原始值与引用值相遇时，就会上演一场精彩的戏剧。如果我们将原始值赋值给引用值，原始值会被克隆，保存在一个新的内存地址中。这样一来，即使我们修改原始值，也不会影响引用值指向的对象。

然而，当我们把引用值赋值给引用值时，它们就会指向同一个对象。这意味着对其中一个引用值的任何修改，都会同时影响另一个引用值指向的对象。

实际应用中的深刻影响

原始值与引用值的区别在实际开发中有着深远的影响。例如，在传递函数参数时，原始值会按值传递，而引用值会按引用传递。

在按值传递的情况下，传递的是原始值的副本，函数内部的任何修改都不会影响原始值。而在按引用传递的情况下，传递的是引用值的副本，函数内部的任何修改都会反映在原始对象上。

代码示例

以下代码示例演示了按值和按引用传递之间的区别：

// 按值传递
const originalValue = 5;
const copiedValue = originalValue;
copiedValue++;
console.log(originalValue); // 输出：5
console.log(copiedValue); // 输出：6

// 按引用传递
const originalObject = { name: 'John' };
const copiedObject = originalObject;
copiedObject.name = 'Jane';
console.log(originalObject); // 输出：{ name: 'Jane' }
console.log(copiedObject); // 输出：{ name: 'Jane' }