深入剖析JavaScript中的原始值与对象：揭秘背后的机制

2023-10-02 05:14:29

在JavaScript的世界里，数据类型就像一场永不落幕的二元对决，一边是原始值，另一边是对象。这两者之间的区别绝不仅仅是语义上的细微差别，它们对实际编程有着至关重要的影响。

原始值：简单直接，值传递

原始值就如同它们的名称所暗示的那样——简单直接。它们代表着不可再分的最小数据单位，包括undefined、null、布尔值（true和false）、数字和字符串。原始值的赋值操作本质上是值传递，这意味着变量接收的是原始值的副本。举个例子：

let num1 = 10;
let num2 = num1;

num2 = 20;

console.log(num1); // 输出 10
console.log(num2); // 输出 20

在这段代码中，我们将原始值10赋值给变量num1，然后将num1的引用复制给变量num2。之后，我们修改了num2的值为20。然而，原始值是不可变的，这意味着num1的值仍然保持不变。这种值传递的行为对于理解JavaScript中的数据类型至关重要。

对象：复杂结构，引用传递

与原始值不同，对象是复杂的数据结构，可以包含各种属性和方法。对象之间通过引用进行传递，这意味着变量指向的并不是对象的副本，而是对象的实际内存地址。

let obj1 = { name: "John", age: 30 };
let obj2 = obj1;

obj2.age = 40;

console.log(obj1.age); // 输出 40
console.log(obj2.age); // 输出 40

在上面的代码示例中，我们创建一个对象obj1并将其赋值给obj2。obj2指向的并不是obj1的副本，而是同一个内存地址。因此，当我们修改obj2的age属性时，obj1的age属性也会受到影响。这种引用传递的行为在对象的操作中非常常见。

比较：值对值，引用对引用

比较原始值时，我们会逐个比较它们的实际值。然而，比较对象时，我们会比较它们的引用是否相等，而不是它们包含的内容。

const num1 = 10;
const num2 = 10;

console.log(num1 === num2); // 输出 true

const obj1 = { name: "John", age: 30 };
const obj2 = { name: "John", age: 30 };

console.log(obj1 === obj2); // 输出 false

拷贝：深度对浅显

当我们拷贝对象时，有两种常见的方法：深度拷贝和浅拷贝。深度拷贝会创建原始值和嵌套对象的副本，而浅拷贝只会创建对原始值和嵌套对象的引用的副本。

// 深度拷贝
const obj1 = { name: "John", age: 30 };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.age = 40;

console.log(obj1.age); // 输出 30
console.log(obj2.age); // 输出 40

// 浅拷贝
const obj1 = { name: "John", age: 30 };
const obj2 = Object.assign({}, obj1);

obj2.age = 40;

console.log(obj1.age); // 输出 40
console.log(obj2.age); // 输出 40