技术讲座：JavaScript 的‘封印’与‘冻结’——Object.seal、freeze 和 preventExtensions 的底层语义区别

引言

JavaScript 作为一种轻量级、跨平台的高级编程语言，广泛应用于 Web 开发。在 JavaScript 中，对象的属性和属性描述符可以配置成不同的访问状态。为了控制这些状态，ECMAScript 提供了三个强大的方法：Object.seal、Object.freeze 和 Object.preventExtensions。这三个方法都可以用来“封印”或“冻结”对象，以防止对对象进行进一步的修改。然而，它们在底层语义和效果上有着细微的差别。本文将深入探讨这三个方法的区别，并通过工程级代码示例来展示它们在实际开发中的应用。

一、概述

在 JavaScript 中，对象可以通过以下方式被修改：

1. 修改对象的属性值；
2. 添加或删除对象的属性；
3. 修改对象的属性描述符（如可枚举性、可写性、可配置性等）。

为了防止上述操作，Object.seal、Object.freeze 和 Object.preventExtensions 方法提供了不同的“封印”策略：

方法	封印对象	阻止修改属性描述符	阻止添加/删除属性
Object.seal	是	是	否
Object.freeze	是	是	是
Object.preventExtensions	否	否	是

二、Object.seal 方法

Object.seal 方法可以阻止向对象添加新属性，同时阻止修改现有属性的可枚举性、可写性和可配置性。这意味着一旦对象被 seal，它就变成了一个密封对象，不能被进一步修改。

const obj = { a: 1, b: 2 };

console.log(Object.isSealed(obj)); // false

Object.seal(obj);

console.log(Object.isSealed(obj)); // true

obj.c = 3; // Error: Cannot add property c, object is sealed
delete obj.b; // Error: Cannot delete property b, object is sealed
obj.b = 4; // Error: Cannot change property b of object because the value will be non-configurable

三、Object.freeze 方法

Object.freeze 方法不仅阻止了向对象添加新属性，还阻止了修改现有属性的可枚举性、可写性和可配置性。此外，它还阻止了修改对象自身的属性描述符。这意味着一旦对象被 freeze，它就变成了一个冻结对象，不能被进一步修改。

const obj = { a: 1, b: 2 };

console.log(Object.isFrozen(obj)); // false

Object.freeze(obj);

console.log(Object.isFrozen(obj)); // true

obj.c = 3; // Error: Cannot add property c, object is frozen
delete obj.b; // Error: Cannot delete property b, object is frozen
obj.b = 4; // Error: Cannot change property b of object because the value will be non-configurable

四、Object.preventExtensions 方法

Object.preventExtensions 方法阻止了向对象添加新属性。然而，它不会阻止修改现有属性的可枚举性、可写性和可配置性，也不会阻止修改对象自身的属性描述符。

const obj = { a: 1, b: 2 };

console.log(Object.isExtensible(obj)); // true

Object.preventExtensions(obj);

console.log(Object.isExtensible(obj)); // false

obj.c = 3; // Error: Cannot add property c, object is not extensible
delete obj.b; // Ok
obj.b = 4; // Ok

五、工程级代码示例

以下是一些使用 Object.seal、Object.freeze 和 Object.preventExtensions 方法的工程级代码示例。

1. 封印配置对象

在开发过程中，我们经常需要创建一些配置对象，这些对象不应被修改。使用 Object.seal 方法可以确保配置对象在运行时保持不变。

const config = {
  width: 100,
  height: 200,
  backgroundColor: 'red'
};

Object.seal(config);

// config 不可修改

2. 冻结数据对象

在某些情况下，我们可能需要创建一些数据对象，这些对象在运行时不应被修改。使用 Object.freeze 方法可以确保数据对象在运行时保持不变。

const data = {
  name: 'Alice',
  age: 30,
  address: '123 Main St'
};

Object.freeze(data);

// data 不可修改

3. 阻止扩展类原型

在创建自定义类时，我们可能需要防止开发者向类原型添加新属性。使用 Object.preventExtensions 方法可以实现这一点。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const personPrototype = Object.getPrototypeOf(Person.prototype);

Object.preventExtensions(personPrototype);

// Person.prototype 不可扩展

六、总结

本文深入探讨了 JavaScript 中 Object.seal、Object.freeze 和 Object.preventExtensions 方法的区别。这些方法在控制对象状态方面非常有用，可以防止对象在运行时被意外修改。通过本文的讲解和代码示例，读者可以更好地理解这些方法在实际开发中的应用，并将其运用到项目中，提高代码的稳定性和可靠性。