JavaScript freeze() 方法有什么作用？

八股文_JavaScript面试题 0 78

参考回答

JavaScript中的Object.freeze()方法用于冻结一个对象，使得对象无法被修改。冻结的对象不能添加新的属性，不能删除已有属性，且所有现有属性都变为只读（不可写）。这有助于防止对对象的不小心修改，提供更高的安全性和可预测性。

详细讲解与拓展

Object.freeze()是ES5引入的一个方法，它接受一个对象作为参数，并冻结该对象。冻结的对象是深度不可变的，即无法修改对象本身及其属性的值。冻结后的对象会变成一个严格模式对象，任何尝试修改其属性的行为都会被忽略。

1. 基本语法

Object.freeze(obj);

obj：要冻结的对象。

2. 冻结后的效果

当对象被冻结后，以下几种操作将变得无效：
– 添加新属性：无法向对象中添加新的属性。
– 删除属性：无法删除对象已有的属性。
– 修改属性值：无法修改对象的现有属性值。
– 修改属性的特性（如可写性、可枚举性）：无法改变属性的特性。

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

Object.freeze(person);

person.age = 31;  // 修改无效
person.city = "New York";  // 添加新属性无效
delete person.name;  // 删除无效

console.log(person);  // 输出: { name: 'John', age: 30 }

3. 浅冻结

Object.freeze()是浅冻结的，意味着它仅仅冻结对象的第一层属性，对于嵌套在对象中的子对象，它们仍然是可变的。因此，如果对象中包含嵌套的对象，它们的属性依然可以修改。

const person = {
    name: "John",
    details: {
        age: 30,
        city: "New York"
    }
};

Object.freeze(person);

person.details.age = 31;  // 修改有效，因为是浅冻结
console.log(person.details.age);  // 输出: 31

4. 深冻结

为了使对象的所有嵌套属性都变得不可变，通常需要手动对每一层对象进行冻结。可以编写递归函数来实现“深冻结”。

function deepFreeze(obj) {
    Object.freeze(obj);
    Object.keys(obj).forEach((key) => {
        if (obj[key] && typeof obj[key] === "object") {
            deepFreeze(obj[key]);  // 对嵌套对象递归冻结
        }
    });
    return obj;
}

const person = {
    name: "John",
    details: {
        age: 30,
        city: "New York"
    }
};

deepFreeze(person);

person.details.age = 31;  // 修改无效
console.log(person.details.age);  // 输出: 30

5. 冻结对象的返回值

Object.freeze()方法返回的是被冻结的对象本身，而不是一个新的对象。你可以直接在原对象上进行操作。

const obj = { key: "value" };
const frozenObj = Object.freeze(obj);

console.log(frozenObj === obj);  // 输出: true

6. 使用场景

确保数据不可变：Object.freeze()可以用于需要保护数据不被修改的场景，如常量对象或者共享数据。
防止对象被修改：在多人协作的项目中，冻结对象可以帮助避免不小心的属性修改。
实现安全的API：API中返回的数据可以使用Object.freeze()来确保返回的对象不可被修改。

7. 总结

Object.freeze()可以冻结对象，使其变为不可修改。
它是一个浅冻结方法，对象的嵌套属性不会被冻结。
可以通过手动递归调用Object.freeze()来实现深冻结。
Object.freeze()用于确保数据的不可变性，适用于需要保护对象不被修改的场景。

冻结对象可以提供更高的安全性，防止对象在程序运行过程中被意外修改，尤其在复杂的代码或多人协作的环境中非常有用。