ECMAScript 2019 中 Object.freeze() 方法使用详解-FunTeaLearn Online Web Tutorials

JavaScript 是一门动态、弱类型语言，它给开发者提供了非常便捷的开发方式，但也带来了一些难以调试和排除错误的挑战。其中一个问题就是对象的不可变性。在 JavaScript 中，一个对象为引用类型，我们可以很容易地修改它的属性或方法，这在某些情况下可能会引起问题。为此，ES5 引入了 Object.freeze() 方法来冻结对象，防止其被修改。ES2019 对其进行了扩展和优化，本文将详细介绍 Object.freeze() 的使用方法和注意事项。

什么是 Object.freeze() 方法？

Object.freeze() 方法是一个建议性方法，用于让对象变为不可变对象。这意味着该对象的属性和方法不能被修改、添加、删除，也不能重新定义。一旦对象被冻结，就无法解冻。这对于保持对象的状态以及在多个函数之间共享变量是非常有用的，因为它可以保证对象不会在应用程序的不同部分被更改或篡改。

Object.freeze() 的语法

Object.freeze() 方法需要一个对象作为参数，它用于将该对象变为不可变对象。该方法不会修改原始对象，而是返回一个冻结后的新对象。它的语法如下：

Object.freeze(obj)

其中，obj 表示需要冻结的对象。

Object.freeze() 的应用场景

在实际开发中，我们会发现有些对象是不需要被修改的，例如常量、配置等。这些对象的不变性对程序的稳定性和正确性具有重要意义。使用 Object.freeze() 方法可以有效避免不必要的错误发生。以下是一些 Object.freeze() 的应用场景：

1. 使用 Object.freeze() 确保常量的不变性

在 JavaScript 中，常量可以使用 const 关键字定义。但是，这并不意味着我们无法修改它们。例如，下面的代码就可以修改一个常量：

const obj = { name: 'John', age: 30 };
obj.age = 31;
console.log(obj);  // 输出 { name: 'John', age: 31 }

使用 Object.freeze() 方法，我们可以确保对象不被修改：

const obj = Object.freeze({ name: 'John', age: 30 });
obj.age = 31;  // 报错
console.log(obj);  // 输出 { name: 'John', age: 30 }

在这个例子中，我们使用 Object.freeze() 方法将常量对象 obj 冻结，然后试图修改其属性 age 的值，结果会抛出一个错误，告诉我们对象不可修改。

2. 使用 Object.freeze() 保护函数库中的对象

在实际开发中，我们可能会在函数库中使用对象或配置文件。这些对象或文件的属性值应该被认为是不可改变的，因此，我们可以使用 Object.freeze() 确保这个对象不会被修改，这能够保证代码的稳定性和正确性。

以下是一个示例：

const config = Object.freeze({
  apiUrl: 'https://api.example.com',
  timeout: 15000,
  maxRetry: 3,
  debug: false
});

在这个例子中，我们使用 Object.freeze() 将配置对象冻结起来，来确保其不被修改。

3. 使用 Object.freeze() 保护公共对象

使用一个公共对象来存储应用程序的状态非常常见。这样的对象通常被多个函数和模块共享。为了确保对象不被意外修改，我们可以使用 Object.freeze() 保护公共对象。

以下是一个示例：

// www.javascriptcn.com code example
const appState = Object.freeze({
  user: null,
  isLoggedIn: false
});

function login() {
  // 模拟登录
  appState.user = { name: 'John' };
  appState.isLoggedIn = true;  // 报错
}

login();
console.log(appState);  // 输出 { user: null, isLoggedIn: false }

在这个例子中，我们使用 Object.freeze() 将 appState 对象冻结，然后在 login() 函数中试图修改该对象的属性值，结果会抛出一个错误，防止对象被修改。

注意事项

以下是一些关于 Object.freeze() 方法的注意事项：

1. Object.freeze() 的限制

虽然 Object.freeze() 方法可以让对象变为不可变对象，但它只会冻结直接属性。如果对象的属性是另一个对象，那么该对象的属性仍然可以修改。示例如下：

const obj = Object.freeze({ foo: {} });
obj.foo.bar = 1;
console.log(obj.foo.bar);  // 输出 1

在这个例子中，我们创建了一个对象 obj，将它冻结后，在试图修改其属性 foo 的值，结果可以成功添加一个 bar 属性。这是因为 Object.freeze() 只会冻结对象的直接属性，而不会递归冻结其嵌套的属性。

2. Object.freeze() 的副作用

使用 Object.freeze() 可能会对性能产生影响，因为它会在冻结对象时遍历对象的所有属性并将其变成只读属性。这可能是一个耗时的操作，尤其是对于大型对象。

结语

Object.freeze() 是一个很有用的方法，它可以帮助我们确保对象的不变性，从而保持代码的稳定性和正确性。但是，我们也需要注意 Object.freeze() 的限制和副作用。在实际开发中，当对象不需要被修改时，我们应该在必要的时候使用 Object.freeze() 来保护对象的状态。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d69088a941bf7134c5b672

ECMAScript 2019 中 Object.freeze() 方法使用详解