JS中用const定义对象后，为什么能修改对象属性却不能重新赋值？

Question

在JavaScript中，用`const`定义对象后，为什么能修改对象属性却不能重新赋值？ 这是一个常见的技术问题。`const`声明的变量在初始化后，其绑定的内存地址不可改变，这意味着不能将该变量重新赋值为另一个对象或值。然而，`const`并不会冻结对象的内容，即对象的属性是可以被修改、添加或删除的。这是因为`const`保护的是变量引用的地址，而不是数据本身的完整性。如果需要完全禁止对象属性的修改，可以使用`Object.freeze()`方法来实现。这种行为反映了JavaScript中`const`的作用机制：确保变量指向不变，但不干涉对象内部状态的变化。了解这一区别有助于开发者正确使用`const`，避免潜在的错误。

Answer 1

1. 基础概念：`const`的作用

`const`是JavaScript中的一种变量声明方式，用于创建不可重新赋值的常量。一旦使用`const`声明了一个变量并初始化后，该变量的引用地址将无法改变。

例如：

const obj = { key: 'value' };
obj = {}; // TypeError: Assignment to constant variable.

从上述代码可以看出，尝试对`const`声明的变量重新赋值会导致错误。

2. 深入分析：对象属性与引用的区别

尽管`const`确保了变量的引用地址不可变，但它并不限制对象内部状态的变化。这是因为`const`保护的是变量指向的内存地址，而不是数据本身。

以下是一个示例：

const obj = { key: 'value' };
obj.key = 'newValue'; // 合法操作
console.log(obj); // 输出 { key: 'newValue' }

在上述代码中，虽然`obj`是用`const`声明的，但我们仍然可以修改其属性值。

这种行为的原因在于，`const`只保证变量不能指向另一个地址，而对象的内容（即属性）存储在不同的内存区域。

3. 解决方案：如何完全冻结对象

如果需要完全禁止对象属性的修改，可以使用`Object.freeze()`方法。该方法会递归地冻结对象的所有属性，使其不可更改、添加或删除。

示例如下：

const obj = { key: 'value' };
Object.freeze(obj);
obj.key = 'newValue'; // 不生效
console.log(obj); // 输出 { key: 'value' }

需要注意的是，`Object.freeze()`不会影响嵌套对象，除非递归调用冻结所有层级。

4. 技术扩展：`const`与其他声明方式的对比

声明方式	是否可重新赋值	是否可修改对象属性
`var`	可以	可以
`let`	可以	可以
`const`	不可以	可以（需额外冻结）

通过上表可以看出，`const`的主要特点是防止变量重新赋值，但允许对象属性的修改。

5. 流程图：`const`作用机制的可视化

graph TD;
            A[变量声明] --> B{是否使用`const`};
            B -- 是 --> C[绑定固定引用];
            C --> D{是否为对象};
            D -- 是 --> E[允许修改属性];
            D -- 否 --> F[值不可变];
            B -- 否 --> G[允许重新赋值];

此流程图清晰地展示了`const`的作用机制及其与对象属性修改的关系。