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 中的一个内置方法，用于冻结一个对象，使其不可被修改，冻结的对象包括其所有属性，且这些属性不能被删除或重新定义，冻结对象的属性也不能被修改或重新配置，需要注意的是，Object.freeze() 并不阻止对对象内部属性的直接操作，例如通过非常规手段（如修改数组长度、修改字符串等）。
基本用法
const obj = {
name: 'Alice',
age: 25
};
Object.freeze(obj);
console.log(obj.name); // 'Alice'
obj.name = 'Bob'; // 无效操作，不会改变原对象
console.log(obj.name); // 'Alice'
深层冻结
Object.freeze() 只能冻结对象的第一层属性，对于嵌套的对象，需要递归地调用 Object.freeze() 以实现深层冻结。
const nestedObj = {
user: {
name: 'Alice',
age: 25
}
};
Object.freeze(nestedObj.user); // 只冻结了 user 对象，未冻结嵌套的对象
nestedObj.user.name = 'Bob'; // 有效操作，会改变嵌套对象的属性
console.log(nestedObj.user.name); // 'Bob'
为了深层冻结对象,可以使用递归函数：
function deepFreeze(obj) {
let result, prop;
if (typeof obj === "object" && obj !== null) {
result = {};
for (prop in obj) {
if (obj.hasOwnProperty(prop)) {
result[prop] = deepFreeze(obj[prop]); // 递归调用 deepFreeze() 实现深层冻结
}
}
Object.freeze(result); // 冻结结果对象
return result;
} else {
return obj; // 非对象则直接返回原值
}
}
const deeplyFrozenObj = deepFreeze(nestedObj); // 深层冻结对象及其所有嵌套属性
deeplyFrozenObj.user.name = 'Charlie'; // 无效操作，不会改变原对象属性
console.log(deeplyFrozenObj.user.name); // 'Alice'
TypeScript 中的 readonly 关键字
与 JavaScript 的 Object.freeze() 不同，TypeScript 中的 readonly 关键字用于声明一个对象或对象的属性为只读，只读属性在声明后不能被重新赋值，但可以通过非常规手段（如直接修改数组长度）进行修改，与 Object.freeze() 相比，readonly 更灵活且易于使用。
基本用法
const obj: { readonly name: string; age: number } = { name: 'Alice', age: 25 };
obj.name = 'Bob'; // 编译错误：不能将类型 'string' 分配给只读属性 'name'。
obj.age = 26; // 有效操作，可以修改 age 属性值。
类中的 readonly 属性
在 TypeScript 的类中，可以使用 readonly 关键字来声明只读属性，这些属性在实例化后不能被重新赋值。
class Person {
readonly name: string; // 只读属性 name 在实例化后不能被重新赋值。
age: number; // 普通属性 age 可以被重新赋值。
constructor(name: string, age: number) {
this.name = name; // 在构造函数中赋值有效。
this.age = age; // 在构造函数中赋值有效。
}
}
const person = new Person('Alice', 25);
person.name = 'Bob'; // 编译错误：不能将类型 'string' 分配给只读属性 'name'，但可以在构造函数中赋值。
person.age = 26; // 有效操作，可以修改 age 属性值。
Object.freeze() 与 readonly 的关系与区别
虽然 Object.freeze() 和 TypeScript 中的 readonly 都用于实现数据的不变性，但它们在使用方式和应用场景上存在一些差异：
- 作用范围：
Object.freeze()可以冻结整个对象及其所有属性，而readonly只能声明某个属性为只读，对于嵌套对象，需要递归地调用Object.freeze()以实现深层冻结；而readonly则可以通过声明嵌套对象的属性为只读来实现保护，2. 灵活性：readonly更灵活，因为它只限制属性的赋值操作，而不限制对属性的其他操作（如访问、遍历等），而Object.freeze()则更严格，它禁止了对对象的几乎所有修改操作，3. 编译时检查：readonly是 TypeScript 的编译时特性，它可以在编译阶段进行类型检查；而Object.freeze()是运行时特性，它只能在运行时进行冻结操作，4. 性能：由于readonly是编译时特性，它不会带来运行时性能开销；而Object.freeze()需要遍历对象的所有属性并进行冻结操作，可能会带来一定的性能开销，5. 兼容性：readonly是 TypeScript 的特性，需要编译为 JavaScript 代码才能在浏览器中运行；而Object.freeze()是 ECMAScript 标准的一部分，可以在所有支持 ECMAScript 的环境中运行，6. 非常规手段：通过非常规手段（如直接修改数组长度、修改字符串等），可以绕过readonly的限制；而Object.freeze()则能更全面地防止这些非常规手段导致的修改。Object.freeze()和readonly在实现数据不变性方面各有优劣，在实际开发中，可以根据具体需求选择使用哪种方法来实现数据不变性，如果需要保护整个对象及其所有属性的不变性且希望有更严格的保护机制（如防止非常规手段导致的修改），则可以使用Object.freeze()；如果只需要保护某些属性的不变性且希望有更灵活的声明方式（如可以在编译阶段进行类型检查），则可以使用readonly。