JavaScript 中的 Object.freeze 及其和 TypeScript 中 readonly 的关系,js object.prototype
在 JavaScript 中，Object.freeze方法用于冻结一个对象，使其不能再被修改，冻结的对象包括其所有属性，但不会影响属性的可枚举性和可配置性，在 TypeScript 中，readonly关键字用于声明一个对象属性为只读，即该属性不能被重新分配或修改，尽管readonly和Object.freeze都用于防止对象被修改，但它们的作用范围不同，readonly作用于属性，而Object.freeze作用于整个对象及其属性，Object.freeze冻结的是对象的值，而不是其原型链上的属性，在使用Object.freeze时，需要注意其局限性，并考虑使用其他方法如Proxy来实现更严格的保护。
JavaScript 中的 Object.freeze() 及其和 TypeScript 中 readonly 的关系
在编程中,数据的不变性（immutability）是一个重要的概念，它指的是数据一旦被创建后，其状态就无法被改变，这种特性在开发过程中带来了诸多好处，如性能优化、并发安全等，JavaScript 和 TypeScript 作为现代前端开发的主流语言，都提供了不同的机制来支持数据的不变性，本文将深入探讨 JavaScript 中的 Object.freeze() 方法及其与 TypeScript 中 readonly 关键字的关系。
JavaScript 中的 Object.freeze()
Object.freeze() 是 JavaScript 中的一个方法，用于冻结一个对象，使其不可被修改，冻结一个对象后，该对象的所有属性都将变为不可写、不可配置和不可删除，如果对象包含嵌套的对象或数组，这些嵌套的数据结构也将被递归地冻结。
基本用法
const obj = {
name: 'John',
age: 30,
city: 'New York'
};
Object.freeze(obj);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }
// 尝试修改属性
obj.name = 'Jane'; // 无效操作，不会报错，但修改不会生效
console.log(obj.name); // 'John'
// 尝试添加新属性
obj.gender = 'male'; // 无效操作，不会报错，但新属性不会被添加
console.log(obj.gender); // undefined
// 尝试删除属性
delete obj.age; // 无效操作，不会报错，但属性不会被删除
console.log(obj.age); // 30
冻结嵌套对象与数组
Object.freeze() 会递归地冻结对象中的所有嵌套对象或数组，这意味着即使嵌套的数据结构被冻结，也无法对其进行修改。
const nestedObj = {
person: {
name: 'John',
age: 30
}
};
Object.freeze(nestedObj);
nestedObj.person.name = 'Jane'; // 无效操作，不会报错，但修改不会生效
console.log(nestedObj.person.name); // 'John'
注意事项与限制
尽管 Object.freeze() 提供了一种强大的方式来防止对象被修改，但它也有一些限制和注意事项：
- 浅冻结：如前所述，
Object.freeze()只能冻结对象的第一层属性，对于嵌套的对象或数组，需要递归地调用Object.freeze()。 - 无法冻结函数：如果对象包含函数属性，这些函数仍然可以被调用和修改（尽管其内部状态无法被修改）。
- 无法冻结数组长度：尽管数组的内容（如元素）可以被冻结，但数组的长度仍然可以被改变。
arr[3] = 'new value'会将索引为 3 的位置设置为新值，但不会改变数组的长度。arr.length = 5会改变数组的长度。 - 无法冻结 Symbol 属性：
Object.freeze()不能冻结使用 Symbol 作为键的属性。 - 无法冻结非自有属性：如果对象继承自原型链的属性，这些属性不会被冻结，如果
Object.prototype上有一个可写属性，那么该属性仍然可以被修改，由于 JavaScript 的安全机制，这种情况在实际应用中非常罕见。
TypeScript 中的 readonly 关键字
与 JavaScript 中的 Object.freeze() 不同，TypeScript 中的 readonly 是一个类型系统层面的修饰符，用于将对象的属性标记为只读，这意味着这些属性在初始化后不能被重新赋值或修改，与 Object.freeze() 不同，readonly 是类型安全的，并且只影响编译时检查。
基本用法
const config: { readonly name: string; age: number } = { name: 'John', age: 30 };
config.name = 'Jane'; // 报错：不能将类型“string”分配给类型“readonly string”
config.age = 31; // 有效操作，因为 age 不是 readonly 属性
readonly 与接口和类型别名
在 TypeScript 中，readonly 可以与接口和类型别名结合使用，以定义只读属性，这有助于在大型项目中保持代码的一致性和可维护性。
interface IUser {
readonly name: string; // name 属性是只读的
age: number; // age 属性是可写的
}
const user: IUser = { name: 'John', age: 30 };
user.name = 'Jane'; // 报错：不能将类型“string”分配给类型“readonly string”
user.age = 31; // 有效操作，因为 age 是可写的属性